Web Inspector: Dark Mode: use the same CSS variables for dark and light modes
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 2 Oct 2018 01:31:37 +0000 (01:31 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 2 Oct 2018 01:31:37 +0000 (01:31 +0000)
https://bugs.webkit.org/show_bug.cgi?id=189766
<rdar://problem/44619650>

Use --text-color and --background-color CSS variables for both dark and light modes.

Reviewed by Matt Baker.

* UserInterface/Views/BreakpointPopoverController.css:
(.popover .edit-breakpoint-popover-content > label.toggle):
Color of the label matches the color of the popover, no need to specify it.

(.edit-breakpoint-popover-condition):
(@media (prefers-dark-interface)):
(.popover .edit-breakpoint-popover-content > table > tr > th):
* UserInterface/Views/CompletionSuggestionsView.css:
(.completion-suggestions-container > .item):
(@media (prefers-dark-interface)):
(.completion-suggestions):
* UserInterface/Views/ComputedStyleDetailsPanel.css:
(.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content)):
(.computed-style-properties .property:hover .go-to-arrow):
(@media (prefers-dark-interface)): Deleted.
(.computed-style-properties.details-section): Deleted.
(.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)): Deleted.
* UserInterface/Views/DOMTreeOutline.css:
(.tree-outline.dom):
(@media (prefers-dark-interface)):
* UserInterface/Views/DataGrid.css:
(.data-grid th):
(body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input):
(@media (prefers-dark-interface)):
* UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(@media (prefers-dark-interface)):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
* UserInterface/Views/InlineSwatch.css:
(.inline-swatch):
(.inline-swatch-variable-popover .CodeMirror pre):
(@media (prefers-dark-interface)): Deleted.
* UserInterface/Views/NetworkResourceDetailView.css:
(.network-resource-detail):
(.network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected):
(@media (prefers-dark-interface)):
(.resource-headers .value): Deleted.
Move this rule to ResourceHeadersContentView.css.

* UserInterface/Views/ObjectPreviewView.css:
(.object-preview):
(@media (prefers-dark-interface)):
(.object-preview .name):
* UserInterface/Views/ObjectTreeView.css:
(.object-tree):
(.object-tree-property :matches(.formatted-string, .formatted-regexp)):
(@media (prefers-dark-interface)): Deleted.
(.object-tree,): Deleted.

(.object-preview .name): Deleted.
(.object-preview > .size): Deleted.
Move these rules to ObjectPreviewView.css.

* UserInterface/Views/QuickConsole.css:
(.quick-console):
(@media (prefers-dark-interface)):
* UserInterface/Views/ResourceHeadersContentView.css:
(.resource-headers .value):
(.resource-headers.showing-find-banner .search-highlight):
(@media (prefers-dark-interface)): Deleted.
* UserInterface/Views/ResourceTimingBreakdownView.css:
(.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
(@media (prefers-dark-interface)):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property:not(.disabled) .value):
(.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
(@media (prefers-dark-interface)):
(.spreadsheet-style-declaration-editor .property.has-warning .warning):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration .media-label):
(.spreadsheet-css-declaration .selector:focus,):
(@media (prefers-dark-interface)):
(.spreadsheet-css-declaration .origin .go-to-link,):
* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style > .content > .rules .section-header .node-link:hover):
(@media (prefers-dark-interface)):
(.sidebar > .panel.details.css-style > .content > .rules .section-header):
* UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
(.cm-s-default,):
(@media (prefers-dark-interface)):
(.syntax-highlighted,): Deleted.
* UserInterface/Views/Table.css:
(.table):
(.table > .header):
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview > .navigation-bar.timelines):
(@media (prefers-dark-interface)):
* UserInterface/Views/TimelineRecordingContentView.css:
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
(.content-view.timeline-recording > .content-browser .recording-progress > .status > .indeterminate-progress-spinner):
(@media (prefers-dark-interface)): Deleted.
* UserInterface/Views/Variables.css:
(:root):
(@media (prefers-dark-interface)):
* UserInterface/Views/XHRBreakpointPopover.css:
(.popover .xhr-breakpoint-content > .editor-wrapper > .editor):
(@media (prefers-dark-interface)):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236705 268f45cc-cd09-0410-ab3c-d52691b4dbfc

