Attachment 358650 Details for Bug 193265 – Patch

[patch] Patch

patch.txt (text/plain), 52.29 KB, created by Nikita Vasilyev on 2019-01-08 16:25:16 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2019-01-08 16:25:16 PST

Size: 52.29 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index a74d140966e..a6adce66b9b 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,162 @@
>+2019-01-08  Nikita Vasilyev  <nvasilyev@apple.com>
>+
>+        Web Inspector: Use prefers-color-scheme instead of prefers-dark-interface
>+        https://bugs.webkit.org/show_bug.cgi?id=193265
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Views/AuditTestContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/AuditTestGroupContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/BezierEditor.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/BoxModelDetailsSectionRow.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/BreakpointActionView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/BreakpointPopoverController.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ButtonNavigationItem.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ButtonToolbarItem.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/CallFrameView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/CanvasContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/CanvasOverviewContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/CanvasSidebarPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/CanvasTabContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/CodeMirrorOverrides.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/CompletionSuggestionsView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ComputedStyleSection.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ConsoleMessageView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ConsolePrompt.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DOMTreeOutline.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DataGrid.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DebuggerDashboardView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DebuggerSidebarPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DefaultDashboardView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DetailsSection.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/DividerNavigationItem.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/Editing.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/FindBanner.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/FontResourceContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/FormattedValue.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/HoverMenu.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ImageResourceContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/IndexedDatabaseObjectStoreContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/LogContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+
>+        * UserInterface/Views/Main.css:
>+        (:root):
>+
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/NetworkDetailView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/NetworkTableContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/NewTabContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ObjectPreviewView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ObjectTreePropertyTreeElement.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/OpenResourceDialog.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ProgressView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/QuickConsole.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/RecordingActionTreeElement.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/RecordingContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/RecordingStateDetailsSidebarPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ResourceSecurityContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ResourceSizesContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ResourceTimingBreakdownView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ScopeBar.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ScopeChainDetailsSidebarPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SearchBar.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SearchSidebarPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SettingsTabContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ShaderProgramContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/ShaderProgramTreeElement.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SourceCodeTextEditor.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/TabBar.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/Table.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/TextEditor.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/TimelineDataGrid.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/TimelineIcons.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/TimelineOverview.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/Toolbar.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/TreeOutline.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/URLBreakpointPopover.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/Variables.css:
>+        (@media (prefers-color-scheme: dark)):
>+        * UserInterface/Views/WebSocketContentView.css:
>+        (@media (prefers-color-scheme: dark)):
>+
> 2019-01-07  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: Audit: run arrow shouldn't be visible when running tests
>diff --git a/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css b/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css
>index 471954b91e5..a5d47233dbe 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/AuditTestContentView.css
>@@ -96,7 +96,7 @@
>     display: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.audit-test {
>         --audit-test-header-background-color: hsla(0, 0%, 23%, 0.7);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css b/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css
>index 72631227559..264401e57d8 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/AuditTestGroupContentView.css
>@@ -145,7 +145,7 @@
>     margin-bottom: var(--audit-test-vertical-space);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.audit-test-group > header > .percentage-pass {
>         /* FIXME: Use CSS4 color blend functions once they're available. */
>         color: hsla(0, 0%, 88%, 0.5);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
>index 607e7447b5b..82701a28a67 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
>@@ -150,7 +150,7 @@ body[dir=rtl] .bezier-editor > .number-input-container > input {
>     padding-right: var(--bezier-editor-number-input-padding-start);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .bezier-editor > .bezier-preview-timing {
>         border-top-color: var(--text-color-tertiary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css b/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css
>index b1c23dfe893..de8558a795d 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css
>@@ -109,7 +109,7 @@ body[dir=rtl] .details-section .row.box-model .label {
>     vertical-align: middle;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .details-section .row.box-model {
>         color: var(--text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
>index 451a324b754..204d447f99c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
>@@ -112,7 +112,7 @@ body[dir=rtl] .breakpoint-action-block-body > .description {
>     overflow: hidden;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .breakpoint-action-block-body {
>         border-color: var(--text-color-quaternary);
>         background-color: unset;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
>index 930dadb6af6..2fa3cf4d8fa 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
>@@ -89,7 +89,7 @@ body[dir=rtl] :matches(#edit-breakpoint-popover-ignore, #edit-breakpoint-popover
>     margin-left: var(--edit-breakpoint-popover-option-margin-end);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .popover .edit-breakpoint-popover-content > table > tr > th {
>         color: var(--text-color-secondary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
>index 3a90327c36f..6eff0c08d77 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
>@@ -73,7 +73,7 @@
>     color: var(--glyph-color-disabled);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .navigation-bar .item.button {
>         color: var(--text-color-secondary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css b/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
>index 5e77654402f..7037563111e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
>@@ -62,7 +62,7 @@ body.window-inactive .toolbar .item.button.disabled {
>     opacity: 0.35 !important;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .toolbar .item.button {
>         color: var(--color-button);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
>index d7a2a44812f..b06409d376e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
>@@ -79,7 +79,7 @@ body[dir=rtl] .call-frame .icon {
>     color: hsla(0, 0%, 0%, 0.2);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .call-frame .subtitle,
>     .call-frame .subtitle .source-link {
>         color: hsla(0, 0%, var(--foreground-lightness), 0.6);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css b/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css
>index a0c85867712..4e5a90e1f03 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css
>@@ -55,7 +55,7 @@
>     opacity: 0.5;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.canvas:not(.tab) {
>         background-color: unset;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css b/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css
>index 2288debaebc..24deba28185 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css
>@@ -191,7 +191,7 @@
>     -webkit-appearance: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.canvas-overview {
>         background-color: unset;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
>index 3e6580d1faa..e6c13767378 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasSidebarPanel.css
>@@ -98,7 +98,7 @@
>     margin-bottom: 4px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .sidebar > .panel.navigation.canvas > .navigation-bar > .item.record-start-stop.disabled {
>         filter: grayscale() invert();
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css
>index c309ade9059..a6a41256b5f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css
>@@ -43,7 +43,7 @@
>     content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon {
>         filter: invert(88%);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
>index d61626bc860..f18d4fcd25b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
>@@ -118,7 +118,7 @@
>     display: initial;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .CodeMirror-cursor {
>         border-left-color: hsl(0, 0%, var(--foreground-lightness));
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
>index 507196a220e..667a023e79a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
>@@ -76,7 +76,7 @@
>     color: white;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .completion-suggestions {
>         background-color: var(--overlay-background);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>index a225d696157..48b7e4a0ef9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>@@ -56,7 +56,7 @@
>     height: var(--disclosure-button-size);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .computed-with-traces .details-section.computed-style-properties:not(.collapsed) > :matches(.header, .content) {
>         background-color: var(--background-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>index 039c455e8da..2c9c44441ca 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>@@ -157,7 +157,7 @@ body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button
>     display: block;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .computed-style-section .computed-property-item.expanded {
>         background-color: var(--background-color-code);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
>index fd5a72abb4c..3a2909f73a3 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
>@@ -285,7 +285,7 @@ body[dir=rtl] .console-message.expandable .console-top-level-message::before {
>     display: inline-block;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .console-message .syntax-highlighted {
>         background-color: unset;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
>index abd2be58e66..4dd82980bec 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
>@@ -36,7 +36,7 @@
>     overflow: hidden;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .console-prompt {
>         background-color: var(--background-color-code);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
>index 76242ad8f27..d95c3a79230 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
>@@ -61,7 +61,7 @@ body[dir=rtl] .sidebar > .panel.dom-node-details .details-section.dom-node-event
>     -webkit-appearance: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover {
>         filter: brightness(1.25);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>index 1f8d1b758ae..bebb04d2c9b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>@@ -312,7 +312,7 @@ body[dir=rtl] .tree-outline.dom li.parent.shadow::after {
>     border-bottom: 1px solid hsl(47, 82%, 60%);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .tree-outline.dom li.elements-drag-over .selection-area {
>         border-top-color: var(--selected-background-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
>index f963dc42e9c..6e4823d6db9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
>@@ -429,7 +429,7 @@ body:not(.window-inactive, .window-docked-inactive) .data-grid:focus tr.editable
>     color: var(--selected-foreground-color);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .data-grid td .subtitle {
>         color: var(--selected-secondary-text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
>index 65ebc5828ed..0ced3390aa3 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
>@@ -201,7 +201,7 @@ body[dir=rtl] .dashboard.debugger > .location :matches(.function-icon, .event-li
>     height: 14px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .toolbar .dashboard.debugger {
>         color: var(--text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
>index 48f53ed51e9..a7490a6a219 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
>@@ -111,7 +111,7 @@ body[dir=rtl] .sidebar > .panel.navigation.debugger .tree-outline.single-thread
>     border-bottom: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .sidebar > .panel.navigation.debugger .warning-banner {
>         background-color: var(--yellow-highlight-background-color);
>         color: var(--yellow-highlight-text-color);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
>index 55071fcfc38..5fffe30faa0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
>@@ -182,7 +182,7 @@ body[dir=rtl] .toolbar .dashboard.default > .item > div {
>     50% { opacity: 0.6; }
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .toolbar .dashboard.default > .item > div {
>         /* FIXME: introduce a variable for opacity and use it for both text and icons */
>         color: hsla(0, 100%, 100%, 0.2);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>index c62ddc44ce0..329a544344a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>@@ -329,7 +329,7 @@ body[dir=rtl] .details-section > .content > .group > .row.simple > .value .go-to
>     }
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .details-section > .header {
>         color: var(--text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
>index 778d5ee0258..23792d2893b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
>@@ -38,7 +38,7 @@
>     }
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .navigation-bar .item.divider {
>         --divider-background: hsl(0, 0%, 40%);
>         background-image: linear-gradient(var(--divider-background), var(--divider-background));
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Editing.css b/Source/WebInspectorUI/UserInterface/Views/Editing.css
>index 5b6a954438c..50a5dfe8329 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Editing.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Editing.css
>@@ -52,7 +52,7 @@
>     display: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .editing {
>         background-color: var(--background-color-secondary);
>         outline-color: var(--text-color-tertiary) !important;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FindBanner.css b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
>index 25f06f0048b..3854901219f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
>@@ -307,7 +307,7 @@ body[dir=rtl] .find-banner.console-find-banner > input[type="search"]::-webkit-t
>     background-color: white;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .find-banner > button.segmented {
>         background: transparent !important;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
>index 50c9f494ecf..84ebc31d7d5 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
>@@ -109,7 +109,7 @@ body[dir=rtl] .content-view.resource.font .preview > .line > .metric {
>     background-color: lightgrey;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.resource.font .preview > .line {
>         border-left-color: var(--text-color-quaternary);
>         border-right-color: var(--text-color-quaternary);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>index 62c1f2bc9f6..0509dd36340 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>@@ -78,7 +78,7 @@
>     right: -2px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .formatted-object,
>     .formatted-node,
>     .formatted-error,
>diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
>index 191b73470b0..8dfa2a72619 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
>@@ -215,7 +215,7 @@ body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-conta
>     opacity: 0.5;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
>         color: var(--text-color-secondary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
>index dc8c9c6c41c..704dc6ab1d5 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
>@@ -66,7 +66,7 @@
>     pointer-events: all;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .hover-menu > svg > :matches(path, rect) {
>         stroke: hsla(0, 0%, 100%, 0.3);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css b/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
>index ae9a257fa39..9e6bc042b0b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
>@@ -46,7 +46,7 @@
>     margin: auto 0;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.resource.image {
>         background: var(--background-color-content);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css
>index 2c663853f10..5aee0385f11 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css
>@@ -48,7 +48,7 @@
>     top: 2px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.indexed-database-object-store > .data-grid tr.selected {
>         background-color: hsl(210, 0%, 30%) !important;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/LogContentView.css b/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
>index 3108453dede..ad96a3d5f74 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
>@@ -254,7 +254,7 @@ body[dir=rtl] .console-group-title::before {
>         alt: attr(data-labelprefix);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .console-messages {
>         background-color: var(--background-color-code);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css
>index cf960e93b34..e0c76c685bf 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Main.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
>@@ -27,6 +27,10 @@
>     box-sizing: border-box;
> }
> 
>+:root {
>+    supported-color-schemes: light dark;
>+}
>+
> body {
>     font-family: -webkit-system-font, sans-serif;
>     font-size: 11px;
>@@ -383,7 +387,7 @@ body[dir=rtl] .go-to-arrow {
>     background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .go-to-arrow {
>         filter: invert();
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css
>index a094c115b1d..b51dc3b64f1 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkDetailView.css
>@@ -72,7 +72,7 @@
>     bottom: 0;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .network-detail {
>         background-color: var(--background-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
>index 74ba8bbb53f..4cb018e6d4e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
>@@ -304,7 +304,7 @@ body[dir=rtl] .waterfall .block {
>     background-color: var(--network-response-color);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .network-table .cell.domain > .lock {
>         filter: var(--filter-invert);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css
>index 345a4ee2ae2..db299b5aff5 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css
>@@ -89,7 +89,7 @@
>     margin-top: 8px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .new-tab.tab.content-view {
>         background-color: var(--background-color-content);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css
>index 283c302ca71..46d5e3e0ce7 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css
>@@ -48,7 +48,7 @@
>     line-height: 16px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .object-preview .name {
>         color: var(--syntax-highlight-boolean-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
>index c9209648d12..13267e8edd3 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
>@@ -151,7 +151,7 @@
>     color: red;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .object-tree-property .getter,
>     .object-tree-property .setter {
>         filter: invert();
>diff --git a/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
>index f489b501d44..642df83be86 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
>@@ -216,7 +216,7 @@ body[dir=rtl] .open-resource-dialog > .tree-outline .item {
>     color: hsla(0, 0%, 100%, 0.9);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .open-resource-dialog {
>         background-color: var(--overlay-background);
>         border-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ProgressView.css b/Source/WebInspectorUI/UserInterface/Views/ProgressView.css
>index 3ef4d400e0c..3728d02003d 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ProgressView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ProgressView.css
>@@ -55,7 +55,7 @@
>     margin: 0 auto;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .progress-view > .titles > .title {
>         color: var(--text-color-secondary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
>index 5c798598fa5..4d103997a2f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
>@@ -108,7 +108,7 @@
>     opacity: 1;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .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;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>index 3ef068211a0..d88e572fbfb 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>@@ -234,7 +234,7 @@ body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.init
>     margin-top: 2px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .item.action:not(.initial-state)::before {
>         color: unset;
>         opacity: 0.4;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css b/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
>index 8e875455b06..8d60f23f0b2 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
>@@ -87,7 +87,7 @@
>     z-index: 10;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view:not(.tab).recording {
>         background-color: unset;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css
>index 9509d05dd8e..53190287d8f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css
>@@ -48,7 +48,7 @@
>     vertical-align: -1px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .sidebar > .panel.details.recording-state > .content .data-grid tr.modified {
>         color: var(--green-highlight-text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css b/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css
>index d1597672a78..9a661e98bf9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceSecurityContentView.css
>@@ -53,7 +53,7 @@ body[dir] .resource-security > section:matches(.connection, .certificate) > .det
>     color: var(--text-color);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     body[dir] .resource-security > section:matches(.connection, .certificate) > .details {
>         border-color: var(--network-pseudo-header-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css b/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css
>index 8026d148036..d7d3a40fc04 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css
>@@ -117,7 +117,7 @@
>     -webkit-margin-start: 3px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .resource-sizes > .content .label {
>         color: var(--text-color-secondary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css b/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css
>index 7ffd41f8c9c..b7f6b514ecc 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css
>@@ -68,7 +68,7 @@
>     height: 14px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .resource-timing-breakdown > table > tr.header:not(.total-row) > td {
>         color: var(--text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>index ce80c0cccc4..3050842ddcd 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>@@ -116,7 +116,7 @@ body[dir=rtl] .scope-bar > li.multiple > .arrows {
>     background-color: var(--selected-background-color-active);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .scope-bar > li {
>         color: var(--text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css
>index 92d81b49493..46835289886 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css
>@@ -64,7 +64,7 @@
>     top: 1px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .watch-expression-editor {
>         background-color: var(--background-color-code);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchBar.css b/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
>index 1969ea354b0..d923aa109db 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
>@@ -53,7 +53,7 @@
>     background-color: white;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     :matches(.search-bar, .filter-bar) > input[type="search"],
>     .search-bar > input[type="search"]:not(:placeholder-shown) {
>         border-color: var(--background-color-selected);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
>index 717a2bb48fb..7bfe2d02ab8 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
>@@ -79,7 +79,7 @@ body[dir=rtl] .sidebar > .panel.navigation.search .item.source-code-match {
>     top: calc(var(--navigation-bar-height) + 40px - 1px);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .sidebar > .panel.navigation.search.changed > .banner {
>         background-color: var(--yellow-highlight-background-color);
>         color: var(--yellow-highlight-text-color);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
>index e6621ddb78d..458a116978c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
>@@ -127,7 +127,7 @@ body[dir=rtl] .content-view.settings > .settings-view > .container > .editor-gro
>     margin-right: var(--settings-input-number-margin-start);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.settings .navigation-bar {
>         background-color: var(--background-color-content);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css
>index a010a3a01e7..81fcfb6cf22 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css
>@@ -61,7 +61,7 @@ body[dir=rtl] .content-view.shader-program > .text-editor.shader + .text-editor.
>     top: 18px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .content-view.shader-program > .text-editor.shader {
>         --border-start-style: 1px solid var(--text-color-quaternary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css
>index 3bba44bdc43..ce4aed33e56 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css
>@@ -41,7 +41,7 @@
>     opacity: 0.5;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .item.shader-program .status > img {
>         filter: invert();
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>index af1c2e08bb1..19aab50b13f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>@@ -183,7 +183,7 @@
>     }
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .source-code.text-editor > .CodeMirror .issue-widget {
>         color: hsl(0, 0%, var(--foreground-lightness));
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>index 481253c6a04..17f508ad42d 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>@@ -179,7 +179,7 @@ body:matches(.window-docked-inactive, .window-inactive) .spreadsheet-style-decla
>     pointer-events: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .spreadsheet-style-declaration-editor {
>         --background-color-selected: hsl(230, 51%, 36%);
>         --border-color-selected: hsl(216, 98%, 67%);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>index 75238bda3dc..620f6274383 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>@@ -133,7 +133,7 @@
>     padding-left: var(--css-declaration-horizontal-padding);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .spreadsheet-css-declaration {
>         background: var(--background-color-code);
>         color: var(--text-color-tertiary);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>index 70c472f4ca9..666ab66a514 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>@@ -52,7 +52,7 @@
>     display: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .sidebar > .panel.details.css-style > .content > .rules .section-header {
>         color: var(--text-color-secondary);
>         border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
>index aea2d7c4606..3bb4432fa4a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
>@@ -125,7 +125,7 @@
>     color: rgb(201, 192, 166);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .CodeMirror {
>         color: var(--text-color);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBar.css b/Source/WebInspectorUI/UserInterface/Views/TabBar.css
>index f694ae6f6c4..473fdef850b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TabBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TabBar.css
>@@ -358,7 +358,7 @@ body.window-inactive .tab-bar.animating.closing-tab > .item.selected {
>     pointer-events: none;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .tab-bar {
>         background-image: none;
>         background-color: hsl(0, 0%, 23%);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Table.css b/Source/WebInspectorUI/UserInterface/Views/Table.css
>index 4741c9d8fa5..8a9d0c53608 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Table.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Table.css
>@@ -177,7 +177,7 @@ body[dir=rtl] .table .cell:first-child {
>     text-align: center;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .table > .header > .sortable:active {
>         background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>index 8e4a13c3ed7..54219be3aa4 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>@@ -130,7 +130,7 @@
>     to { background-color: hsla(0, 0%, 0%, 0.1); }
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .text-editor > .CodeMirror .execution-line {
>         background-color: hsla(89, 100%, 51%, 0.25) !important;
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>index 8a70eace9ae..32730b7cde6 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>@@ -55,7 +55,7 @@
>     top: 2px;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .data-grid th:matches(.sort-ascending, .sort-descending) {
>         background: var(--background-color-selected);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css b/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
>index 8d6b2dc8341..9ef65e0a7b3 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
>@@ -133,7 +133,7 @@
>     content: url(../Images/LowPower.svg);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .time-icon .icon {
>         filter: invert();
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>index de4b6d19951..d57439da081 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>@@ -234,7 +234,7 @@ body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer {
>     right: 0;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
>         background: var(--background-color-alternate);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Toolbar.css b/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
>index 79bd3862a20..1f7014b3162 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
>@@ -223,7 +223,7 @@ body.latest-mac.window-inactive .toolbar .dashboard-container {
>     }
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     body .toolbar {
>         background-image: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 22%));
>         box-shadow: none;
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
>index d7c75b2998a..98925cac907 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
>@@ -255,7 +255,7 @@ body[dir=rtl] .tree-outline .item .status {
>     content: "\00A0\2014\00A0"; /* &nbsp;&mdash;&nbsp; */;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .tree-outline .item .subtitle {
>         color: var(--text-color-secondary);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css b/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css
>index 44e9f275865..2519f11a28d 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/URLBreakpointPopover.css
>@@ -62,7 +62,7 @@ body[dir=rtl] .popover .url-breakpoint-content > .editor-wrapper > .editor {
>     overflow: hidden;
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .popover .url-breakpoint-content > .editor-wrapper > .editor {
>         -webkit-appearance: unset;
>         border-color: var(--text-color-quaternary);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index d2b4f4b474a..ea103b6b292 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -157,7 +157,7 @@ body.window-inactive * {
>     --border-color-dark: hsl(0, 0%, 72%);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
> 
>     :root {
>         color: var(--text-color);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css
>index 3fa13dacd82..f3115d5c913 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css
>@@ -80,7 +80,7 @@ body[dir=rtl] .web-socket.content-view .icon {
>     color: hsl(3, 96%, 27%);
> }
> 
>-@media (prefers-dark-interface) {
>+@media (prefers-color-scheme: dark) {
>     .web-socket.content-view .data-grid table.data tr.revealed {
>         border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
>     }

Actions: View | Formatted Diff | Diff

Attachments on bug 193265: 358650