DevTools: Change the dark theme selection color to blue (remake)

Change-Id: Ibf1a705b7106ea2a04d45f553819b20d1a37fc3e
Reviewed-on: https://chromium-review.googlesource.com/965602Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Pavel Feldman <pfeldman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543896}

third_party/WebKit/Source/devtools/front_end/accessibility/axBreadcrumbs.css

@@ -105,7 +105,7 @@
 }
 
 .ax-breadcrumbs .ax-node.inspected:focus .selection {
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
 }
 
 .ax-breadcrumbs .ax-node.parent.inspected:focus::before {

third_party/WebKit/Source/devtools/front_end/animation/animationScreenshotPopover.css

@@ -14,5 +14,5 @@ img {
     height: 2px;
     bottom: 0;
     left: 0;
-    background: hsl(217, 89%, 61%);
+    background: var(--selection-bg-color);
 }

third_party/WebKit/Source/devtools/front_end/animation/animationTimeline.css

@@ -331,7 +331,7 @@ text.animation-timeline-grid-label {
 }
 
 .animation-buffer-preview.selected {
-    background-color: hsl(217, 89%, 61%);
+    background-color: var(--selection-bg-color);
 }
 
 .animation-paused {
@@ -404,17 +404,17 @@ text.animation-timeline-grid-label {
 
 .animation-playback-rate-button.selected {
     color: hsl(0, 100%, 100%);
-    background-color: hsl(217, 89%, 61%);
-    border-color: hsl(217, 89%, 61%);
+    background-color: var(--selection-bg-color);
+    border-color: var(--selection-bg-color);
     z-index: 1;
 }
 
 .animation-playback-rate-button.selected:first-child {
-    color: hsl(217, 89%, 61%);
+    color: var(--selection-bg-color);
     background-color: hsl(217, 89%, 100%);
 }
 
-.animation-remove-button {
+.animation-remove-button, -theme-preserve {
     position: absolute;
     top: -3px;
     right: -3px;

third_party/WebKit/Source/devtools/front_end/changes/changesView.css

@@ -16,7 +16,7 @@
 }
 
 :focus.selected {
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
     color: #FFF;
 }
 

third_party/WebKit/Source/devtools/front_end/data_grid/dataGrid.css

@@ -213,21 +213,21 @@
 }
 
 .data-grid:focus table.data tr.selected {
-    background-color: rgb(56, 121, 217);
-    color: white;
+    background-color: var(--selection-bg-color);
+    color: var(--selection-fg-color);
 }
 
 .data-grid:focus tr.selected .devtools-link {
-    color: white;
+    color: var(--selection-fg-color);
 }
 
 .data-grid:focus tr.parent.selected td.disclosure::before {
-    background-color: white;
+    background-color: var(--selection-fg-color);
     -webkit-mask-position: 0 0;
 }
 
 .data-grid:focus tr.expanded.selected td.disclosure::before {
-    background-color: white;
+    background-color: var(--selection-fg-color);
     -webkit-mask-position: -16px 0;
 }
 

third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css

@@ -36,6 +36,7 @@
 
 .elements-disclosure li.selected .selected-hint:before {
     opacity: 0.6;
+    color: var(--selection-fg-color);
 }
 
 .elements-disclosure li.parent::before {
@@ -118,11 +119,11 @@
 }
 
 .elements-disclosure ol li.selected:focus {
-    color: white;
+    color: var(--selection-fg-color);
 }
 
 .elements-disclosure ol li.parent.selected:focus::before {
-    background-color: white;
+    background-color: var(--selection-fg-color);
 }
 
 .elements-disclosure ol li.selected:focus * {
@@ -154,16 +155,14 @@
 }
 
 .elements-tree-editor {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     margin-right: 4px;
 }
 
 .elements-disclosure li.elements-drag-over .selection {
     display: block;
     margin-top: -2px;
-    border-top: 2px solid rgb(56, 121, 217);
+    border-top: 2px solid var(--selection-bg-color);
 }
 
 .elements-disclosure li.in-clipboard .highlight {
@@ -189,9 +188,7 @@ button, input, select {
 }
 
 .editing {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     background-color: white;
     text-overflow: clip !important;
     padding-left: 2px;
@@ -298,19 +295,11 @@ ol:hover > li > .elements-tree-shortcut-link {
     display: none;
 }
 
-ol li.selected:focus .webkit-html-tag {
-    color: #a5a5a5;
-}
-
 ol li.selected:focus .webkit-html-tag-name,
 ol li.selected:focus .webkit-html-close-tag-name,
 ol li.selected:focus .webkit-html-attribute-value,
 ol li.selected:focus .devtools-link {
-    color: white;
-}
-
-ol li.selected:focus .webkit-html-attribute-name {
-    color: #ccc;
+    color: var(--selection-fg-color);
 }
 
 .elements-disclosure .gutter-container {

third_party/WebKit/Source/devtools/front_end/inline_editor/bezierEditor.css

@@ -13,7 +13,7 @@
 }
 
 .bezier-preset-selected > svg {
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
 }
 
 .bezier-preset-label {
@@ -127,7 +127,7 @@ svg.bezier-preset-modify:hover, .bezier-preset:hover {
 }
 
 .bezier-preset-selected .bezier-preset:hover {
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
 }
 
 .bezier-preset-modify path {
@@ -179,7 +179,7 @@ svg.bezier-preset-modify.bezier-preset-plus {
 svg.bezier-preset-modify:active,
 .-theme-selection-color {
     transform: scale(1.1);
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
 }
 
 .bezier-preset-category:active {

third_party/WebKit/Source/devtools/front_end/inline_editor/swatchPopover.css

@@ -7,7 +7,7 @@
 .widget {
     display: flex;
     background: white;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     border-radius: 2px;
     overflow: auto;
     -webkit-user-select: text;

third_party/WebKit/Source/devtools/front_end/network/networkLogView.css

@@ -146,7 +146,7 @@
 .network-log-grid.data-grid:focus tr.selected,
 .network-log-grid.data-grid:focus tr.selected .network-cell-subtitle,
 .network-log-grid.data-grid:focus tr.selected .network-dim-cell {
-    color: white !important;
+    color: var(--selection-fg-color) !important;
 }
 
 .network-log-grid tr.highlighted-row {

third_party/WebKit/Source/devtools/front_end/perf_ui/flameChart.css

@@ -27,7 +27,7 @@
 .flame-chart-selected-element {
     position: absolute;
     pointer-events: none;
-    outline: 2px solid rgb(56, 121, 217);
+    outline: 2px solid var(--selection-bg-color);
     background-color: rgba(56, 121, 217, 0.1);
 }
 
@@ -37,7 +37,7 @@
     bottom: 0;
     z-index: 100;
     width: 2px;
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
     pointer-events: none;
 }
 
@@ -49,9 +49,7 @@
     padding: 4px 8px;
     white-space: nowrap;
     max-width: 80%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
 }
 
 .flame-chart-entry-info table tr td:empty {

third_party/WebKit/Source/devtools/front_end/perf_ui/timelineOverviewInfo.css

@@ -7,7 +7,7 @@
 .overview-info:not(:empty) {
     display: flex;
     background: white;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     padding: 3px;
 }
 

third_party/WebKit/Source/devtools/front_end/resources/serviceWorkerCacheViews.css

@@ -34,7 +34,7 @@
 }
 
 .service-worker-cache-data-view .data-grid:focus .data-container tr.selected {
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
     color: white;
 }
 

third_party/WebKit/Source/devtools/front_end/security/sidebar.css

@@ -21,7 +21,7 @@
 .tree-outline li.selected:focus .lock-icon,
 .tree-outline .security-sidebar-tree-item.selected:focus .icon
 {
-    background-color: white;
+    background-color: var(--selection-fg-color);
 }
 
 .tree-outline .security-main-view-sidebar-tree-item {

third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css

@@ -136,7 +136,7 @@
     to { background-color: rgb(171, 191, 254); }
 }
 
-.cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
+.cm-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber, -theme-preserve {
     color: white;
     border-width: 1px 4px 1px 1px !important;
     -webkit-border-image: url(Images/breakpoint.png) 1 4 1 1;
@@ -268,26 +268,30 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
     display: block !important;
 }
 
-.cm-execution-line,
-.-theme-selection-color {
-    background-color: rgb(230, 236, 255);
+.cm-execution-line {
+    background-color: rgba(0, 59, 255, 0.10);
 }
 
-.cm-execution-line-outline,
-.-theme-selection-color {
+.cm-execution-line-outline {
     outline: 1px solid rgb(64, 115, 244);
 }
 
-.cm-execution-line-tail,
-.-theme-selection-color {
+.cm-execution-line-tail {
     background-color: rgb(171, 191, 254);
 }
 
-.cm-execution-line .CodeMirror-linenumber,
-.-theme-selection-color {
+.cm-execution-line .CodeMirror-linenumber {
     border-right: 1px solid rgb(64, 115, 244);
 }
 
+.-theme-with-dark-background .cm-execution-line {
+    outline: 1px solid var(--selection-color);
+}
+
+.-theme-with-dark-background .cm-execution-line-tail {
+    background-color: var(--selection-color);
+}
+
 .cm-token-highlight {
     position: relative;
 }

third_party/WebKit/Source/devtools/front_end/timeline/timelineHistoryManager.css

@@ -6,7 +6,7 @@
 
 .drop-down {
   padding: 1px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--drop-shadow);
   background: white;
 }
 
@@ -19,7 +19,7 @@
 }
 
 .preview-item.selected {
-  border-color: rgb(56, 121, 217);
+  border-color: var(--selection-bg-color);
 }
 
 .preview-item canvas {

third_party/WebKit/Source/devtools/front_end/timeline/timelinePanel.css

@@ -665,6 +665,10 @@
     box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
 }
 
+.-theme-with-dark-background .timeline-landing-warning {
+    background: black;
+}
+
 .timeline-landing-warning-close {
     float: right;
     margin-top: -10px;

third_party/WebKit/Source/devtools/front_end/timeline/timelineStatusDialog.css

@@ -10,9 +10,7 @@
     padding: 16px 16px 12px 16px;
     align-self: center;
     background-color: white;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
 }
 
 .status-dialog-line {

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

@@ -1816,7 +1816,6 @@ UI.ThemeSupport = class {
    *
    * Theming API is primarily targeted at making dark theme look good.
    * - If rule has ".-theme-preserve" in selector, it won't be affected.
-   * - If rule has ".selection" or "selected" or "-theme-selection-color" in selector, its hue is rotated 180deg in dark themes.
    * - One can create specializations for dark themes via body.-theme-with-dark-background selector in host context.
    */
   _patchProperty(selectorText, style, name, output) {
@@ -1829,19 +1828,10 @@ UI.ThemeSupport = class {
     if (name === 'background-image' && value.indexOf('gradient') === -1)
       return;
 
-    let isSelection = selectorText.indexOf('.-theme-selection-color') !== -1;
-    if (selectorText.indexOf('-theme-') !== -1 && !isSelection)
+    if (selectorText.indexOf('-theme-') !== -1)
       return;
 
-    if (name === '-webkit-border-image') {
-      output.push('-webkit-filter: invert(100%)');
-      return;
-    }
-
-    isSelection = isSelection || selectorText.indexOf('selected') !== -1 || selectorText.indexOf('.selection') !== -1;
     let colorUsage = UI.ThemeSupport.ColorUsage.Unknown;
-    if (isSelection)
-      colorUsage |= UI.ThemeSupport.ColorUsage.Selection;
     if (name.indexOf('background') === 0 || name.indexOf('border') === 0)
       colorUsage |= UI.ThemeSupport.ColorUsage.Background;
     if (name.indexOf('background') === -1)
@@ -1891,15 +1881,13 @@ UI.ThemeSupport = class {
    * @param {!UI.ThemeSupport.ColorUsage} colorUsage
    */
   _patchHSLA(hsla, colorUsage) {
-    let hue = hsla[0];
+    const hue = hsla[0];
     const sat = hsla[1];
     let lit = hsla[2];
     const alpha = hsla[3];
 
     switch (this._themeName) {
       case 'dark':
-        if (colorUsage & UI.ThemeSupport.ColorUsage.Selection)
-          hue = (hue + 0.5) % 1;
         const minCap = colorUsage & UI.ThemeSupport.ColorUsage.Background ? 0.14 : 0;
         const maxCap = colorUsage & UI.ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
         lit = 1 - lit;
@@ -1924,7 +1912,6 @@ UI.ThemeSupport.ColorUsage = {
   Unknown: 0,
   Foreground: 1 << 0,
   Background: 1 << 1,
-  Selection: 1 << 2,
 };
 
 /**

third_party/WebKit/Source/devtools/front_end/ui/checkboxTextLabel.css

@@ -50,6 +50,10 @@ input.dt-checkbox-themed:after {
     -webkit-mask-position: 0 0;
 }
 
+:host-context(.-theme-with-dark-background) input:not(.dt-checkbox-themed) {
+    filter: invert(80%);
+}
+
 @media (-webkit-min-device-pixel-ratio: 1.1) {
 input.dt-checkbox-themed:after {
     -webkit-mask-image: url(Images/checkboxCheckmark_2x.png);

third_party/WebKit/Source/devtools/front_end/ui/dialog.css

@@ -5,7 +5,7 @@
  */
 
 .widget {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     background: white;
     justify-content: flex-start;
     align-items: stretch;

third_party/WebKit/Source/devtools/front_end/ui/inspectorCommon.css

@@ -46,13 +46,6 @@
     box-sizing: border-box;
 }
 
-:root {
-  --toolbar-bg-color: #fafafa;
-  --toolbar-hover-bg-color: #eaeaea;
-  --selection-bg-color: #3879d9;
-  --selection-inactive-bg-color: #dadada;
-}
-
 :focus {
     outline-width: 0;
 }
@@ -205,9 +198,7 @@ input {
 }
 
 .editing {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     background-color: white;
     text-overflow: clip !important;
     padding-left: 2px;
@@ -393,20 +384,20 @@ label[is=dt-icon-label] {
     background-image: url(Images/popoverArrows.png);
 }
 
-.force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons {
+.force-white-icons [is=ui-icon].spritesheet-smallicons, [is=ui-icon].force-white-icons.spritesheet-smallicons, -theme-preserve {
     -webkit-mask-image: -webkit-image-set(url(Images/smallIcons.png) 1x, url(Images/smallIcons_2x.png) 2x);
     -webkit-mask-position: var(--spritesheet-position);
-    background: white !important;
+    background: #fafafa !important;
 }
 
-.force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons {
+.force-white-icons [is=ui-icon].spritesheet-largeicons, [is=ui-icon].force-white-icons.spritesheet-largeicons, -theme-preserve {
     -webkit-mask-image: -webkit-image-set(url(Images/largeIcons.png) 1x, url(Images/largeIcons_2x.png) 2x);
     -webkit-mask-position: var(--spritesheet-position);
-    background: white !important;
+    background: #fafafa !important;
 }
 
-.force-white-icons [is=ui-icon].spritesheet-mediumicons, [is=ui-icon].force-white-icons.spritesheet-mediumicons {
+.force-white-icons [is=ui-icon].spritesheet-mediumicons, [is=ui-icon].force-white-icons.spritesheet-mediumicons, -theme-preserve {
     -webkit-mask-image: -webkit-image-set(url(Images/mediumIcons.png) 1x, url(Images/mediumIcons_2x.png) 2x);
     -webkit-mask-position: var(--spritesheet-position);
-    background: white !important;
+    background: #fafafa !important;
 }

third_party/WebKit/Source/devtools/front_end/ui/inspectorStyle.css

@@ -27,11 +27,35 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-html {
+:root {
     height: 100%;
     overflow: hidden;
 }
 
+:root {
+  --toolbar-bg-color: #fafafa;
+  --toolbar-hover-bg-color: #eaeaea;
+  --selection-fg-color: white;
+  --selection-bg-color: #3879d9;
+  --selection-inactive-bg-color: #dadada;
+  --tab-selected-fg-color: #3879d9;
+  --drop-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
+                 0 2px 4px rgba(0, 0, 0, 0.2),
+                 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.-theme-with-dark-background {
+  --toolbar-bg-color: #333333;
+  --toolbar-hover-bg-color: #202020;
+  --selection-bg-color: #264f78;
+  --selection-fg-color: #cdcdcd;
+  --selection-inactive-bg-color: #333333;
+  --tab-selected-fg-color: #eaeaea;
+  --drop-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2),
+                 0 2px 4px 2px rgba(0, 0, 0, 0.2),
+                 0 2px 6px 2px rgba(0, 0, 0, 0.1);
+}
+
 body {
     height: 100%;
     width: 100%;

third_party/WebKit/Source/devtools/front_end/ui/inspectorSyntaxHighlight.css

@@ -52,7 +52,7 @@
 .cm-xml-meta {color: rgb(192, 192, 192);}
 .cm-xml-comment {color: rgb(35, 110, 37);}
 .cm-xml-string {color: rgb(26, 26, 166);}
-.cm-xml-tag {color: rgb(136, 18, 128);}
+.cm-xml-tag {color: var(--dom-tag-name-color);}
 .cm-xml-attribute {color: rgb(153, 69, 0);}
 .cm-xml-link {color: #00e;}
 

third_party/WebKit/Source/devtools/front_end/ui/inspectorSyntaxHighlightDark.css

@@ -8,7 +8,7 @@
 .cm-js-attribute{color:rgb(97, 148, 198);}
 .cm-js-builtin{color:rgb(159, 180, 214);}
 .cm-js-comment{color:rgb(116, 116, 116);}
-.cm-js-def{color:rgb(93, 176, 215);}
+.cm-js-def{color:var(--dom-tag-name-color);}
 .cm-js-keyword{color:rgb(154, 127, 213);}
 .cm-js-link{color:rgb(159, 180, 214);}
 .cm-js-meta{color:rgb(221, 251, 85);}
@@ -17,7 +17,7 @@
 .cm-js-property{color:rgb(210, 192, 87);}
 .cm-js-string{color:rgb(242, 139, 84);}
 .cm-js-string-2{color:rgb(242, 139, 84);}
-.cm-js-tag{color:rgb(93, 176, 215);}
+.cm-js-tag{color:var(--dom-tag-name-color);}
 .cm-js-variable{color:rgb(217, 217, 217);}
 .cm-js-variable-2{color:rgb(217, 217, 217);}
 .cm-atom{color:rgb(161, 247, 181);}
@@ -44,17 +44,17 @@
 .cm-xml-comment{color:rgb(137, 137, 137);}
 .cm-xml-error{color:rgb(198, 95, 95);}
 .cm-xml-string{color:rgb(242, 151, 102);}
-.cm-xml-tag{color:rgb(93, 176, 215);}
-.cm-xml-attribute{color:rgb(155, 187, 220);}
+.cm-xml-tag{color:var(--dom-tag-name-color);}
+.cm-xml-attribute{color:var(--dom-attribute-name-color);}
 .cm-xml-link{color:rgb(231, 194, 111);}
 
-.webkit-html-attribute-name{color:rgb(155, 187, 220);}
+.webkit-html-attribute-name{color:var(--dom-attribute-name-color);}
 .webkit-html-attribute-value{color:rgb(242, 151, 102);}
 .webkit-html-comment{color:rgb(137, 137, 137);}
 .devtools-link{color:rgb(231, 194, 111);}
-.webkit-html-tag{color:rgb(93, 176, 215);}
-.webkit-html-tag-name{color:rgb(93, 176, 215);}
-.webkit-html-close-tag-name{color:rgb(93, 176, 215);}
+.webkit-html-tag{color:var(--dom-tag-name-color);}
+.webkit-html-tag-name{color:var(--dom-tag-name-color);}
+.webkit-html-close-tag-name{color:var(--dom-tag-name-color);}
 .webkit-html-text-node{color:rgb(207, 208, 208);}
 .webkit-html-css-node{color:rgb(207, 208, 208);}
 .webkit-html-js-node{color:rgb(207, 208, 208);}
@@ -70,8 +70,8 @@
 .webkit-css-string{color:rgb(231, 194, 111);}
 .webkit-css-url{color:rgb(231, 194, 111);}
 
-.cm-def{color:rgb(93, 176, 215);}
-.cm-header{color:rgb(93, 176, 215);}
+.cm-def{color:var(--dom-tag-name-color);}
+.cm-header{color:var(--dom-tag-name-color);}
 .cm-variable-2{color:rgb(217, 217, 217);}
 
 .cm-variable-2 {color: #05a;}
@@ -82,7 +82,12 @@
 .cm-qualifier{color:rgb(255, 163, 79);}
 .cm-builtin{color:rgb(159, 180, 214);}
 .cm-bracket {color: #997;}
-.cm-tag{color:rgb(93, 176, 215);}
+.cm-tag{color:var(--dom-tag-name-color);}
 .cm-attribute{color:rgb(97, 148, 198);}
 .cm-hr {color: #999;}
 .cm-link{color:rgb(159, 180, 214);}
+
+:root {
+    --dom-tag-name-color: rgb(93, 176, 215);
+    --dom-attribute-name-color: rgb(155, 187, 220);
+}

third_party/WebKit/Source/devtools/front_end/ui/popover.css

@@ -7,7 +7,7 @@
 .widget {
     display: flex;
     background: white;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     border-radius: 2px;
     overflow: auto;
     -webkit-user-select: text;

third_party/WebKit/Source/devtools/front_end/ui/softContextMenu.css

@@ -16,6 +16,10 @@
     min-width: 160px !important;
 }
 
+:host-context(.-theme-with-dark-background) .soft-context-menu {
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+}
+
 .soft-context-menu-item {
     display: flex;
     width: 100%;
@@ -47,14 +51,13 @@
 
 .soft-context-menu-item-mouse-over,
 .-theme-selection-color {
-    border-top: 1px solid rgb(56, 121, 217);
-    border-bottom: 1px solid rgb(56, 121, 217);
-    background-color: rgb(56, 121, 217);
+    border-top: 1px solid var(--selection-bg-color);
+    border-bottom: 1px solid var(--selection-bg-color);
+    background-color: var(--selection-bg-color);
     color: white;
 }
 
-:host-context(.platform-mac) .soft-context-menu-item-mouse-over,
-.-theme-selection-color {
+:host-context(.platform-mac) .soft-context-menu-item-mouse-over, -theme-preserve {
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
     background-image: linear-gradient(to right, hsl(214, 81%, 60%), hsl(214, 100%, 56%));
@@ -73,7 +76,7 @@
 }
 
 .soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
-    color: white;
+    color: var(--selection-fg-color);
 }
 
 .soft-context-menu-custom-item {
@@ -103,4 +106,4 @@
 
 .soft-context-menu-item-mouse-over .checkmark {
     opacity: 1;
-}
\ No newline at end of file
+}

third_party/WebKit/Source/devtools/front_end/ui/softDropDown.css

@@ -10,15 +10,13 @@
 
 .item-list {
     background-color: white;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     overflow-x: hidden;
     overflow-y: auto;
     width: 100%;
 }
 
 .item.highlighted {
-    color: white;
-    background-color: rgb(56, 121, 217);
+    color: var(--selection-fg-color);
+    background-color: var(--selection-bg-color);
 }

third_party/WebKit/Source/devtools/front_end/ui/suggestBox.css

@@ -38,9 +38,7 @@
     background-color: #FFFFFF;
     pointer-events: auto;
     margin-left: -3px;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     overflow-x: hidden;
 }
 
@@ -86,11 +84,11 @@
 }
 
 .suggest-box-content-item.selected {
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
 }
 
 .suggest-box-content-item.selected > span {
-    color: #fff;
+    color: var(--selection-fg-color);
 }
 
 .default-selection-is-dimmed .suggest-box-content-item.selected {
@@ -102,12 +100,12 @@
 }
 
 .user-has-interacted .suggest-box-content-item.selected {
-    background-color: rgb(56, 121, 217);
+    background-color: var(--selection-bg-color);
 }
 
 .user-has-interacted .suggest-box-content-item.selected > span {
-    color: #FFF;
-}
+   color: var(--selection-fg-color);
+}}
 
 .suggest-box-content-item:hover:not(.selected) {
     background-color: rgba(56, 121, 217, 0.1);

third_party/WebKit/Source/devtools/front_end/ui/tabbedPane.css

@@ -122,6 +122,10 @@
     background-color: var(--toolbar-hover-bg-color);
 }
 
+:host-context(.-theme-with-dark-background) .tabbed-pane-header-tab.selected {
+    background-color: var(--toolbar-hover-bg-color);
+}
+
 .tabbed-pane-header-tab-title {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -138,7 +142,7 @@
 
 
 .tabbed-pane-no-tab-borders .tabbed-pane-header-tab.selected {
-    color: var(--selection-bg-color);
+    color: var(--tab-selected-fg-color);
 }
 
 .tabbed-pane-header-tab.selected {
@@ -252,13 +256,13 @@
     height: 2px;
     position: absolute;
     bottom: -1px;
-    background-color: #3E82F7;
+    background-color: var(--tab-selected-fg-color);
     left: 0;
     z-index: 50;
     transform-origin: 0 100%;
     transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
     visibility: hidden;
-    border-top: 1px solid hsl(218, 82%, 78%);
+    border-top: 1px solid var(--tab-selected-fg-color);
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.1) {

third_party/WebKit/Source/devtools/front_end/ui/textPrompt.css

@@ -10,9 +10,7 @@
 }
 
 .text-prompt-editing {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2),
-                0 2px 4px rgba(0, 0, 0, 0.2),
-                0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--drop-shadow);
     background-color: white;
     text-overflow: clip !important;
     padding-left: 2px;

third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css

@@ -56,7 +56,7 @@ ol.tree-outline li.selected:focus .selection {
 }
 
 ol.tree-outline li.parent.selected:focus::before {
-    background-color: white;
+    background-color: var(--selection-fg-color);
 }
 
 ol.tree-outline,
@@ -82,7 +82,7 @@ ol.tree-outline,
 }
 
 ol.tree-outline li.selected:focus {
-    color: white;
+    color: var(--selection-fg-color);
 }
 
 ol.tree-outline li.selected:focus * {