23 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
Source/WebInspectorUI/UserInterface/Views/DataGrid.css
Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css
Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css
Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css
Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
Source/WebInspectorUI/UserInterface/Views/Table.css
Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
Source/WebInspectorUI/UserInterface/Views/Variables.css
Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css

index 66b2661..30ac74f 100644 (file)
@@ -1,3 +1,112 @@
+2018-10-01  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Dark Mode: use the same CSS variables for dark and light modes
+        https://bugs.webkit.org/show_bug.cgi?id=189766
+        <rdar://problem/44619650>
+
+        Use --text-color and --background-color CSS variables for both dark and light modes.
+
+        Reviewed by Matt Baker.
+
+        * UserInterface/Views/BreakpointPopoverController.css:
+        (.popover .edit-breakpoint-popover-content > label.toggle):
+        Color of the label matches the color of the popover, no need to specify it.
+
+        (.edit-breakpoint-popover-condition):
+        (@media (prefers-dark-interface)):
+        (.popover .edit-breakpoint-popover-content > table > tr > th):
+        * UserInterface/Views/CompletionSuggestionsView.css:
+        (.completion-suggestions-container > .item):
+        (@media (prefers-dark-interface)):
+        (.completion-suggestions):
+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
+        (.details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content)):
+        (.computed-style-properties .property:hover .go-to-arrow):
+        (@media (prefers-dark-interface)): Deleted.
+        (.computed-style-properties.details-section): Deleted.
+        (.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)): Deleted.
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.tree-outline.dom):
+        (@media (prefers-dark-interface)):
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid th):
+        (body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input):
+        (@media (prefers-dark-interface)):
+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+        (@media (prefers-dark-interface)):
+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
+        * UserInterface/Views/InlineSwatch.css:
+        (.inline-swatch):
+        (.inline-swatch-variable-popover .CodeMirror pre):
+        (@media (prefers-dark-interface)): Deleted.
+        * UserInterface/Views/NetworkResourceDetailView.css:
+        (.network-resource-detail):
+        (.network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected):
+        (@media (prefers-dark-interface)):
+        (.resource-headers .value): Deleted.
+        Move this rule to ResourceHeadersContentView.css.
+
+        * UserInterface/Views/ObjectPreviewView.css:
+        (.object-preview):
+        (@media (prefers-dark-interface)):
+        (.object-preview .name):
+        * UserInterface/Views/ObjectTreeView.css:
+        (.object-tree):
+        (.object-tree-property :matches(.formatted-string, .formatted-regexp)):
+        (@media (prefers-dark-interface)): Deleted.
+        (.object-tree,): Deleted.
+
+        (.object-preview .name): Deleted.
+        (.object-preview > .size): Deleted.
+        Move these rules to ObjectPreviewView.css.
+
+        * UserInterface/Views/QuickConsole.css:
+        (.quick-console):
+        (@media (prefers-dark-interface)):
+        * UserInterface/Views/ResourceHeadersContentView.css:
+        (.resource-headers .value):
+        (.resource-headers.showing-find-banner .search-highlight):
+        (@media (prefers-dark-interface)): Deleted.
+        * UserInterface/Views/ResourceTimingBreakdownView.css:
+        (.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
+        (@media (prefers-dark-interface)):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property:not(.disabled) .value):
+        (.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
+        (@media (prefers-dark-interface)):
+        (.spreadsheet-style-declaration-editor .property.has-warning .warning):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (.spreadsheet-css-declaration .media-label):
+        (.spreadsheet-css-declaration .selector:focus,):
+        (@media (prefers-dark-interface)):
+        (.spreadsheet-css-declaration .origin .go-to-link,):
+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .rules .section-header .node-link:hover):
+        (@media (prefers-dark-interface)):
+        (.sidebar > .panel.details.css-style > .content > .rules .section-header):
+        * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
+        (.cm-s-default,):
+        (@media (prefers-dark-interface)):
+        (.syntax-highlighted,): Deleted.
+        * UserInterface/Views/Table.css:
+        (.table):
+        (.table > .header):
+        * UserInterface/Views/TimelineOverview.css:
+        (.timeline-overview > .navigation-bar.timelines):
+        (@media (prefers-dark-interface)):
+        * UserInterface/Views/TimelineRecordingContentView.css:
+        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
+        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
+        (.content-view.timeline-recording > .content-browser .recording-progress > .status > .indeterminate-progress-spinner):
+        (@media (prefers-dark-interface)): Deleted.
+        * UserInterface/Views/Variables.css:
+        (:root):
+        (@media (prefers-dark-interface)):
+        * UserInterface/Views/XHRBreakpointPopover.css:
+        (.popover .xhr-breakpoint-content > .editor-wrapper > .editor):
+        (@media (prefers-dark-interface)):
+
 2018-09-28  Andy Estes  <aestes@apple.com>
 
         REGRESSION (r236091): CSSKeywordCompletions.js has "checkout" instead of "check-out" as a value for -apple-pay-button-type
index 4adb88c..930dadb 100644 (file)
@@ -35,7 +35,6 @@
 }
 
 .popover .edit-breakpoint-popover-content > label.toggle {
-    color: black;
     font-weight: bold;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -64,7 +63,7 @@
     padding: 4px 0 2px 0;
     -webkit-appearance: textfield;
     border: 1px solid hsl(0, 0%, 78%);
-    background: white;
+    background: var(--background-color-code);
 }
 
 .edit-breakpoint-popover-condition > .CodeMirror {
@@ -91,15 +90,7 @@ body[dir=rtl] :matches(#edit-breakpoint-popover-ignore, #edit-breakpoint-popover
 }
 
 @media (prefers-dark-interface) {
-    .popover .edit-breakpoint-popover-content > label.toggle {
-        color: unset;
-    }
-
     .popover .edit-breakpoint-popover-content > table > tr > th {
         color: var(--text-color-secondary);
     }
-
-    .edit-breakpoint-popover-condition {
-        background: var(--background-color-code);
-    }
 }
index 7470903..507196a 100644 (file)
@@ -67,7 +67,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    color: black;
+    color: var(--text-color);
 }
 
 .completion-suggestions-container:not(:active) > .item.selected,
@@ -80,8 +80,4 @@
     .completion-suggestions {
         background-color: var(--overlay-background);
     }
-
-    .completion-suggestions-container > .item {
-        color: var(--text-color);
-    }
 }
index 43797e8..f56fe2b 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .details-section:matches(.computed-style-properties, .computed-style-box-model):not(.collapsed) > :matches(.header, .content) {
-    background-color: white;
+    background-color: var(--background-color);
 }
 
 .computed-style-properties .property .go-to-arrow {
 .computed-style-properties .property:hover .go-to-arrow {
     display: initial;
 }
-
-@media (prefers-dark-interface) {
-    .computed-style-properties.details-section {
-        background-color: var(--background-color);
-    }
-
-    .details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
-        background-color: var(--background-color);
-    }
-}
index 6bd49e9..774b8d2 100644 (file)
@@ -36,7 +36,7 @@
 
  /* Needed to make the negative z-index on .selection-area works. Otherwise the background-color from .syntax-highlighted hides the selection. */
     background-color: transparent !important;
-    color: black;
+    color: var(--text-color);
 
     --item-parent-margin-start: -15px;
 
@@ -308,10 +308,6 @@ body[dir=rtl] .tree-outline.dom li.parent.shadow::after {
 }
 
 @media (prefers-dark-interface) {
-    .tree-outline.dom {
-        color: var(--text-color);
-    }
-
     .tree-outline.dom li.elements-drag-over .selection-area {
         border-top-color: var(--selected-background-color);
     }
index 2faa7bb..c27ce72 100644 (file)
@@ -84,7 +84,7 @@
     vertical-align: middle;
     font-weight: normal;
     white-space: nowrap;
-    background-color: white;
+    background-color: var(--background-color);
     overflow: hidden;
 }
 
@@ -426,14 +426,10 @@ body[dir=rtl] .data-grid :matches(th, td):first-child {
 }
 
 body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input {
-    color: white;
+    color: var(--text-color);
 }
 
 @media (prefers-dark-interface) {
-    .data-grid th {
-        background-color: var(--background-color);
-    }
-
     .data-grid td .subtitle {
         color: var(--selected-secondary-text-color);
     }
@@ -442,10 +438,6 @@ body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .
         color: hsla(0, 0%, var(--foreground-lightness), 0.9);
     }
 
-    body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input {
-        color: var(--text-color);
-    }
-
     .data-grid tr.editable .cell-content > input {
         color: inherit;
     }
index 9d151dc..191b734 100644 (file)
@@ -109,6 +109,7 @@ body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .options-containe
 .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
     margin: 0 0 1px;
     padding: 2px 4px 3px;
+    color: var(--text-color);
     background: none;
     border: none;
     border-radius: 3px;
@@ -222,8 +223,4 @@ body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-conta
     .sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
         filter: var(--filter-invert);
     }
-
-    .sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle{
-        color: var(--text-color);
-    }
 }
index e1fc762..890a945 100644 (file)
@@ -31,7 +31,7 @@
     height: 1em;
     margin-right: 3px;
     vertical-align: -2px;
-    background-color: white;
+    background-color: var(--background-color);
     border-radius: 2px;
     overflow: hidden;
     cursor: default;
 .inline-swatch-variable-popover .CodeMirror pre {
     padding: 0 3px;
 }
-
-@media (prefers-dark-interface) {
-    .inline-swatch {
-        background: var(--background-color);
-    }
-}
index 73b53d9..e55e34d 100644 (file)
@@ -31,7 +31,7 @@
     bottom: 0;
     /* left or right set by NetworkTableView on display / resize */
     z-index: 10;
-    background-color: white;
+    background-color: var(--background-color);
 }
 
 .network-resource-detail .navigation-bar {
@@ -61,7 +61,7 @@
 
 .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
     color: var(--selected-background-color);
-    background-color: white;
+    background-color: var(--background-color);
 }
 
 .network-resource-detail > .content-browser {
 }
 
 @media (prefers-dark-interface) {
-    .network-resource-detail {
-        background-color: var(--background-color);
-    }
-
     .network-resource-detail .item.close > .glyph {
         background-color: hsla(0, 0%, 100%, 0.2);
     }
@@ -99,8 +95,4 @@
         background-color: unset;
         color: var(--glyph-color-active);
     }
-
-    .resource-headers .value {
-        color: var(--text-color);
-    }
 }
index dc5e0a9..283c302 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .object-preview {
-    color: black;
+    color: var(--text-color);
     font-style: italic;
     font-family: Menlo, monospace;
     font-size: 11px;
@@ -47,3 +47,9 @@
 .object-preview > .title {
     line-height: 16px;
 }
+
+@media (prefers-dark-interface) {
+    .object-preview .name {
+        color: var(--syntax-highlight-boolean-color);
+    }
+}
index 4eada64..b59d624 100644 (file)
@@ -26,7 +26,7 @@
 .object-tree {
     position: relative;
     display: inline-block;
-    color: black;
+    color: var(--text-color);
     font-family: Menlo, monospace;
     font-size: 11px;
 }
 .object-tree-property :matches(.formatted-string, .formatted-regexp) {
     white-space: nowrap;
 }
-
-@media (prefers-dark-interface) {
-    .object-tree,
-    .object-preview {
-        color: var(--text-color);
-    }
-
-    .object-preview .name {
-        color: var(--syntax-highlight-boolean-color);
-    }
-
-    .object-preview > .size {
-        color: var(--console-secondary-text-color);
-    }
-}
index 58d4f7f..5c79859 100644 (file)
@@ -30,7 +30,8 @@
     display: flex;
     align-items: flex-end;
 
-    background-color: white;
+    color: var(--text-color);
+    background-color: var(--background-color-code);
     border-top: 1px solid var(--border-color);
     padding: 3px 0 4px;
 
 }
 
 @media (prefers-dark-interface) {
-    .quick-console {
-        background-color: var(--background-color-code);
-        color: var(--text-color);
-        border-top: 1px solid var(--border-color);
-    }
-
     .CodeMirror .jump-to-symbol-highlight,
     .meta-key-pressed .spreadsheet-css-declaration:not(.locked) :matches(.name, .value):not(.editing):hover {
         color: var(--syntax-highlight-link-color) !important;
index 806466b..13bb512 100644 (file)
@@ -61,7 +61,7 @@ body[dir=rtl] .resource-headers .details .pair {
 }
 
 .resource-headers .value {
-    color: black;
+    color: var(--text-color);
 }
 
 .resource-headers .header > .key {
@@ -83,9 +83,3 @@ body[dir=rtl] .resource-headers .details .pair {
     background-color: hsla(53, 83%, 53%, 0.2);
     border-bottom: 1px solid hsl(47, 82%, 60%);
 }
-
-@media (prefers-dark-interface) {
-    .resource-headers .value {
-        color: var(--text-color);
-    }
-}
index 7f39230..0e98964 100644 (file)
@@ -53,7 +53,7 @@
 }
 
 .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
-    color: black;
+    color: var(--text-color);
 }
 
 .resource-timing-breakdown > table hr {
         --popover-background-color: var(--panel-background-color);
     }
 
-    .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
-        color: var(--text-color);
-    }
-
     .resource-timing-breakdown > table > tr > td.label,
     .resource-timing-breakdown > table > tr > td.time {
         color: var(--text-color-secondary);
index 2a42f24..24c5aaa 100644 (file)
@@ -42,7 +42,7 @@
 }
 
 .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
-    color: black;
+    color: var(--text-color);
 }
 
 .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
@@ -83,7 +83,7 @@
 
 .spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
     text-decoration: line-through;
-    -webkit-text-decoration-color: hsla(0, 0%, 0%, 0.6);
+    -webkit-text-decoration-color: hsla(0, 0%, var(--foreground-lightness), 0.6);
 }
 
 .spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) .content > * {
 }
 
 @media (prefers-dark-interface) {
-    .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
-        color: rgb(227, 227, 227)
-    }
-
     .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
         outline-color: var(--background-color-secondary) !important;
     }
     .spreadsheet-style-declaration-editor .property.has-warning .warning {
         filter: invert(100%) hue-rotate(150deg);
     }
-
-    .spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > * {
-        text-decoration: line-through;
-        -webkit-text-decoration-color: hsla(0, 0%, var(--text-color), 0.6);
-    }
 }
index d54e71a..d158645 100644 (file)
@@ -48,7 +48,7 @@
 }
 
 .spreadsheet-css-declaration .media-label {
-    color: black;
+    color: var(--text-color);
 }
 
 .spreadsheet-css-declaration .origin {
 
 .spreadsheet-css-declaration .selector:focus,
 .spreadsheet-css-declaration .selector > .matched {
-    color: black;
+    color: var(--text-color);
 }
 
 .spreadsheet-css-declaration.locked {
         color: var(--text-color-secondary);
     }
 
-    .spreadsheet-css-declaration .selector:focus,
-    .spreadsheet-css-declaration .selector > .matched {
-        color: var(--text-color);
-    }
-
     .spreadsheet-css-declaration.locked .origin::after {
         filter: var(--filter-invert);
     }
     .spreadsheet-css-declaration .origin .go-to-link:hover {
         color: var(--text-color-secondary);
     }
-
-    .spreadsheet-css-declaration .media-label {
-        color: var(--text-color);
-    }
 }
index 871ea8e..70c472f 100644 (file)
@@ -41,7 +41,7 @@
 }
 
 .sidebar > .panel.details.css-style > .content > .rules .section-header .node-link:hover {
-    color: black;
+    color: var(--text-color);
 }
 
 .sidebar > .panel.details.css-style > .content > .rules > .message-text-view {
 @media (prefers-dark-interface) {
     .sidebar > .panel.details.css-style > .content > .rules .section-header {
         color: var(--text-color-secondary);
-        border-bottom: 0.5px solid hsla(0, 0%, var(--background-color), 0.2);
-    }
-
-    .sidebar > .panel.details.css-style > .content > .rules .section-header .node-link:hover {
-        color: var(--text-color);
+        border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
     }
 }
index 70a8243..aea2d7c 100644 (file)
@@ -27,7 +27,7 @@
 
 .cm-s-default,
 .syntax-highlighted {
-    color: black;
+    color: var(--text-color);
 
     font-family: Menlo, monospace;
     font-size: 11px;
 }
 
 @media (prefers-dark-interface) {
-    .syntax-highlighted,
-    .cm-s-default,
     .CodeMirror {
         color: var(--text-color);
     }
index bc0994a..a6369e4 100644 (file)
@@ -28,7 +28,7 @@
     outline: none;
     width: 100%;
     height: 100%;
-    background: white;
+    background: var(--background-color);
 
     --table-column-border-start: 1px solid transparent;
     --table-column-border-end: 0.5px solid var(--border-color);
@@ -40,7 +40,7 @@
     height: var(--navigation-bar-height);
     line-height: calc(var(--navigation-bar-height) - 1px);
     border-bottom: 1px solid var(--border-color);
-    background: white;
+    background: var(--background-color);
     overflow-x: hidden;
     vertical-align: middle;
     white-space: nowrap;
index 5181207..de4b6d1 100644 (file)
@@ -53,7 +53,7 @@ body[dir=rtl] .timeline-overview:not(.frames) > :matches(.scroll-container, .tim
     z-index: var(--z-index-header);
     width: var(--timeline-sidebar-width);
     height: 23px;
-    background-color: white;
+    background-color: var(--background-color);
     border-bottom: 1px solid var(--border-color);
 }
 
@@ -235,10 +235,6 @@ body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer {
 }
 
 @media (prefers-dark-interface) {
-    .timeline-overview > .navigation-bar.timelines {
-        background-color: var(--background-color);
-    }
-
     .timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
         background: var(--background-color-alternate);
     }
index e631a6c..b0c2da6 100644 (file)
 
 .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
     background-color: transparent;
-    color: black;
+    color: var(--text-color);
 }
 
 .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
-    color: black;
+    color: var(--text-color);
 }
 
 .content-view.timeline-recording > .content-browser .recording-progress {
     margin-left: 8px;
     vertical-align: middle;
 }
-
-@media (prefers-dark-interface) {
-    .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
-        color: var(--text-color);
-    }
-
-    .content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
-        color: unset;
-    }
-}
index a774ac6..f5c9afc 100644 (file)
     --z-index-glass-pane-for-drag: 2048;
     --z-index-uncaught-exception-sheet: 4096;
 
+    --foreground-lightness: 0%;
+
+    --text-color: black;
     --text-color-active: black;
 
+    --background-color: white;
+
     --background-color-content: white;
+    --background-color-code: white;
 
     --selected-foreground-color: white;
     --selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
@@ -147,6 +153,8 @@ body.window-inactive * {
     :root {
         color: var(--text-color);
 
+        --foreground-lightness: 100%;
+
         --text-color: hsl(0, 0%, 88%);
         --text-color-active: white;
         --text-color-secondary: hsl(0, 0%, 65%);
@@ -248,8 +256,6 @@ body.window-inactive * {
         /* Invert colors yet preserve the hue */
         --filter-invert: invert(100%) hue-rotate(180deg);
 
-        --foreground-lightness: 100%;
-
         /* TODO: Use the same variable for the default theme */
         --overlay-background: hsla(0, 0%, 24%, 0.9);
 
index 975f282..df0299d 100644 (file)
@@ -39,7 +39,7 @@
     padding: 4px 0 2px 0;
     -webkit-appearance: textfield;
     border: 1px solid hsl(0, 0%, 78%);
-    background: white;
+    background: var(--background-color-code);
 
     --editor-margin-start: 4px;
 }
@@ -66,6 +66,5 @@ body[dir=rtl] .popover .xhr-breakpoint-content > .editor-wrapper > .editor {
     .popover .xhr-breakpoint-content > .editor-wrapper > .editor {
         -webkit-appearance: unset;
         border-color: var(--text-color-quaternary);
-        background: var(--background-color-code);
     }
 }