Attachment 350152 Details for Bug 189673 – Patch

[patch] Patch

patch.txt (text/plain), 135.58 KB, created by Nikita Vasilyev on 2018-09-19 15:32:01 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2018-09-19 15:32:01 PDT

Size: 135.58 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 37c3181bd1e..732ea5a8e9b 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,385 @@
>+2018-09-19  Nikita Vasilyev  <nvasilyev@apple.com>
>+
>+        Web Inspector: move DarkMode.css rules into appropriate CSS files
>+        https://bugs.webkit.org/show_bug.cgi?id=189673
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * UserInterface/Main.html:
>+        * UserInterface/Views/BezierEditor.css:
>+        (@media (prefers-dark-interface)):
>+        (.bezier-editor > .bezier-preview-timing):
>+        (.bezier-editor > .bezier-container .bezier-curve):
>+        (.bezier-editor > .bezier-container .linear-curve):
>+        (.bezier-editor > .bezier-preview):
>+        (.bezier-editor > .bezier-preview > div):
>+        (.bezier-editor > .bezier-container .control-handle):
>+        (.bezier-editor > .bezier-container .control-line):
>+        * UserInterface/Views/BreakpointActionView.css:
>+        (@media (prefers-dark-interface)):
>+        (.breakpoint-action-block-body):
>+        (.breakpoint-action-block-body > .description):
>+        (.breakpoint-action-append-button,):
>+        (.breakpoint-action-eval-editor):
>+        * UserInterface/Views/BreakpointPopoverController.css:
>+        (@media (prefers-dark-interface)):
>+        (.popover .edit-breakpoint-popover-content > label.toggle):
>+        (.popover .edit-breakpoint-popover-content > table > tr > th):
>+        (.edit-breakpoint-popover-condition):
>+        * UserInterface/Views/ButtonNavigationItem.css:
>+        (@media (prefers-dark-interface)):
>+        (.navigation-bar .item.button):
>+        * UserInterface/Views/ButtonToolbarItem.css:
>+        (@media (prefers-dark-interface)):
>+        (.toolbar .item.button):
>+        (.toolbar .item.button:not(.disabled):active):
>+        (.toolbar .item.button:not(.disabled):matches(:focus, .activate.activated)):
>+        (.toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated)):
>+        * UserInterface/Views/CallFrameView.css:
>+        (@media (prefers-dark-interface)):
>+        (.call-frame .subtitle,):
>+        (.call-frame:hover .subtitle .source-link,):
>+        (.call-frame .separator):
>+        * UserInterface/Views/CanvasContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view.canvas:not(.tab)):
>+        * UserInterface/Views/CanvasOverviewContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view.canvas-overview):
>+        (.content-view.canvas-overview .content-view.canvas):
>+        (.content-view.canvas-overview .content-view.canvas.is-recording):
>+        (.content-view.canvas-overview .content-view.canvas.is-recording > header):
>+        (.content-view.canvas-overview .content-view.canvas > header > .titles > .title):
>+        (.content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,):
>+        (.content-view.canvas-overview .content-view.canvas > footer > .recordings::before):
>+        (.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle):
>+        * UserInterface/Views/CanvasTabContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon):
>+        (.content-view.tab.canvas .navigation-bar > .item .canvas.canvas-2d .icon,):
>+        (.content-view.canvas > .preview > img,):
>+        * UserInterface/Views/CodeMirrorOverrides.css:
>+        (@media (prefers-dark-interface)):
>+        (.CodeMirror-cursor):
>+        (.CodeMirror .CodeMirror-gutters):
>+        (.cm-s-default .cm-link):
>+        (.CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket):
>+        * UserInterface/Views/CompletionSuggestionsView.css:
>+        (@media (prefers-dark-interface)):
>+        (.completion-suggestions):
>+        (.completion-suggestions-container > .item):
>+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
>+        (@media (prefers-dark-interface)):
>+        (.computed-style-properties.details-section):
>+        (.details-section.style-box-model:not(.collapsed) > :matches(.header, .content)):
>+        * UserInterface/Views/ConsoleMessageView.css:
>+        (@media (prefers-dark-interface)):
>+        (.console-message .syntax-highlighted):
>+        (.console-warning-level .console-message-text):
>+        (.console-error-level .console-message-text):
>+        (.console-user-command > .console-message-text):
>+        (.console-message .repeat-count):
>+        * UserInterface/Views/ConsolePrompt.css:
>+        (@media (prefers-dark-interface)):
>+        (.console-prompt):
>+        * UserInterface/Views/DOMNodeDetailsSidebarPanel.css:
>+        (@media (prefers-dark-interface)):
>+        (.sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover):
>+        * UserInterface/Views/DOMTreeOutline.css:
>+        (@media (prefers-dark-interface)):
>+        (.tree-outline.dom):
>+        (.tree-outline.dom li.elements-drag-over .selection-area):
>+        (.tree-outline.dom li.selected .selection-area):
>+        (.tree-outline.dom:focus li.selected .selection-area):
>+        (.tree-outline.dom li.selected + ol.children.expanded):
>+        (.tree-outline.dom .shadow):
>+        (.tree-outline.dom li.parent.shadow + ol.children.expanded,):
>+        (.showing-find-banner .tree-outline.dom .search-highlight):
>+        * UserInterface/Views/DarkMode.css: Removed.
>+        * UserInterface/Views/DataGrid.css:
>+        (@media (prefers-dark-interface)):
>+        (.data-grid th):
>+        (.data-grid td .subtitle):
>+        (.data-grid:matches(:focus, .force-focus) tr.selected td .subtitle):
>+        (body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input):
>+        (.data-grid tr.editable .cell-content > input):
>+        (.data-grid td.spanning):
>+        * UserInterface/Views/DebuggerDashboardView.css:
>+        (@media (prefers-dark-interface)):
>+        (.toolbar .dashboard.debugger):
>+        (.dashboard.debugger .navigation-bar .item.button > .glyph):
>+        (.dashboard.debugger > .location .function-name):
>+        (.dashboard.debugger > .location .go-to-link):
>+        (.dashboard.debugger > .divider):
>+        * UserInterface/Views/DefaultDashboardView.css:
>+        (@media (prefers-dark-interface)):
>+        (.toolbar .dashboard.default > .item > div):
>+        (.toolbar .dashboard.default > .item.enabled > div):
>+        (.toolbar .dashboard.default > .item.enabled:hover):
>+        (.toolbar .dashboard.default > .item.enabled:hover > div):
>+        (.toolbar .dashboard.default > .resourcesCount > img,):
>+        (body.latest-mac .toolbar .dashboard .item.button):
>+        (.dashboard-container .advance-arrow):
>+        * UserInterface/Views/DetailsSection.css:
>+        (@media (prefers-dark-interface)):
>+        (.details-section > .header):
>+        (.details-section > .header > label):
>+        (.details-section .details-section,):
>+        (.details-section .details-section:not(.collapsed) > .header):
>+        (.details-section > .content > .group > .row.simple > .label):
>+        (.details-section > .content > .group:nth-child(even)):
>+        (.details-section > .content > .group > .row:matches(.empty, .text)):
>+        * UserInterface/Views/DividerNavigationItem.css:
>+        (@media (prefers-dark-interface)):
>+        (.navigation-bar .item.divider):
>+        * UserInterface/Views/Editing.css:
>+        (@media (prefers-dark-interface)):
>+        (.editing):
>+        (.editing, .editing *):
>+        * UserInterface/Views/FindBanner.css:
>+        (@media (prefers-dark-interface)):
>+        (.find-banner > input[type="search"]):
>+        (.find-banner.console-find-banner > input[type=search]:not(:placeholder-shown)):
>+        * UserInterface/Views/FontResourceContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view.resource.font .preview > .line):
>+        (.content-view.resource.font .metric.top):
>+        (.content-view.resource.font .metric.baseline):
>+        (.content-view.resource.font .metric.middle):
>+        (.content-view.resource.font .metric.xheight):
>+        (.content-view.resource.font .metric.bottom):
>+        * UserInterface/Views/FormattedValue.css:
>+        (@media (prefers-dark-interface)):
>+        (.formatted-object,):
>+        (.formatted-null,):
>+        * UserInterface/Views/GeneralStyleDetailsSidebarPanel.css:
>+        (@media (prefers-dark-interface)):
>+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label):
>+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule):
>+        (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
>+        * UserInterface/Views/HoverMenu.css:
>+        (@media (prefers-dark-interface)):
>+        (.hover-menu > svg > :matches(path, rect)):
>+        * UserInterface/Views/ImageResourceContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view.resource.image):
>+        * UserInterface/Views/InlineSwatch.css:
>+        (@media (prefers-dark-interface)):
>+        (.inline-swatch):
>+        * UserInterface/Views/LogContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.console-messages):
>+        (.console-item):
>+        (.console-messages:focus .console-item.selected):
>+        (.console-messages:focus .console-item.selected + .console-item):
>+        (.console-session:first-of-type .console-session-header):
>+        (.console-session:not(:first-of-type) .console-session-header):
>+        (.console-messages a):
>+        (.console-messages a:hover):
>+        (.console-messages:focus .console-item.selected::after):
>+        (.console-error-level):
>+        (.console-error-level:not(.filtered-out, .filtered-out-by-search), .console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item):
>+        (.console-warning-level):
>+        (.console-warning-level:not(.filtered-out, .filtered-out-by-search), .console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item):
>+        (.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted):
>+        (.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected):
>+        * UserInterface/Views/Main.css:
>+        (#main):
>+        (@media (prefers-dark-interface)):
>+        (.go-to-arrow):
>+        (.resource-link,):
>+        (.expand-list-button):
>+        (:matches(img, canvas).show-grid):
>+        * UserInterface/Views/NetworkResourceDetailView.css:
>+        (@media (prefers-dark-interface)):
>+        (.network-resource-detail):
>+        (.network-resource-detail .item.close > .glyph):
>+        (.network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected):
>+        (.resource-headers .value):
>+        * UserInterface/Views/NetworkTableContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.network-table .cell.domain > .lock):
>+        * UserInterface/Views/NewTabContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.new-tab.tab.content-view):
>+        * UserInterface/Views/ObjectTreePropertyTreeElement.css:
>+        (@media (prefers-dark-interface)):
>+        (.object-tree-property .getter,):
>+        (.item.object-tree-property.prototype-property):
>+        (.object-tree-property.prototype-property:hover,):
>+        (.object-tree-property .value.error):
>+        * UserInterface/Views/ObjectTreeView.css:
>+        (@media (prefers-dark-interface)):
>+        (.object-tree,):
>+        (.object-preview .name):
>+        (.object-preview > .size):
>+        * UserInterface/Views/OpenResourceDialog.css:
>+        (@media (prefers-dark-interface)):
>+        (.open-resource-dialog):
>+        (.open-resource-dialog > .field > input):
>+        (.open-resource-dialog > .field > input::placeholder):
>+        (.open-resource-dialog > .tree-outline .item.selected):
>+        (.open-resource-dialog > .field::before):
>+        * UserInterface/Views/ProgressView.css:
>+        (@media (prefers-dark-interface)):
>+        (.progress-view > .titles > .title):
>+        (.progress-view > .titles > .subtitle):
>+        (.indeterminate-progress-spinner):
>+        * UserInterface/Views/QuickConsole.css:
>+        (@media (prefers-dark-interface)):
>+        (.quick-console):
>+        (.CodeMirror .jump-to-symbol-highlight,):
>+        (.quick-console.showing-log):
>+        * UserInterface/Views/RecordingActionTreeElement.css:
>+        (@media (prefers-dark-interface)):
>+        (.item.action:not(.initial-state)::before):
>+        (.tree-outline .item.action.visual:not(.selected, .invalid)):
>+        (.item.action:not(.initial-state) > .icon):
>+        (.tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon):
>+        * UserInterface/Views/RecordingContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view:not(.tab).recording):
>+        (.content-view:not(.tab).recording > header > .slider-container):
>+        (.content-view:not(.tab).recording > header > .slider-container > input[type=range]):
>+        * UserInterface/Views/RecordingStateDetailsSidebarPanel.css:
>+        (@media (prefers-dark-interface)):
>+        (.sidebar > .panel.details.recording-state > .content > .data-grid tr.modified):
>+        * UserInterface/Views/ResourceHeadersContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.resource-headers .value):
>+        * UserInterface/Views/ResourceSizesContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.resource-sizes > .content .label):
>+        * UserInterface/Views/ResourceTimingBreakdownView.css:
>+        (@media (prefers-dark-interface)):
>+        (.popover.waterfall-popover):
>+        (.resource-timing-breakdown > table > tr.header:not(.total-row) > td):
>+        (.resource-timing-breakdown > table > tr > td.label,):
>+        (.resource-timing-breakdown > table hr):
>+        * UserInterface/Views/ScopeBar.css:
>+        (@media (prefers-dark-interface)):
>+        (.scope-bar > li):
>+        * UserInterface/Views/SearchBar.css:
>+        (@media (prefers-dark-interface)):
>+        (:matches(.search-bar, .filter-bar) > input[type="search"],):
>+        (:matches(.search-bar, .filter-bar) > input[type="search"]::placeholder):
>+        (:matches(.search-bar, .filter-bar) > input[type="search"]:focus):
>+        * UserInterface/Views/SearchSidebarPanel.css:
>+        (@media all):
>+        * UserInterface/Views/SettingsTabContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view.settings .navigation-bar):
>+        (.content-view.settings .navigation-bar .item.radio.button.text-only.selected):
>+        * UserInterface/Views/ShaderProgramContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.content-view.shader-program > .text-editor.shader):
>+        (.content-view.shader-program > .text-editor.shader > .type-title):
>+        * UserInterface/Views/ShaderProgramTreeElement.css:
>+        (@media (prefers-dark-interface)):
>+        (.item.shader-program .status > img):
>+        * UserInterface/Views/SourceCodeTextEditor.css:
>+        (@media (prefers-dark-interface)):
>+        (.source-code.text-editor > .CodeMirror .error):
>+        (.source-code.text-editor > .CodeMirror .warning):
>+        (.source-code.text-editor > .CodeMirror .issue-widget):
>+        (.source-code.text-editor > .CodeMirror .issue-widget.warning,):
>+        (.source-code.text-editor > .CodeMirror .issue-widget.error,):
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
>+        (@media (prefers-dark-interface)):
>+        (.spreadsheet-style-declaration-editor .property:not(.disabled) .value):
>+        (.spreadsheet-style-declaration-editor :matches(.name, .value).editing):
>+        (.spreadsheet-style-declaration-editor .property.has-warning):
>+        (.spreadsheet-style-declaration-editor .property.has-warning .warning):
>+        (.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) .content > *):
>+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
>+        (@media (prefers-dark-interface)):
>+        (.spreadsheet-css-declaration):
>+        (.spreadsheet-css-declaration.locked):
>+        (.spreadsheet-css-declaration .selector.style-attribute):
>+        (.spreadsheet-css-declaration .selector:focus,):
>+        (.spreadsheet-css-declaration.locked .origin::after):
>+        (.spreadsheet-css-declaration .origin .go-to-link,):
>+        (.spreadsheet-css-declaration .media-label):
>+        * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
>+        (@media (prefers-dark-interface)):
>+        (.spreadsheet-style-panel .section-header):
>+        (.spreadsheet-style-panel .section-header .node-link:hover):
>+        * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
>+        (@media (prefers-dark-interface)):
>+        (.syntax-highlighted,):
>+        (.cm-s-default,):
>+        (.cm-s-default .cm-attribute):
>+        (.cm-s-default .cm-m-xml.cm-attribute,):
>+        (.cm-s-default .cm-meta):
>+        (.cm-s-default .cm-variable-3):
>+        (.cm-s-default .cm-builtin):
>+        * UserInterface/Views/TabBar.css:
>+        (@media (prefers-dark-interface)):
>+        (.tab-bar):
>+        (.tab-bar > .item):
>+        (.tab-bar > .item > .title):
>+        (.tab-bar > .item:not(.disabled).selected):
>+        (.tab-bar:not(.animating) > .item:not(.selected):hover):
>+        (.tab-bar > .item > .close,):
>+        (body.window-inactive .tab-bar):
>+        (body.window-inactive .tab-bar > .item):
>+        (body.window-inactive .tab-bar > .item.selected):
>+        (body.window-inactive .tab-bar > .item > .title):
>+        * UserInterface/Views/Table.css:
>+        (@media (prefers-dark-interface)):
>+        (.table,):
>+        (.table > .header > .sortable:active):
>+        (.table > .header > :matches(.sort-ascending, .sort-descending)):
>+        (.table > .header > :matches(.sort-ascending, .sort-descending)::after):
>+        * UserInterface/Views/TextEditor.css:
>+        (@media (prefers-dark-interface)):
>+        (.text-editor > .CodeMirror .execution-line):
>+        (.text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),):
>+        * UserInterface/Views/TimelineDataGrid.css:
>+        (@media (prefers-dark-interface)):
>+        (.data-grid th:matches(.sort-ascending, .sort-descending)):
>+        * UserInterface/Views/TimelineIcons.css:
>+        (@media (prefers-dark-interface)):
>+        (.time-icon .icon):
>+        * UserInterface/Views/TimelineOverview.css:
>+        (@media (prefers-dark-interface)):
>+        (.timeline-overview > .navigation-bar.timelines):
>+        (.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even)):
>+        (.timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),):
>+        * UserInterface/Views/TimelineRecordingContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.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):
>+        * UserInterface/Views/Toolbar.css:
>+        (@media (prefers-dark-interface)):
>+        (body .toolbar):
>+        (body.window-inactive .toolbar):
>+        (body.latest-mac .toolbar .item.button,):
>+        (body.latest-mac .toolbar .search-bar > input[type="search"]):
>+        (body.latest-mac .toolbar .search-bar > input[type="search"]:focus):
>+        (body.latest-mac .toolbar .search-bar > input[type="search"]::placeholder):
>+        (body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::placeholder):
>+        (body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::-webkit-search-results-button):
>+        (body.latest-mac .toolbar .dashboard-container):
>+        (body.latest-mac .toolbar .item.button:active):
>+        (body.latest-mac.window-inactive .toolbar .item.button,):
>+        * UserInterface/Views/TreeOutline.css:
>+        (@media (prefers-dark-interface)):
>+        (.tree-outline .item .subtitle):
>+        * UserInterface/Views/Variables.css:
>+        (@media (prefers-dark-interface)):
>+        (:root):
>+        (body.window-inactive):
>+        (body.window-inactive *):
>+        * UserInterface/Views/WebSocketContentView.css:
>+        (@media (prefers-dark-interface)):
>+        (.web-socket.content-view .data-grid table.data tr.revealed):
>+        (.web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing):
>+        (.web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame):
>+        * UserInterface/Views/XHRBreakpointPopover.css:
>+        (@media (prefers-dark-interface)):
>+        (.popover .xhr-breakpoint-content > .editor-wrapper > .editor):
>+
> 2018-09-15  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: REGRESSION: breakpoint context menu appears twice in DOM tree
>diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
>index e56ce4a050b..66b76b0f175 100644
>--- a/Source/WebInspectorUI/UserInterface/Main.html
>+++ b/Source/WebInspectorUI/UserInterface/Main.html
>@@ -239,8 +239,6 @@
>     <link rel="stylesheet" href="Controllers/CodeMirrorDragToAdjustNumberController.css">
>     <link rel="stylesheet" href="Controllers/CodeMirrorTokenTrackingController.css">
> 
>-    <link rel="stylesheet" href="Views/DarkMode.css">
>-
>     <link rel="stylesheet" href="Debug/UncaughtExceptionReporter.css">
>     <link rel="stylesheet" href="Debug/DebugContentView.css">
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
>index da93bd60ecd..607e7447b5b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
>@@ -149,3 +149,33 @@ body[dir=ltr] .bezier-editor > .number-input-container > input {
> body[dir=rtl] .bezier-editor > .number-input-container > input {
>     padding-right: var(--bezier-editor-number-input-padding-start);
> }
>+
>+@media (prefers-dark-interface) {
>+    .bezier-editor > .bezier-preview-timing {
>+        border-top-color: var(--text-color-tertiary);
>+    }
>+
>+    .bezier-editor > .bezier-container .bezier-curve {
>+        stroke: white;
>+    }
>+
>+    .bezier-editor > .bezier-container .linear-curve {
>+        stroke: var(--text-color-tertiary);
>+    }
>+
>+    .bezier-editor > .bezier-preview {
>+        border-bottom-color: var(--text-color-tertiary);
>+    }
>+
>+    .bezier-editor > .bezier-preview > div {
>+        background-color: var(--selected-background-color-active);
>+    }
>+
>+    .bezier-editor > .bezier-container .control-handle {
>+        fill: var(--selected-background-color-active);
>+    }
>+
>+    .bezier-editor > .bezier-container .control-line {
>+        stroke: var(--selected-background-color-active);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
>index 9946489be72..451a324b754 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
>@@ -111,3 +111,24 @@ body[dir=rtl] .breakpoint-action-block-body > .description {
>     width: 336px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content.wide width */
>     overflow: hidden;
> }
>+
>+@media (prefers-dark-interface) {
>+    .breakpoint-action-block-body {
>+        border-color: var(--text-color-quaternary);
>+        background-color: unset;
>+        box-shadow: unset;
>+    }
>+
>+    .breakpoint-action-block-body > .description {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .breakpoint-action-append-button,
>+    .breakpoint-action-remove-button {
>+        filter: invert();
>+    }
>+
>+    .breakpoint-action-eval-editor {
>+        background: var(--background-color-code);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
>index 787836393c4..4adb88c55d4 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
>@@ -89,3 +89,17 @@ body[dir=rtl] :matches(#edit-breakpoint-popover-ignore, #edit-breakpoint-popover
>     margin-right: 0;
>     margin-left: var(--edit-breakpoint-popover-option-margin-end);
> }
>+
>+@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);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
>index bf418ee6d51..3a90327c36f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
>@@ -72,3 +72,9 @@
> .navigation-bar .item.button.disabled > .glyph {
>     color: var(--glyph-color-disabled);
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 a69927c66b6..5e77654402f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
>@@ -61,3 +61,23 @@ body.window-inactive .toolbar .item.button {
> body.window-inactive .toolbar .item.button.disabled {
>     opacity: 0.35 !important;
> }
>+
>+@media (prefers-dark-interface) {
>+    .toolbar .item.button {
>+        color: var(--color-button);
>+    }
>+
>+    .toolbar .item.button:not(.disabled):active {
>+        color: var(--color-button-active);
>+        background-image: none;
>+        background: var(--button-background-color-pressed);
>+    }
>+
>+    .toolbar .item.button:not(.disabled):matches(:focus, .activate.activated) {
>+        color: var(--glyph-color-active);
>+    }
>+
>+    .toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) {
>+        color: var(--glyph-color-active-pressed);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
>index ed5b811f645..d7a2a44812f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
>@@ -78,3 +78,19 @@ body[dir=rtl] .call-frame .icon {
>     white-space: nowrap;
>     color: hsla(0, 0%, 0%, 0.2);
> }
>+
>+@media (prefers-dark-interface) {
>+    .call-frame .subtitle,
>+    .call-frame .subtitle .source-link {
>+        color: hsla(0, 0%, var(--foreground-lightness), 0.6);
>+    }
>+
>+    .call-frame:hover .subtitle .source-link,
>+    .call-frame:focus .subtitle .source-link {
>+        color: hsl(0, 0%, var(--foreground-lightness));
>+    }
>+
>+    .call-frame .separator {
>+        color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css b/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css
>index 4eecb69216a..a0c85867712 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css
>@@ -54,3 +54,9 @@
>     filter: grayscale();
>     opacity: 0.5;
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 cd5c41ef682..5f5463a09dd 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css
>@@ -186,3 +186,40 @@
> .popover-content > .tree-outline .item.recording:hover > .icon {
>     filter: invert();
> }
>+
>+@media (prefers-dark-interface) {
>+    .content-view.canvas-overview {
>+        background-color: unset;
>+    }
>+
>+    .content-view.canvas-overview .content-view.canvas {
>+        background-color: var(--background-color-secondary);
>+    }
>+
>+    .content-view.canvas-overview .content-view.canvas.is-recording {
>+        --recording-color: hsl(0, 100%, 39%);
>+        border-color: var(--recording-color);
>+    }
>+
>+    .content-view.canvas-overview .content-view.canvas.is-recording > header {
>+        background-color: var(--recording-color);
>+    }
>+
>+    .content-view.canvas-overview .content-view.canvas > header > .titles > .title {
>+        color: var(--text-color);
>+    }
>+
>+    .content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,
>+    .content-view.canvas-overview .content-view.canvas > footer .memory-cost {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .content-view.canvas-overview .content-view.canvas > footer > .recordings::before {
>+        filter: invert();
>+    }
>+
>+    .content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle {
>+        color: unset;
>+        opacity: 0.5
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css
>index 27cb20497dd..c309ade9059 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css
>@@ -42,3 +42,20 @@
> .content-view.tab.canvas .navigation-bar > .item .shader-program > .icon {
>     content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);
> }
>+
>+@media (prefers-dark-interface) {
>+    .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon {
>+        filter: invert(88%);
>+    }
>+
>+    .content-view.tab.canvas .navigation-bar > .item .canvas.canvas-2d .icon,
>+    .content-view.tab.canvas .navigation-bar > .item .canvas.webgl .icon,
>+    .content-view.tab.canvas .navigation-bar > .item .recording > .icon {
>+        filter: invert();
>+    }
>+
>+    .content-view.canvas > .preview > img,
>+    .content-view.canvas .preview-container > canvas {
>+        background-color: white;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
>index e3dc59b533c..cfd757c9b3a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
>@@ -181,3 +181,23 @@
> .show-invalid-characters .CodeMirror .cm-invalidchar {
>     display: initial;
> }
>+
>+@media (prefers-dark-interface) {
>+    .CodeMirror-cursor {
>+        border-left-color: hsl(0, 0%, var(--foreground-lightness));
>+    }
>+
>+    .CodeMirror .CodeMirror-gutters {
>+        background-color: var(--background-color);
>+        border-right-color: var(--text-color-quaternary);
>+    }
>+
>+    .cm-s-default .cm-link {
>+        color: var(--syntax-highlight-link-color);
>+    }
>+
>+    .CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket {
>+        background-color: hsla(232, 100%, 72%, 0.4);
>+        border-bottom-color: hsl(206, 100%, 65%);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
>index 1b0fe6bd8d0..747090347f8 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
>@@ -75,3 +75,13 @@
>     background-color: var(--selected-background-color);
>     color: white;
> }
>+
>+@media (prefers-dark-interface) {
>+    .completion-suggestions {
>+        background-color: var(--overlay-background);
>+    }
>+
>+    .completion-suggestions-container > .item {
>+        color: var(--text-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>index f7aec09d565..50edf060f13 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
>@@ -42,3 +42,13 @@
> .details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
>     background-color: white;
> }
>+
>+@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);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
>index 791c1ebb039..62eade6ffc5 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
>@@ -280,3 +280,25 @@
> .console-top-level-message .object-tree .object-tree {
>     display: inline-block;
> }
>+
>+@media (prefers-dark-interface) {
>+    .console-message .syntax-highlighted {
>+        background-color: unset;
>+    }
>+
>+    .console-warning-level .console-message-text {
>+        color: hsl(53, 80%, 55%);
>+    }
>+
>+    .console-error-level .console-message-text {
>+        color: hsl(10, 100%, 70%);
>+    }
>+
>+    .console-user-command > .console-message-text {
>+        color: hsl(209, 100%, 70%);
>+    }
>+
>+    .console-message .repeat-count {
>+        background-color: hsl(218, 70%, 48%);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
>index 7466d0a340d..abd2be58e66 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
>@@ -35,3 +35,9 @@
> .console-prompt > .CodeMirror-scroll {
>     overflow: hidden;
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 ba5b4225ccd..76242ad8f27 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css
>@@ -60,3 +60,9 @@ body[dir=rtl] .sidebar > .panel.dom-node-details .details-section.dom-node-event
>     opacity: 0;
>     -webkit-appearance: none;
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 f1ed1801805..6bd49e96378 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
>@@ -306,3 +306,41 @@ body[dir=rtl] .tree-outline.dom li.parent.shadow::after {
> .highlight .selection-area {
>     animation: "dom-tree-outline-highlight-fadeout" 2s;
> }
>+
>+@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);
>+    }
>+
>+    .tree-outline.dom li.selected .selection-area {
>+        background-color: var(--background-color-selected);
>+    }
>+
>+    .tree-outline.dom:focus li.selected .selection-area {
>+        background-color: var(--selected-background-color);
>+    }
>+
>+    .tree-outline.dom li.selected + ol.children.expanded {
>+        border-color: hsl(0, 0%, 27%);
>+    }
>+
>+    .tree-outline.dom .shadow {
>+        color: var(--text-color);
>+    }
>+
>+    /* FIXME: extract this as a variable. It's slightly different from var(background-color-secondary),
>+    but close enough for now. It needs to use partial translucency so that the selection area shines through. */
>+    .tree-outline.dom li.parent.shadow + ol.children.expanded,
>+    .tree-outline.dom li.parent.shadow::after {
>+        background-color: hsla(0, 0%, 90%, 0.1);
>+    }
>+
>+    .showing-find-banner .tree-outline.dom .search-highlight {
>+        /* FIXME: This should use a variable. */
>+        background-color: hsla(53, 83%, 53%, 0.8);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DarkMode.css b/Source/WebInspectorUI/UserInterface/Views/DarkMode.css
>deleted file mode 100644
>index daabf7f1729..00000000000
>--- a/Source/WebInspectorUI/UserInterface/Views/DarkMode.css
>+++ /dev/null
>@@ -1,1379 +0,0 @@
>-/*
>- * Copyright (C) 2018 Apple Inc. All rights reserved.
>- *
>- * Redistribution and use in source and binary forms, with or without
>- * modification, are permitted provided that the following conditions
>- * are met:
>- * 1. Redistributions of source code must retain the above copyright
>- *    notice, this list of conditions and the following disclaimer.
>- * 2. Redistributions in binary form must reproduce the above copyright
>- *    notice, this list of conditions and the following disclaimer in the
>- *    documentation and/or other materials provided with the distribution.
>- *
>- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
>- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
>- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
>- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
>- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
>- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
>- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
>- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
>- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
>- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
>- * THE POSSIBILITY OF SUCH DAMAGE.
>- */
>-
>-@media (prefers-dark-interface) {
>-
>-    /* FIXME: Use CSS4 color functions once they're available. */
>-
>-    :root {
>-        color: var(--text-color);
>-
>-        --text-color: hsl(0, 0%, 88%);
>-        --text-color-active: white;
>-        --text-color-secondary: hsl(0, 0%, 65%);
>-
>-        /* Disabled text/glyphs */
>-        --text-color-tertiary: hsl(0, 0%, 50%);
>-
>-        /* Dividers, separators, background fills */
>-        --text-color-quaternary: hsl(0, 0%, 33%);
>-
>-        /* Deprecated */
>-        --text-color-gray-dark: hsl(0, 0%, 75%);
>-        --text-color-gray-medium: var(--text-color-secondary);
>-
>-        --background-color: hsl(0, 0%, 24%);
>-        --background-color-secondary: hsl(0, 0%, 27%);
>-        --background-color-tertiary: hsl(0, 0%, 31%);
>-
>-        --background-color-content: hsl(0, 0%, 21%);
>-        --background-color-code: hsl(0, 0%, 21%);
>-
>-        --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
>-        --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
>-
>-        --color-button: hsl(0, 0%, 99%);
>-        --color-button-active: var(--text-color-active);
>-
>-        --selected-foreground-color: var(--text-color-active);
>-        --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
>-        --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
>-        --selected-background-color: hsl(219, 80%, 43%);
>-        --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
>-        --selected-background-color-active: hsl(218, 85%, 62%);
>-        --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
>-        --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
>-
>-        --glyph-color: hsl(0, 0%, 80%);
>-        --glyph-color-pressed: hsl(0, 0%, 100%);
>-        --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
>-        --glyph-color-active: hsl(212, 100%, 71%);
>-        --glyph-color-active-pressed: hsl(212, 92%, 74%);
>-        --glyph-color-inactive: hsl(0, 0%, 36%);
>-
>-        --border-color: hsl(0, 0%, 33%);
>-        --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
>-
>-        --border-color-secondary: hsl(0, 0%, 27%);
>-
>-        --button-background-color: hsl(0, 0%, 43%);
>-        --button-background-color-hover: var(--button-background-color);
>-        --button-background-color-pressed: hsl(0, 0%, 55%);
>-        --button-background-color-inactive: hsl(0, 0%, 28%);
>-
>-        --dashboard-background-color: hsl(0, 0%, 36%);
>-
>-        --panel-background-color: hsl(0, 0%, 24%);
>-        --panel-background-color-light: hsl(0, 0%, 29%);
>-
>-        --error-text-color: hsl(0, 86%, 65%);
>-
>-        --green-highlight-background-color: hsl(120, 15%, 28%);
>-        --green-highlight-text-color: hsl(80, 75%, 80%);
>-
>-        --yellow-highlight-background-color: hsl(13, 20%, 26%);
>-        --yellow-highlight-text-color: hsl(50, 96%, 87%);
>-
>-        --value-changed-highlight: var(--green-highlight-background-color);
>-        --value-visual-highlight: var(--yellow-highlight-background-color);
>-
>-        --syntax-highlight-number-color: hsl(276, 100%, 85%);
>-        --syntax-highlight-boolean-color: hsl(299, 71%, 80%);
>-        --syntax-highlight-string-color: hsl(28, 84%, 63%);
>-        --syntax-highlight-link-color: hsl(223, 100%, 77%);
>-        --syntax-highlight-regexp-color: hsl(20, 100%, 64%);
>-        --syntax-highlight-symbol-color: hsl(172, 45%, 65%);
>-        --syntax-highlight-comment-color: hsl(119, 40%, 72%);
>-        --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
>-
>-        --console-secondary-text-color: hsla(0, 0%, 100%, 0.45);
>-
>-        --warning-background-color: hsla(21, 100%, 51%, 0.12);
>-        --error-background-color: hsla(0, 100%, 50%, 0.15);
>-
>-        --network-header-color: hsl(204, 52%, 55%);
>-        --network-system-color: hsl(79, 95%, 50%);
>-        --network-pseudo-header-color: hsl(312, 55%, 61%);
>-        --network-error-color: hsl(0, 54%, 55%);
>-
>-        --even-zebra-stripe-row-background-color: var(--background-color);
>-        --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
>-        --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 100%, 0.03) 50%, hsla(0, 0%, 100%, 0.03)) top left / 100% 40px;
>-
>-        --search-highlight-text-color: hsl(60, 100%, 50%);
>-        --search-highlight-text-color-active: hsl(0, 0%, 0%);
>-        --search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
>-        --search-highlight-background-color-active: hsl(60, 100%, 50%);
>-        --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
>-
>-        /* 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);
>-
>-        --console-message-separator: var(--text-color-quaternary);
>-    }
>-
>-    body.window-inactive {
>-        --selected-background-color: hsla(212, 92%, 64%, 0.5);
>-
>-        --glyph-color-active: var(--selected-background-color);
>-        --glyph-color: hsl(0, 0%, 52%);
>-        --glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
>-    }
>-
>-    body.window-inactive * {
>-        /* FIXME: these properties are duplicated so that they have higher specificity than WebKit's stylesheet.
>-        Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
>-        When merging to open source, we should guard the existing .window-inactive style with 
>-        '@media not (prefers-dark-interface)' to avoid applying the definition too broadly. */
>-        --border-color: hsl(0, 0%, 33%);
>-        --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
>-    }
>-
>-    /*
>-    FIXME: Selectively invert images
>-    Images that should not be inverted:
>-    - User data from websites;
>-    - Most colored icons;
>-
>-    Images that should be inverted:
>-    - Grayscale icons.
>-
>-    img {
>-        filter: var(--filter-invert);
>-    }
>-    */
>-
>-    #main {
>-        background-color: var(--background-color-content);
>-    }
>-
>-    .tree-outline.dom li.selected .selection-area {
>-        background-color: var(--background-color-selected);
>-    }
>-
>-    .tab-bar > .item > .icon {
>-        filter: var(--filter-invert);
>-    }
>-
>-
>-    /* Main.css */
>-    .go-to-arrow {
>-        filter: invert();
>-    }
>-
>-    .resource-link,
>-    .go-to-link {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    .expand-list-button {
>-        color: inherit;
>-    }
>-
>-    :matches(img, canvas).show-grid {
>-        background-color: white;
>-        --checkerboard-dark-square: hsl(0, 0%, 80%);
>-        background-image: linear-gradient(315deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(45deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(315deg, var(--checkerboard-dark-square) 25%, transparent 25%), linear-gradient(45deg, var(--checkerboard-dark-square) 25%, transparent 25%);
>-    }
>-
>-
>-    /* FormattedValue.css */
>-    .formatted-object,
>-    .formatted-node,
>-    .formatted-error,
>-    .formatted-map,
>-    .formatted-set,
>-    .formatted-weakmap,
>-    .formatted-weakset {
>-        color: var(--text-color);
>-    }
>-    .formatted-null,
>-    .formatted-undefined {
>-        color: var(--text-color-secondary);
>-    }
>-
>-
>-    /* Editing.css */
>-    .editing {
>-        background-color: var(--background-color-secondary);
>-        outline-color: var(--text-color-tertiary) !important;
>-    }
>-
>-    .editing, .editing * {
>-        color: var(--text-color-active) !important;
>-    }
>-
>-
>-    /* TextEditor.css */
>-    .text-editor > .CodeMirror .execution-line {
>-        background-color: hsla(89, 100%, 51%, 0.25) !important;
>-    }
>-    .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),
>-    .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext) + .CodeMirror-widget {
>-        background-color: hsl(99, 85%, 30%);
>-    }
>-
>-
>-    /* DetailsSection.css */
>-    .details-section > .header {
>-        color: var(--text-color);
>-    }
>-    .details-section > .header > label {
>-        color: var(--text-color-secondary);
>-    }
>-    .details-section .details-section,
>-    .details-section .details-section > .header,
>-    .details-section.computed-style-properties:not(.collapsed) > .header{
>-        background-color: var(--background-color);
>-    }
>-    .details-section .details-section:not(.collapsed) > .header {
>-        border-bottom-color: var(--border-color-secondary);
>-    }
>-    .details-section > .content > .group > .row.simple > .label {
>-        color: var(--text-color-secondary);
>-    }
>-    .details-section > .content > .group:nth-child(even) {
>-        background-color: unset;
>-    }
>-    .details-section > .content > .group > .row:matches(.empty, .text) {
>-        color: var(--text-color-secondary);
>-    }
>-
>-
>-    /* DataGrid.css */
>-    .data-grid th {
>-        background-color: var(--background-color);
>-    }
>-
>-    .data-grid td .subtitle {
>-        color: var(--selected-secondary-text-color);
>-    }
>-
>-    .data-grid:matches(:focus, .force-focus) tr.selected td .subtitle {
>-        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;
>-    }
>-
>-    .data-grid td.spanning {
>-        color: var(--text-color-secondary);
>-        background-color: unset;
>-    }
>-
>-
>-    /* ObjectTreeView.css */
>-    .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);
>-    }
>-
>-
>-    /* TabBar.css */
>-    .tab-bar {
>-        background-image: none;
>-        background-color: hsl(0, 0%, 23%);
>-
>-        --tab-item-border-color: hsl(0, 0%, 36%);
>-
>-        /* FIXME: Use semantic colors */
>-        --tab-item-dark-border-color: var(--tab-item-border-color);
>-        --tab-item-medium-border-color: var(--tab-item-border-color);
>-        --tab-item-light-border-color: var(--tab-item-border-color);
>-        --tab-item-extra-light-border-color: var(--tab-item-border-color);
>-    }
>-
>-    .tab-bar > .item {
>-        background-image: none;
>-        background-color: hsl(0, 0%, 17%);
>-    }
>-
>-    .tab-bar > .item > .title {
>-        color: white !important;
>-    }
>-
>-    .tab-bar > .item:not(.disabled).selected {
>-        background-image: none;
>-        background-color: hsl(0, 0%, 21%);
>-        border-top-color: hsl(0, 0%, 37%);
>-    }
>-
>-    .tab-bar:not(.animating) > .item:not(.selected):hover {
>-        background-color: hsl(0, 0%, 15%);
>-    }
>-
>-    .tab-bar > .item > .close {
>-        filter: var(--filter-invert);
>-    }
>-
>-    body.window-inactive .tab-bar {
>-        --tab-item-border-color: hsl(0, 0%, 34%);
>-        border-bottom-color: var(--tab-item-border-color);
>-
>-        background-image: none !important;
>-        background-color: hsl(0, 0%, 17%) !important;
>-    }
>-
>-    body.window-inactive .tab-bar > .item {
>-        background-image: none !important;
>-        background-color: hsl(0, 0%, 17%) !important;
>-    }
>-
>-    body.window-inactive .tab-bar > .item.selected {
>-        background-color: var(--background-color) !important;
>-    }
>-
>-    body.window-inactive .tab-bar > .item > .title {
>-        color: hsl(0, 0%, 58%) !important;
>-    }
>-
>-
>-    /* Toolbar.css */
>-    body .toolbar {
>-        background-image: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 22%));
>-        box-shadow: none;
>-    }
>-
>-    body.window-inactive .toolbar {
>-        background-color: var(--background-color);
>-    }
>-
>-    body.latest-mac .toolbar .item.button,
>-    body.latest-mac .toolbar .search-bar > input[type="search"] {
>-        background-image: none;
>-        background-color: var(--button-background-color);
>-        border-color: var(--button-background-color);
>-        border-top-color: hsla(0, 100%, 100%, 0.2);
>-        box-shadow: none;
>-    }
>-
>-    body.latest-mac .toolbar .search-bar > input[type="search"] {
>-        color: var(--text-color);
>-    }
>-
>-    body.latest-mac .toolbar .search-bar > input[type="search"]:focus {
>-        color: var(--text-color-active);
>-
>-        /* FIXME: Use native outline for the default theme as well. */
>-        box-shadow: unset;
>-        transition: unset;
>-        outline: -webkit-focus-ring-color auto 5px;
>-        outline-offset: -3px;
>-    }
>-
>-    body.latest-mac .toolbar .search-bar > input[type="search"]::placeholder {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::placeholder {
>-        color: var(--text-color-tertiary);
>-    }
>-
>-    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::-webkit-search-results-button {
>-        /* Setting `color` has no effect on the magnifying glass icon. */
>-        opacity: 0.5;
>-    }
>-
>-    body.latest-mac .toolbar .dashboard-container {
>-        background-image: none;
>-        background-color: var(--dashboard-background-color);
>-        border-color: var(--dashboard-background-color);
>-        border-top-color: hsla(0, 100%, 100%, 0.1);
>-        box-shadow: none;
>-    }
>-
>-    body.latest-mac .toolbar .item.button:active {
>-        background-image: none;
>-        border-top-color: hsla(0, 100%, 100%, 0.2);
>-        box-shadow: none;
>-    }
>-
>-    body.latest-mac.window-inactive .toolbar .item.button,
>-    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
>-    body.latest-mac.window-inactive .toolbar .dashboard-container {
>-        opacity: 1;
>-        color: var(--glyph-color);
>-        border-color: transparent;
>-        border-top-color: hsla(0, 100%, 100%, 0.1);
>-        background-image: none;
>-        background: var(--button-background-color-inactive);
>-    }
>-
>-
>-    /* DividerNavigationItem.css */
>-    .navigation-bar .item.divider {
>-        --divider-background: hsl(0, 0%, 40%);
>-        background-image: linear-gradient(var(--divider-background), var(--divider-background));
>-    }
>-
>-
>-    /* ButtonToolbarItem.css */
>-    .toolbar .item.button {
>-        color: var(--color-button);
>-    }
>-
>-    .toolbar .item.button:not(.disabled):active {
>-        color: var(--color-button-active);
>-        background-image: none;
>-        background: var(--button-background-color-pressed);
>-    }
>-
>-    .toolbar .item.button:not(.disabled):matches(:focus, .activate.activated) {
>-        color: var(--glyph-color-active);
>-    }
>-
>-    .toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) {
>-        color: var(--glyph-color-active-pressed);
>-    }
>-
>-
>-    /* DefaultDashboardView.css */
>-    .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);
>-    }
>-
>-    .toolbar .dashboard.default > .item.enabled > div {
>-        color: var(--glyph-color);
>-    }
>-
>-    .toolbar .dashboard.default > .item.enabled:hover {
>-        border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
>-    }
>-
>-    .toolbar .dashboard.default > .item.enabled:hover > div {
>-        color: hsla(0, 100%, 100%, 0.85);
>-    }
>-
>-    .toolbar .dashboard.default > .resourcesCount > img,
>-    .toolbar .dashboard.default > .resourcesSize > img,
>-    .toolbar .dashboard.default > .time > img,
>-    .toolbar .dashboard.default > .logs > img,
>-    .toolbar .dashboard.default > .errors:not(.enabled) > img,
>-    .toolbar .dashboard.default > .issues:not(.enabled) > img {
>-        filter: var(--filter-invert);
>-    }
>-
>-    body.latest-mac .toolbar .dashboard .item.button {
>-        background: unset;
>-    }
>-
>-    .dashboard-container .advance-arrow {
>-        filter: var(--filter-invert);
>-    }
>-
>-
>-    /* DebuggerDashboardView.css */
>-    .toolbar .dashboard.debugger {
>-        color: var(--text-color);
>-    }
>-
>-    .dashboard.debugger .navigation-bar .item.button > .glyph {
>-        color: var(--glyph-color-active);
>-    }
>-
>-    .dashboard.debugger > .location .function-name {
>-        color: var(--text-color-active);
>-    }
>-
>-    .dashboard.debugger > .location .go-to-link {
>-        padding-bottom: 1px;
>-        -webkit-text-decoration-color: var(--text-color-secondary);
>-    }
>-
>-    .dashboard.debugger > .divider {
>-        background-image: linear-gradient(var(--text-color-tertiary), var(--text-color-tertiary));
>-    }
>-
>-
>-    /* BreakpointPopoverController.css */
>-    .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);
>-    }
>-
>-
>-    /* BreakpointActionView.css */
>-    .breakpoint-action-block-body {
>-        border-color: var(--text-color-quaternary);
>-        background-color: unset;
>-        box-shadow: unset;
>-    }
>-
>-    .breakpoint-action-block-body > .description {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    .breakpoint-action-append-button,
>-    .breakpoint-action-remove-button {
>-        filter: invert();
>-    }
>-
>-    .breakpoint-action-eval-editor {
>-        background: var(--background-color-code);
>-    }
>-
>-
>-    /* XHRBreakpointPopover.css */
>-    .popover .xhr-breakpoint-content > .editor-wrapper > .editor {
>-        -webkit-appearance: unset;
>-        border-color: var(--text-color-quaternary);
>-        background: var(--background-color-code);
>-    }
>-
>-
>-    /* ButtonNavigationItem.css */
>-    .navigation-bar .item.button {
>-        color: var(--text-color-secondary);
>-    }
>-
>-
>-    /* SpreadsheetStyle*.css */
>-    .spreadsheet-style-declaration-editor .property:not(.disabled) .value {
>-        color: rgb(227, 227, 227)
>-    }
>-
>-    .spreadsheet-css-declaration {
>-        color: hsl(0, 0%, 30%);
>-        border-bottom-color: var(--text-color-quaternary);
>-    }
>-
>-    .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,
>-    .spreadsheet-css-declaration .origin .go-to-link:hover {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    .spreadsheet-style-declaration-editor :matches(.name, .value).editing {
>-        outline-color: var(--background-color-secondary) !important;
>-    }
>-
>-    .spreadsheet-style-declaration-editor .property.has-warning {
>-        background-color: hsl(2, 50%, 25%);
>-    }
>-
>-    .spreadsheet-style-declaration-editor .property.has-warning .warning {
>-        filter: invert(100%) hue-rotate(150deg);
>-    }
>-
>-    .spreadsheet-css-declaration .media-label {
>-        color: var(--text-color);
>-    }
>-
>-
>-    /* QuickConsole.css */
>-    .quick-console {
>-        background-color: var(--background-color-code);
>-        color: var(--text-color);
>-        border-top: 1px solid var(--border-color);
>-    }
>-
>-
>-    .syntax-highlighted,
>-    .cm-s-default,
>-    .CodeMirror {
>-        color: var(--text-color);
>-    }
>-
>-    .cm-s-default,
>-    .CodeMirror {
>-        background-color: var(--background-color-code);
>-    }
>-
>-    .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;
>-    }
>-
>-
>-    /* ConsolePrompt.css */
>-    .console-prompt {
>-        background-color: var(--background-color-code);
>-    }
>-
>-
>-    /* CompletionSuggestionsView.css */
>-    .completion-suggestions {
>-        background-color: var(--overlay-background);
>-    }
>-
>-    .completion-suggestions-container > .item {
>-        color: var(--text-color);
>-    }
>-
>-
>-    /* CodeMirrorOverrides.css */
>-    .CodeMirror-cursor {
>-        border-left-color: hsl(0, 0%, var(--foreground-lightness));
>-    }
>-
>-    .CodeMirror .CodeMirror-gutters {
>-        background-color: var(--background-color);
>-        border-right-color: var(--text-color-quaternary);
>-    }
>-
>-    .cm-s-default .cm-link {
>-        color: var(--syntax-highlight-link-color);
>-    }
>-
>-    .CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket {
>-        background-color: hsla(232, 100%, 72%, 0.4);
>-        border-bottom-color: hsl(206, 100%, 65%);
>-    }
>-
>-
>-    /* SyntaxHighlightingDefaultTheme.css */
>-    .cm-s-default .cm-attribute {
>-        color: hsl(222, 100%, 72%);
>-    }
>-
>-    .cm-s-default .cm-m-xml.cm-attribute,
>-    .syntax-highlighted .html-attribute-name {
>-        color: hsl(27, 100%, 80%);
>-    }
>-
>-    .cm-s-default .cm-meta {
>-        color: hsl(0, 0%, 60%);
>-    }
>-
>-    .cm-s-default .cm-variable-3 {
>-        color: hsl(160, 69%, 64%);
>-    }
>-
>-    .cm-s-default .cm-builtin {
>-        color: hsl(218, 64%, 76%);
>-    }
>-
>-
>-    /* TreeOutline.css */
>-    .tree-outline .item .subtitle {
>-        color: var(--text-color-secondary);
>-    }
>-
>-
>-    /* ObjectTreePropertyTreeElement.css */
>-    .object-tree-property .getter,
>-    .object-tree-property .setter {
>-        filter: invert();
>-    }
>-
>-    .item.object-tree-property.prototype-property {
>-        border-color: hsla(0, 0%, var(--foreground-lightness), 0.06);
>-        background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
>-    }
>-
>-    .object-tree-property.prototype-property:hover,
>-    .object-tree-property.prototype-property:focus {
>-        border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
>-    }
>-
>-    .object-tree-property .value.error {
>-        color: hsl(0, 100%, 60%);
>-    }
>-
>-
>-    /* DOMTreeOutline.css */
>-    .tree-outline.dom {
>-        color: var(--text-color);
>-    }
>-
>-    .tree-outline.dom li.elements-drag-over .selection-area {
>-        border-top-color: var(--selected-background-color);
>-    }
>-
>-    .tree-outline.dom:focus li.selected .selection-area {
>-        background-color: var(--selected-background-color);
>-    }
>-
>-    .tree-outline.dom li.selected + ol.children.expanded {
>-        border-color: hsl(0, 0%, 27%);
>-    }
>-
>-    .tree-outline.dom .shadow {
>-        color: var(--text-color);
>-    }
>-
>-    /* FIXME: extract this as a variable. It's slightly different from var(background-color-secondary),
>-    but close enough for now. It needs to use partial translucency so that the selection area shines through. */
>-    .tree-outline.dom li.parent.shadow + ol.children.expanded,
>-    .tree-outline.dom li.parent.shadow::after {
>-        background-color: hsla(0, 0%, 90%, 0.1);
>-    }
>-
>-    .showing-find-banner .tree-outline.dom .search-highlight {
>-        /* FIXME: This should use a variable. */
>-        background-color: hsla(53, 83%, 53%, 0.8);
>-    }
>-
>-    /* DOMNodeDetailsSidebarPanel.css */
>-    .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover {
>-        filter: brightness(1.25);
>-    }
>-
>-
>-    /* GeneralStyleDetailsSidebarPanel.css */
>-    .sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
>-        color: var(--text-color-secondary);
>-    }
>-
>-
>-    /* SpreadsheetCSSStyleDeclarationSection.css */
>-    .spreadsheet-css-declaration {
>-        background: var(--background-color-code);
>-        color: var(--text-color-tertiary);
>-    }
>-
>-    .spreadsheet-css-declaration.locked {
>-        background: var(--background-color);
>-    }
>-
>-    .spreadsheet-css-declaration .selector.style-attribute {
>-        color: var(--text-color-secondary);
>-    }
>-
>-
>-    /* SpreadsheetCSSStyleDeclarationEditor.css */
>-    .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);
>-    }
>-
>-
>-    /* InlineSwatch.css */
>-    .inline-swatch {
>-        background: var(--background-color);
>-    }
>-
>-
>-    /* SpreadsheetRulesStyleDetailsPanel.css */
>-    .spreadsheet-style-panel .section-header {
>-        color: var(--text-color-secondary);
>-        border-bottom: 0.5px solid hsla(0, 0%, var(--background-color), 0.2);
>-    }
>-
>-    .spreadsheet-style-panel .section-header .node-link:hover {
>-        color: var(--text-color);
>-    }
>-
>-
>-    /* ComputedStyleDetailsPanel.css */
>-    .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);
>-    }
>-
>-
>-    /* Table.css */
>-    .table,
>-    .table > .header {
>-        background: var(--background-color);
>-    }
>-
>-    .table > .header > .sortable:active {
>-        background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>-    }
>-
>-    .table > .header > :matches(.sort-ascending, .sort-descending) {
>-        background: var(--background-color-selected);
>-    }
>-
>-    .table > .header > :matches(.sort-ascending, .sort-descending)::after {
>-        filter: invert();
>-    }
>-
>-
>-    /* ScopeBar.css */
>-    .scope-bar > li {
>-        color: var(--text-color);
>-    }
>-
>-
>-    /* TimelineOverview.css */
>-    .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);
>-    }
>-
>-    .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
>-    .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
>-        border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
>-    }
>-
>-
>-    /* TimelineIcons.css */
>-    .time-icon .icon {
>-        filter: invert();
>-    }
>-
>-
>-    /* TimelineDataGrid.css */
>-    .data-grid th:matches(.sort-ascending, .sort-descending) {
>-        background: var(--background-color-selected);
>-    }
>-
>-
>-    /* TimelineRecordingContentView.css */
>-    .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;
>-    }
>-
>-
>-    /* SettingsTabContentView.css */
>-    .content-view.settings .navigation-bar {
>-        background-color: var(--background-color-content);
>-    }
>-
>-    .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
>-        color: var(--glyph-color-active);
>-    }
>-
>-
>-    /* NewTabContentView.css */
>-    .new-tab.tab.content-view {
>-        background-color: var(--background-color-content);
>-    }
>-
>-
>-    /* FontResourceContentView.css */
>-    .content-view.resource.font .preview > .line {
>-        border-left-color: var(--text-color-quaternary);
>-        border-right-color: var(--text-color-quaternary);
>-    }
>-
>-    .content-view.resource.font .metric.top {
>-        background-color: var(--text-color-quaternary);
>-    }
>-
>-    .content-view.resource.font .metric.baseline {
>-        background-color: hsl(195, 100%, 37%);
>-    }
>-
>-    .content-view.resource.font .metric.middle {
>-        background-color: hsl(120, 100%, 35%);
>-    }
>-
>-    .content-view.resource.font .metric.xheight {
>-        background-color: hsl(350, 100%, 40%);
>-    }
>-
>-    .content-view.resource.font .metric.bottom {
>-        background-color: var(--text-color-quaternary);
>-    }
>-
>-
>-    /* FilterBar.css, SearchBar.css */
>-    :matches(.search-bar, .filter-bar) > input[type="search"],
>-    .search-bar > input[type="search"]:not(:placeholder-shown) {
>-        border-color: var(--background-color-selected);
>-        background-color: var(--background-color-alternate);
>-    }
>-
>-    :matches(.search-bar, .filter-bar) > input[type="search"]::placeholder {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    :matches(.search-bar, .filter-bar) > input[type="search"]:focus {
>-        background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>-        color: var(--text-color-active);
>-    }
>-
>-
>-    /* ImageResourceContentView.css */
>-    .content-view.resource.image {
>-        background: var(--background-color-content);
>-    }
>-
>-
>-    /* LogContentView.css */
>-    .console-messages {
>-        background-color: var(--background-color-code);
>-    }
>-
>-    .console-item {
>-        border-top-color: var(--console-message-separator);
>-    }
>-
>-    .console-messages {
>-        --background-color-selected: hsl(233, 30%, 30%);
>-        --border-color-selected: hsl(224, 30%, 35%);
>-        --border-color-error: hsla(20, 100%, 50%, 0.12);
>-        --border-color-warning: hsla(40, 100%, 50%, 0.12);
>-    }
>-
>-    .console-messages:focus .console-item.selected {
>-        background-color: var(--background-color-selected);
>-        border-color: var(--border-color-selected);
>-    }
>-
>-    .console-messages:focus .console-item.selected + .console-item {
>-        border-color: var(--border-color-selected);
>-    }
>-
>-    .console-session:first-of-type .console-session-header {
>-        color: var(--text-color-tertiary);
>-    }
>-
>-    .console-session:not(:first-of-type) .console-session-header {
>-        color: unset;
>-        background-color: unset;
>-    }
>-
>-    .console-messages a {
>-        color: var(--selected-secondary-text-color);
>-        cursor: pointer;
>-    }
>-
>-    .console-messages a:hover {
>-        color: var(--selected-secondary-text-color-active);
>-    }
>-
>-    .console-messages:focus .console-item.selected::after {
>-        background: hsl(210, 100%, 75%);
>-    }
>-
>-    .console-error-level {
>-        background-color: var(--error-background-color);
>-        border-color: var(--border-color-error);
>-    }
>-
>-    .console-error-level:not(.filtered-out, .filtered-out-by-search), .console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
>-        border-top-color: var(--border-color-error);
>-    }
>-
>-    .console-warning-level {
>-        background-color: var(--warning-background-color);
>-        border-color: var(--border-color-warning);
>-    }
>-
>-    .console-warning-level:not(.filtered-out, .filtered-out-by-search), .console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
>-        border-top-color: var(--border-color-warning);
>-    }
>-
>-    .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
>-        color: var(--search-highlight-text-color);
>-        background-color: var(--search-highlight-background-color);
>-        border-bottom-color: var(--search-highlight-underline-color);
>-    }
>-
>-    .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
>-        color: var(--search-highlight-text-color-active);
>-        background-color: var(--search-highlight-background-color-active);
>-    }
>-
>-
>-    /* SourceCodeTextEditor.css */
>-    .source-code.text-editor > .CodeMirror .error {
>-        background-color: var(--error-background-color);
>-    }
>-
>-    .source-code.text-editor > .CodeMirror .warning {
>-        background-color: var(--warning-background-color);
>-    }
>-
>-    .source-code.text-editor > .CodeMirror .issue-widget {
>-        color: hsl(0, 0%, var(--foreground-lightness));
>-        --warning-background-color: hsl(43, 100%, 23%);
>-        --error-background-color: hsl(11, 70%, 32%);
>-    }
>-
>-    .source-code.text-editor > .CodeMirror .issue-widget.warning,
>-    .source-code.text-editor > .CodeMirror .issue-widget.inline.warning {
>-        background-color: var(--warning-background-color);
>-    }
>-
>-    .source-code.text-editor > .CodeMirror .issue-widget.error,
>-    .source-code.text-editor > .CodeMirror .issue-widget.inline.error {
>-        background-color: var(--error-background-color);
>-    }
>-
>-
>-    /* ConsoleMessageView.css */
>-    .console-message .syntax-highlighted {
>-        background-color: unset;
>-    }
>-
>-    .console-warning-level .console-message-text {
>-        color: hsl(53, 80%, 55%);
>-    }
>-
>-    .console-error-level .console-message-text {
>-        color: hsl(10, 100%, 70%);
>-    }
>-
>-    .console-user-command > .console-message-text {
>-        color: hsl(209, 100%, 70%);
>-    }
>-
>-    .console-message .repeat-count {
>-        background-color: hsl(218, 70%, 48%);
>-    }
>-
>-
>-    /* CallFrameView.css */
>-    .call-frame .subtitle,
>-    .call-frame .subtitle .source-link {
>-        color: hsla(0, 0%, var(--foreground-lightness), 0.6);
>-    }
>-
>-    .call-frame:hover .subtitle .source-link,
>-    .call-frame:focus .subtitle .source-link {
>-        color: hsl(0, 0%, var(--foreground-lightness));
>-    }
>-
>-    .call-frame .separator {
>-        color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>-    }
>-
>-
>-    /* QuickConsole.css */
>-    .quick-console.showing-log {
>-        border-top-color: var(--console-message-separator) !important;
>-    }
>-
>-
>-    /* FindBanner.css */
>-    .find-banner > input[type="search"] {
>-        background-color: var(--background-color-alternate);
>-        border-color: var(--background-color-selected);
>-    }
>-
>-    .find-banner.console-find-banner > input[type=search]:not(:placeholder-shown) {
>-        color: unset;
>-        background-color: unset;
>-    }
>-
>-
>-    /* NetworkResourceDetailView.css */
>-    .network-resource-detail {
>-        background-color: var(--background-color);
>-    }
>-
>-    .network-resource-detail .item.close > .glyph {
>-        background-color: hsla(0, 0%, 100%, 0.2);
>-    }
>-
>-    .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
>-        background-color: unset;
>-        color: var(--glyph-color-active);
>-    }
>-
>-    .resource-headers .value {
>-        color: var(--text-color);
>-    }
>-
>-
>-    /* NetworkTableContentView.css */
>-    .network-table .cell.domain > .lock {
>-        filter: var(--filter-invert);
>-    }
>-
>-
>-    /* ResourceSizesContentView.css */
>-    .resource-sizes > .content .label {
>-        color: var(--text-color-secondary);
>-    }
>-
>-
>-    /* ResourceTimingBreakdownView.css */
>-    .popover.waterfall-popover {
>-        --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);
>-    }
>-
>-    .resource-timing-breakdown > table hr {
>-        border-color: var(--text-color-quaternary);
>-    }
>-
>-
>-    /* GeneralStyleDetailsSidebarPanel.css */
>-    .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);
>-    }
>-    
>-    
>-    /* BezierEditor.css */
>-    .bezier-editor > .bezier-preview-timing {
>-        border-top-color: var(--text-color-tertiary);
>-    }
>-    
>-    .bezier-editor > .bezier-container .bezier-curve {
>-        stroke: white;
>-    }
>-    
>-    .bezier-editor > .bezier-container .linear-curve {
>-        stroke: var(--text-color-tertiary);
>-    }
>-    
>-    .bezier-editor > .bezier-preview {
>-        border-bottom-color: var(--text-color-tertiary);
>-    }
>-    
>-    .bezier-editor > .bezier-preview > div {
>-        background-color: var(--selected-background-color-active);
>-    }
>-    
>-    .bezier-editor > .bezier-container .control-handle {
>-        fill: var(--selected-background-color-active);
>-    }
>-    
>-    .bezier-editor > .bezier-container .control-line {
>-        stroke: var(--selected-background-color-active);
>-    }
>-
>-
>-    /* CanvasTabContentView.css */
>-    .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon {
>-        filter: invert(88%);
>-    }
>-
>-
>-    /* WebSocketContentView.css */
>-    .web-socket.content-view .data-grid table.data tr.revealed {
>-        border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
>-    }
>-
>-    .web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing {
>-        background-color: var(--green-highlight-background-color);
>-        color: var(--green-highlight-text-color);
>-    }
>-
>-    .web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame {
>-        background-color: var(--yellow-highlight-background-color);
>-        color: var(--yellow-highlight-text-color);
>-    }
>-
>-
>-    /* RecordingActionTreeElement.css */
>-    .item.action:not(.initial-state)::before {
>-        color: unset;
>-        opacity: 0.4;
>-    }
>-
>-    .tree-outline .item.action.visual:not(.selected, .invalid) {
>-        color: var(--green-highlight-text-color);
>-    }
>-
>-    .item.action:not(.initial-state) > .icon {
>-        filter: invert();
>-    }
>-
>-    .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
>-        filter: invert();
>-        opacity: 0.8;
>-    }
>-
>-
>-    /* CanvasTabContentView.css */
>-    .content-view.tab.canvas .navigation-bar > .item .canvas-overview .icon,
>-    .content-view.tab.canvas .navigation-bar > .item .canvas.canvas-2d .icon,
>-    .content-view.tab.canvas .navigation-bar > .item .canvas.webgl .icon,
>-    .content-view.tab.canvas .navigation-bar > .item .recording > .icon {
>-        filter: invert();
>-    }
>-
>-    .content-view.canvas > .preview > img,
>-    .content-view.canvas .preview-container > canvas {
>-        background-color: white;
>-    }
>-
>-
>-    /* CanvasOverviewContentView.css */
>-    .content-view.canvas-overview {
>-        background-color: unset;
>-    }
>-
>-    .content-view.canvas-overview .content-view.canvas {
>-        background-color: var(--background-color-secondary);
>-    }
>-
>-    .content-view.canvas-overview .content-view.canvas.is-recording {
>-        --recording-color: hsl(0, 100%, 39%);
>-        border-color: var(--recording-color);
>-    }
>-
>-    .content-view.canvas-overview .content-view.canvas.is-recording > header {
>-        background-color: var(--recording-color);
>-    }
>-
>-    .content-view.canvas-overview .content-view.canvas > header > .titles > .title {
>-        color: var(--text-color);
>-    }
>-
>-    .content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,
>-    .content-view.canvas-overview .content-view.canvas > footer .memory-cost {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    .content-view.canvas-overview .content-view.canvas > footer > .recordings::before {
>-        filter: invert();
>-    }
>-
>-    .content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle {
>-        color: unset;
>-        opacity: 0.5
>-    }
>-
>-
>-    /* CanvasContentView.css */
>-    .content-view.canvas:not(.tab) {
>-        background-color: unset;
>-    }
>-
>-
>-    /* RecordingContentView.css */
>-    .content-view:not(.tab).recording {
>-        background-color: unset;
>-    }
>-
>-    .content-view:not(.tab).recording > header > .slider-container {
>-        background-color: unset;
>-        border-color: var(--border-color-secondary);
>-    }
>-
>-    .content-view:not(.tab).recording > header > .slider-container > input[type=range] {
>-        background: none;
>-    }
>-
>-
>-    /* RecordingStateDetailsSidebarPanel.css */
>-    .sidebar > .panel.details.recording-state > .content > .data-grid tr.modified {
>-        color: var(--green-highlight-text-color);
>-    }
>-
>-
>-    /* ProgressView.css */
>-    .progress-view > .titles > .title {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    .progress-view > .titles > .subtitle {
>-        color: var(--text-color-tertiary);
>-    }
>-
>-    .indeterminate-progress-spinner {
>-        filter: invert();
>-    }
>-
>-
>-    /* ShaderProgramContentView.css */
>-    .content-view.shader-program > .text-editor.shader {
>-        --border-start-style: 1px solid var(--text-color-quaternary);
>-    }
>-
>-    .content-view.shader-program > .text-editor.shader > .type-title {
>-        background-color: var(--background-color);
>-        border-bottom-color: var(--text-color-quaternary);
>-    }
>-
>-
>-    /* ShaderProgramTreeElement.css */
>-    .item.shader-program .status > img {
>-        filter: invert();
>-    }
>-
>-
>-    /* OpenResourceDialog.css */
>-    .open-resource-dialog {
>-        background-color: var(--overlay-background);
>-        border-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>-    }
>-
>-    .open-resource-dialog > .field > input {
>-        color: var(--text-color-active);
>-    }
>-
>-    .open-resource-dialog > .field > input::placeholder {
>-        color: var(--text-color-secondary);
>-    }
>-
>-    .open-resource-dialog > .tree-outline .item.selected {
>-        background-color: var(--selected-background-color);
>-        color: white;
>-    }
>-
>-    .open-resource-dialog > .field::before {
>-        filter: invert();
>-    }
>-
>-
>-    /* HoverMenu.css */
>-    .hover-menu > svg > :matches(path, rect) {
>-        stroke: hsla(0, 0%, 100%, 0.3);
>-    }
>-
>-}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
>index e697c31ea6d..2faa7bbf3c7 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
>@@ -428,3 +428,30 @@ 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;
> }
>+
>+@media (prefers-dark-interface) {
>+    .data-grid th {
>+        background-color: var(--background-color);
>+    }
>+
>+    .data-grid td .subtitle {
>+        color: var(--selected-secondary-text-color);
>+    }
>+
>+    .data-grid:matches(:focus, .force-focus) tr.selected td .subtitle {
>+        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;
>+    }
>+
>+    .data-grid td.spanning {
>+        color: var(--text-color-secondary);
>+        background-color: unset;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
>index 2e6ed4750cc..328058f185c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
>@@ -22,6 +22,7 @@
>  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
>  * THE POSSIBILITY OF SUCH DAMAGE.
>  */
>+
> .toolbar .dashboard.debugger {
>     display: flex;
>     flex-wrap: nowrap;
>@@ -199,3 +200,26 @@ body[dir=rtl] .dashboard.debugger > .location .function-icon {
>     width: 14px;
>     height: 14px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .toolbar .dashboard.debugger {
>+        color: var(--text-color);
>+    }
>+
>+    .dashboard.debugger .navigation-bar .item.button > .glyph {
>+        color: var(--glyph-color-active);
>+    }
>+
>+    .dashboard.debugger > .location .function-name {
>+        color: var(--text-color-active);
>+    }
>+
>+    .dashboard.debugger > .location .go-to-link {
>+        padding-bottom: 1px;
>+        -webkit-text-decoration-color: var(--text-color-secondary);
>+    }
>+
>+    .dashboard.debugger > .divider {
>+        background-image: linear-gradient(var(--text-color-tertiary), var(--text-color-tertiary));
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
>index e327417174d..55071fcfc38 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
>@@ -181,3 +181,39 @@ body[dir=rtl] .toolbar .dashboard.default > .item > div {
> @keyframes console-item-pulse {
>     50% { opacity: 0.6; }
> }
>+
>+@media (prefers-dark-interface) {
>+    .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);
>+    }
>+
>+    .toolbar .dashboard.default > .item.enabled > div {
>+        color: var(--glyph-color);
>+    }
>+
>+    .toolbar .dashboard.default > .item.enabled:hover {
>+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
>+    }
>+
>+    .toolbar .dashboard.default > .item.enabled:hover > div {
>+        color: hsla(0, 100%, 100%, 0.85);
>+    }
>+
>+    .toolbar .dashboard.default > .resourcesCount > img,
>+    .toolbar .dashboard.default > .resourcesSize > img,
>+    .toolbar .dashboard.default > .time > img,
>+    .toolbar .dashboard.default > .logs > img,
>+    .toolbar .dashboard.default > .errors:not(.enabled) > img,
>+    .toolbar .dashboard.default > .issues:not(.enabled) > img {
>+        filter: var(--filter-invert);
>+    }
>+
>+    body.latest-mac .toolbar .dashboard .item.button {
>+        background: unset;
>+    }
>+
>+    .dashboard-container .advance-arrow {
>+        filter: var(--filter-invert);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>index 435b350809f..3c9883ecb3e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
>@@ -332,3 +332,35 @@ body[dir=rtl] .details-section > .content > .group > .row.simple > .value .go-to
>         border-width: 0.5px !important;
>     }
> }
>+
>+@media (prefers-dark-interface) {
>+    .details-section > .header {
>+        color: var(--text-color);
>+    }
>+
>+    .details-section > .header > label {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .details-section .details-section,
>+    .details-section .details-section > .header,
>+    .details-section.computed-style-properties:not(.collapsed) > .header{
>+        background-color: var(--background-color);
>+    }
>+
>+    .details-section .details-section:not(.collapsed) > .header {
>+        border-bottom-color: var(--border-color-secondary);
>+    }
>+
>+    .details-section > .content > .group > .row.simple > .label {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .details-section > .content > .group:nth-child(even) {
>+        background-color: unset;
>+    }
>+
>+    .details-section > .content > .group > .row:matches(.empty, .text) {
>+        color: var(--text-color-secondary);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
>index 4bb739b89ce..7b3d5df68d0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
>@@ -37,3 +37,10 @@
>         width: 0.5px;
>     }
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 e3cb883aa12..5b6a954438c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Editing.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Editing.css
>@@ -51,3 +51,14 @@
> .editing br {
>     display: none;
> }
>+
>+@media (prefers-dark-interface) {
>+    .editing {
>+        background-color: var(--background-color-secondary);
>+        outline-color: var(--text-color-tertiary) !important;
>+    }
>+
>+    .editing, .editing * {
>+        color: var(--text-color-active) !important;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FindBanner.css b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
>index 900dc4fe3e0..25f06f0048b 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
>@@ -315,4 +315,14 @@ body[dir=rtl] .find-banner.console-find-banner > input[type="search"]::-webkit-t
>     .find-banner > button.segmented > .glyph {
>         filter: invert();
>     }
>+
>+    .find-banner > input[type="search"] {
>+        background-color: var(--background-color-alternate);
>+        border-color: var(--background-color-selected);
>+    }
>+
>+    .find-banner.console-find-banner > input[type=search]:not(:placeholder-shown) {
>+        color: unset;
>+        background-color: unset;
>+    }
> }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
>index 41208c0959a..50c9f494ecf 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
>@@ -108,3 +108,30 @@ body[dir=rtl] .content-view.resource.font .preview > .line > .metric {
>     vertical-align: bottom;
>     background-color: lightgrey;
> }
>+
>+@media (prefers-dark-interface) {
>+    .content-view.resource.font .preview > .line {
>+        border-left-color: var(--text-color-quaternary);
>+        border-right-color: var(--text-color-quaternary);
>+    }
>+
>+    .content-view.resource.font .metric.top {
>+        background-color: var(--text-color-quaternary);
>+    }
>+
>+    .content-view.resource.font .metric.baseline {
>+        background-color: hsl(195, 100%, 37%);
>+    }
>+
>+    .content-view.resource.font .metric.middle {
>+        background-color: hsl(120, 100%, 35%);
>+    }
>+
>+    .content-view.resource.font .metric.xheight {
>+        background-color: hsl(350, 100%, 40%);
>+    }
>+
>+    .content-view.resource.font .metric.bottom {
>+        background-color: var(--text-color-quaternary);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>index 920e870675d..62c1f2bc9f6 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
>@@ -77,3 +77,20 @@
>     left: -1px;
>     right: -2px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .formatted-object,
>+    .formatted-node,
>+    .formatted-error,
>+    .formatted-map,
>+    .formatted-set,
>+    .formatted-weakmap,
>+    .formatted-weakset {
>+        color: var(--text-color);
>+    }
>+
>+    .formatted-null,
>+    .formatted-undefined {
>+        color: var(--text-color-secondary);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
>index 6d3df5707fb..9d151dc6454 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css
>@@ -213,3 +213,17 @@ body[dir=rtl] .sidebar > .panel.details.css-style > .content ~ .class-list-conta
> .sidebar > .panel.details.css-style > .content.filter-in-progress .filter-property-non-matching {
>     opacity: 0.5;
> }
>+
>+@media (prefers-dark-interface) {
>+    .sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .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);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
>index 521a902c44b..dc8c9c6c41c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
>@@ -65,3 +65,9 @@
> .hover-menu.visible > img {
>     pointer-events: all;
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 89341d9a14e..ae9a257fa39 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
>@@ -45,3 +45,9 @@
> 
>     margin: auto 0;
> }
>+
>+@media (prefers-dark-interface) {
>+    .content-view.resource.image {
>+        background: var(--background-color-content);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
>index fcaec14c1cd..e1fc76264ec 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
>@@ -118,3 +118,9 @@
> .inline-swatch-variable-popover .CodeMirror pre {
>     padding: 0 3px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .inline-swatch {
>+        background: var(--background-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/LogContentView.css b/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
>index 64c6caafa7e..dd8c47ba464 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
>@@ -241,3 +241,80 @@ body[dir=rtl] .log-scope-bar > li.unread::before {
>         /* Accessible label alternative for icon indicating console input/output/warning/error, etc. */
>         alt: attr(data-labelprefix);
> }
>+
>+@media (prefers-dark-interface) {
>+    .console-messages {
>+        background-color: var(--background-color-code);
>+    }
>+
>+    .console-item {
>+        border-top-color: var(--console-message-separator);
>+    }
>+
>+    .console-messages {
>+        --background-color-selected: hsl(233, 30%, 30%);
>+        --border-color-selected: hsl(224, 30%, 35%);
>+        --border-color-error: hsla(20, 100%, 50%, 0.12);
>+        --border-color-warning: hsla(40, 100%, 50%, 0.12);
>+    }
>+
>+    .console-messages:focus .console-item.selected {
>+        background-color: var(--background-color-selected);
>+        border-color: var(--border-color-selected);
>+    }
>+
>+    .console-messages:focus .console-item.selected + .console-item {
>+        border-color: var(--border-color-selected);
>+    }
>+
>+    .console-session:first-of-type .console-session-header {
>+        color: var(--text-color-tertiary);
>+    }
>+
>+    .console-session:not(:first-of-type) .console-session-header {
>+        color: unset;
>+        background-color: unset;
>+    }
>+
>+    .console-messages a {
>+        color: var(--selected-secondary-text-color);
>+        cursor: pointer;
>+    }
>+
>+    .console-messages a:hover {
>+        color: var(--selected-secondary-text-color-active);
>+    }
>+
>+    .console-messages:focus .console-item.selected::after {
>+        background: hsl(210, 100%, 75%);
>+    }
>+
>+    .console-error-level {
>+        background-color: var(--error-background-color);
>+        border-color: var(--border-color-error);
>+    }
>+
>+    .console-error-level:not(.filtered-out, .filtered-out-by-search), .console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
>+        border-top-color: var(--border-color-error);
>+    }
>+
>+    .console-warning-level {
>+        background-color: var(--warning-background-color);
>+        border-color: var(--border-color-warning);
>+    }
>+
>+    .console-warning-level:not(.filtered-out, .filtered-out-by-search), .console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
>+        border-top-color: var(--border-color-warning);
>+    }
>+
>+    .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
>+        color: var(--search-highlight-text-color);
>+        background-color: var(--search-highlight-background-color);
>+        border-bottom-color: var(--search-highlight-underline-color);
>+    }
>+
>+    .search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
>+        color: var(--search-highlight-text-color-active);
>+        background-color: var(--search-highlight-background-color-active);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css
>index fee96261640..5b87edefaa0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Main.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
>@@ -133,7 +133,7 @@ input[type=range]::-webkit-slider-runnable-track {
>     display: flex;
>     flex-direction: column;
> 
>-    background-color: white;
>+    background-color: var(--background-color-content);
> 
>     /* The position and z-index are needed to make negative z-index work in the DOM tree. */
>     z-index: 0;
>@@ -380,3 +380,24 @@ body[dir=rtl] .go-to-arrow {
>     background-size: 20px 20px;
>     background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .go-to-arrow {
>+        filter: invert();
>+    }
>+
>+    .resource-link,
>+    .go-to-link {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .expand-list-button {
>+        color: inherit;
>+    }
>+
>+    :matches(img, canvas).show-grid {
>+        background-color: white;
>+        --checkerboard-dark-square: hsl(0, 0%, 80%);
>+        background-image: linear-gradient(315deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(45deg, transparent 75%, var(--checkerboard-dark-square) 75%), linear-gradient(315deg, var(--checkerboard-dark-square) 25%, transparent 25%), linear-gradient(45deg, var(--checkerboard-dark-square) 25%, transparent 25%);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css
>index 5f877925b59..73b53d99fbb 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css
>@@ -85,3 +85,22 @@
>     -webkit-user-select: text;
>     white-space: nowrap;
> }
>+
>+@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);
>+    }
>+
>+    .network .network-resource-detail .navigation-bar .item.radio.button.text-only.selected {
>+        background-color: unset;
>+        color: var(--glyph-color-active);
>+    }
>+
>+    .resource-headers .value {
>+        color: var(--text-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
>index d1314984766..622caf5434c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
>@@ -165,3 +165,9 @@ body[dir=rtl] .network-table .cell.name > .status {
> .waterfall .block.response {
>     background-color: var(--network-response-color);
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 b58f385b041..345a4ee2ae2 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css
>@@ -88,3 +88,9 @@
>     display: block;
>     margin-top: 8px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .new-tab.tab.content-view {
>+        background-color: var(--background-color-content);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
>index 40f401d12dd..c9209648d12 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
>@@ -150,3 +150,24 @@
> .object-tree-property .value.error {
>     color: red;
> }
>+
>+@media (prefers-dark-interface) {
>+    .object-tree-property .getter,
>+    .object-tree-property .setter {
>+        filter: invert();
>+    }
>+
>+    .item.object-tree-property.prototype-property {
>+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.06);
>+        background-color: hsla(0, 0%, var(--foreground-lightness), 0.03);
>+    }
>+
>+    .object-tree-property.prototype-property:hover,
>+    .object-tree-property.prototype-property:focus {
>+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
>+    }
>+
>+    .object-tree-property .value.error {
>+        color: hsl(0, 100%, 60%);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
>index 318ac44a9c6..4eada648279 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
>@@ -132,3 +132,18 @@
> .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);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
>index 529c0fcc9ec..5ac6275ebd5 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
>@@ -201,3 +201,27 @@ body[dir=rtl] .open-resource-dialog > .tree-outline .item {
> .open-resource-dialog > .tree-outline .item.selected .subtitle {
>     color: hsla(0, 0%, 100%, 0.9);
> }
>+
>+@media (prefers-dark-interface) {
>+    .open-resource-dialog {
>+        background-color: var(--overlay-background);
>+        border-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>+    }
>+
>+    .open-resource-dialog > .field > input {
>+        color: var(--text-color-active);
>+    }
>+
>+    .open-resource-dialog > .field > input::placeholder {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .open-resource-dialog > .tree-outline .item.selected {
>+        background-color: var(--selected-background-color);
>+        color: white;
>+    }
>+
>+    .open-resource-dialog > .field::before {
>+        filter: invert();
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ProgressView.css b/Source/WebInspectorUI/UserInterface/Views/ProgressView.css
>index e67b7cab176..3ef4d400e0c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ProgressView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ProgressView.css
>@@ -54,3 +54,17 @@
>     height: 24px;
>     margin: 0 auto;
> }
>+
>+@media (prefers-dark-interface) {
>+    .progress-view > .titles > .title {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .progress-view > .titles > .subtitle {
>+        color: var(--text-color-tertiary);
>+    }
>+
>+    .indeterminate-progress-spinner {
>+        filter: invert();
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
>index 04d732edb8b..58d4f7f2830 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
>@@ -106,3 +106,20 @@
>     color: var(--selected-foreground-color);
>     opacity: 1;
> }
>+
>+@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;
>+    }
>+
>+    .quick-console.showing-log {
>+        border-top-color: var(--console-message-separator) !important;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>index 6826fc42661..bacea2915ca 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css
>@@ -219,3 +219,23 @@ body[dir=rtl] .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.init
>     height: 12px;
>     margin-top: 2px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .item.action:not(.initial-state)::before {
>+        color: unset;
>+        opacity: 0.4;
>+    }
>+
>+    .tree-outline .item.action.visual:not(.selected, .invalid) {
>+        color: var(--green-highlight-text-color);
>+    }
>+
>+    .item.action:not(.initial-state) > .icon {
>+        filter: invert();
>+    }
>+
>+    .tree-outline:not(.hide-disclosure-buttons) .item.action:not(.initial-state, .parent) > .icon {
>+        filter: invert();
>+        opacity: 0.8;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css b/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
>index e53d94c9de6..919e636862e 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css
>@@ -86,3 +86,18 @@
>     position: absolute;
>     z-index: 10;
> }
>+
>+@media (prefers-dark-interface) {
>+    .content-view:not(.tab).recording {
>+        background-color: unset;
>+    }
>+
>+    .content-view:not(.tab).recording > header > .slider-container {
>+        background-color: unset;
>+        border-color: var(--border-color-secondary);
>+    }
>+
>+    .content-view:not(.tab).recording > header > .slider-container > input[type=range] {
>+        background: none;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css
>index 9d6e7114d97..12acb43d38a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css
>@@ -42,3 +42,9 @@
> .sidebar > .panel.details.recording-state > .content > .data-grid .inline-swatch {
>     vertical-align: -1px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .sidebar > .panel.details.recording-state > .content > .data-grid tr.modified {
>+        color: var(--green-highlight-text-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css b/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css
>index 35810519f3a..806466b25ff 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css
>@@ -83,3 +83,9 @@ 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);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css b/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css
>index 4b82c2a2439..8026d148036 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css
>@@ -116,3 +116,9 @@
>     height: 10px;
>     -webkit-margin-start: 3px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 4ab440ef1ed..7f3923017e7 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css
>@@ -71,3 +71,22 @@
>     top: 1px;
>     height: 14px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .popover.waterfall-popover {
>+        --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);
>+    }
>+
>+    .resource-timing-breakdown > table hr {
>+        border-color: var(--text-color-quaternary);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>index 578937fc50e..ce80c0cccc4 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
>@@ -115,3 +115,9 @@ body[dir=rtl] .scope-bar > li.multiple > .arrows {
> .scope-bar > li.selected:active {
>     background-color: var(--selected-background-color-active);
> }
>+
>+@media (prefers-dark-interface) {
>+    .scope-bar > li {
>+        color: var(--text-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchBar.css b/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
>index 0e5691a5c2c..1969ea354b0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
>@@ -52,3 +52,20 @@
> .search-bar > input[type="search"]:not(:placeholder-shown) {
>     background-color: white;
> }
>+
>+@media (prefers-dark-interface) {
>+    :matches(.search-bar, .filter-bar) > input[type="search"],
>+    .search-bar > input[type="search"]:not(:placeholder-shown) {
>+        border-color: var(--background-color-selected);
>+        background-color: var(--background-color-alternate);
>+    }
>+
>+    :matches(.search-bar, .filter-bar) > input[type="search"]::placeholder {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    :matches(.search-bar, .filter-bar) > input[type="search"]:focus {
>+        background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>+        color: var(--text-color-active);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
>index 717a2bb48fb..9bb4d7f3ff0 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 all {
>     .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 5d754f17dab..deacee59758 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css
>@@ -143,3 +143,13 @@ body[dir=rtl] .content-view.settings > .settings-view > .container > .editor-gro
>     margin-left: var(--settings-input-number-margin-end);
>     margin-right: var(--settings-input-number-margin-start);
> }
>+
>+@media (prefers-dark-interface) {
>+    .content-view.settings .navigation-bar {
>+        background-color: var(--background-color-content);
>+    }
>+
>+    .content-view.settings .navigation-bar .item.radio.button.text-only.selected {
>+        color: var(--glyph-color-active);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css
>index b578054b4c1..a010a3a01e7 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css
>@@ -60,3 +60,14 @@ body[dir=rtl] .content-view.shader-program > .text-editor.shader + .text-editor.
> .content-view.shader-program > .text-editor.shader > .CodeMirror {
>     top: 18px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .content-view.shader-program > .text-editor.shader {
>+        --border-start-style: 1px solid var(--text-color-quaternary);
>+    }
>+
>+    .content-view.shader-program > .text-editor.shader > .type-title {
>+        background-color: var(--background-color);
>+        border-bottom-color: var(--text-color-quaternary);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css
>index 69b1db44e12..f554deef575 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css
>@@ -40,3 +40,9 @@
> .item.shader-program.disabled > * {
>     opacity: 0.5;
> }
>+
>+@media (prefers-dark-interface) {
>+    .item.shader-program .status > img {
>+        filter: invert();
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>index 16c56caf493..cfb65302089 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
>@@ -184,6 +184,30 @@
> }
> 
> @media (prefers-dark-interface) {
>+    .source-code.text-editor > .CodeMirror .error {
>+        background-color: var(--error-background-color);
>+    }
>+
>+    .source-code.text-editor > .CodeMirror .warning {
>+        background-color: var(--warning-background-color);
>+    }
>+
>+    .source-code.text-editor > .CodeMirror .issue-widget {
>+        color: hsl(0, 0%, var(--foreground-lightness));
>+        --warning-background-color: hsl(43, 100%, 23%);
>+        --error-background-color: hsl(11, 70%, 32%);
>+    }
>+
>+    .source-code.text-editor > .CodeMirror .issue-widget.warning,
>+    .source-code.text-editor > .CodeMirror .issue-widget.inline.warning {
>+        background-color: var(--warning-background-color);
>+    }
>+
>+    .source-code.text-editor > .CodeMirror .issue-widget.error,
>+    .source-code.text-editor > .CodeMirror .issue-widget.inline.error {
>+        background-color: var(--error-background-color);
>+    }
>+
>     .source-code.text-editor > .CodeMirror .thread-widget.inline {
>         background-color: hsl(99, 85%, 34%);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>index f8f960e2d7a..4b7f7a072e9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
>@@ -150,3 +150,26 @@
> .spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment {
>     color: var(--syntax-highlight-comment-color);
> }
>+
>+@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 {
>+        background-color: hsl(2, 50%, 25%);
>+    }
>+
>+    .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);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>index 777fe8d4372..ab21e9a1ada 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css
>@@ -129,3 +129,38 @@
>     display: inline-block;
>     padding-left: var(--css-declaration-horizontal-padding);
> }
>+
>+@media (prefers-dark-interface) {
>+    .spreadsheet-css-declaration {
>+        background: var(--background-color-code);
>+        color: var(--text-color-tertiary);
>+        color: hsl(0, 0%, 30%);
>+        border-bottom-color: var(--text-color-quaternary);
>+    }
>+
>+    .spreadsheet-css-declaration.locked {
>+        background: var(--background-color);
>+    }
>+
>+    .spreadsheet-css-declaration .selector.style-attribute {
>+        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,
>+    .spreadsheet-css-declaration .origin .go-to-link:hover {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    .spreadsheet-css-declaration .media-label {
>+        color: var(--text-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>index 8aa77a6347a..010738a8110 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css
>@@ -141,3 +141,14 @@
> .style-spreadsheet .declarations:hover input[type="checkbox"] {
>     visibility: visible;
> }
>+
>+@media (prefers-dark-interface) {
>+    .spreadsheet-style-panel .section-header {
>+        color: var(--text-color-secondary);
>+        border-bottom: 0.5px solid hsla(0, 0%, var(--background-color), 0.2);
>+    }
>+
>+    .spreadsheet-style-panel .section-header .node-link:hover {
>+        color: var(--text-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
>index 6382fd38e28..70a8243a41f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
>@@ -124,3 +124,37 @@
> .cm-s-default .basic-block-has-not-executed.cm-m-xml.cm-attribute {
>     color: rgb(201, 192, 166);
> }
>+
>+@media (prefers-dark-interface) {
>+    .syntax-highlighted,
>+    .cm-s-default,
>+    .CodeMirror {
>+        color: var(--text-color);
>+    }
>+
>+    .cm-s-default,
>+    .CodeMirror {
>+        background-color: var(--background-color-code);
>+    }
>+
>+    .cm-s-default .cm-attribute {
>+        color: hsl(222, 100%, 72%);
>+    }
>+
>+    .cm-s-default .cm-m-xml.cm-attribute,
>+    .syntax-highlighted .html-attribute-name {
>+        color: hsl(27, 100%, 80%);
>+    }
>+
>+    .cm-s-default .cm-meta {
>+        color: hsl(0, 0%, 60%);
>+    }
>+
>+    .cm-s-default .cm-variable-3 {
>+        color: hsl(160, 69%, 64%);
>+    }
>+
>+    .cm-s-default .cm-builtin {
>+        color: hsl(218, 64%, 76%);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBar.css b/Source/WebInspectorUI/UserInterface/Views/TabBar.css
>index 17276cbf007..d0a4b6eceac 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TabBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TabBar.css
>@@ -357,3 +357,63 @@ body.window-inactive .tab-bar.animating.closing-tab > .item.selected {
>     z-index: 2;
>     pointer-events: none;
> }
>+
>+@media (prefers-dark-interface) {
>+    .tab-bar {
>+        background-image: none;
>+        background-color: hsl(0, 0%, 23%);
>+
>+        --tab-item-border-color: hsl(0, 0%, 36%);
>+
>+        /* FIXME: Use semantic colors */
>+        --tab-item-dark-border-color: var(--tab-item-border-color);
>+        --tab-item-medium-border-color: var(--tab-item-border-color);
>+        --tab-item-light-border-color: var(--tab-item-border-color);
>+        --tab-item-extra-light-border-color: var(--tab-item-border-color);
>+    }
>+
>+    .tab-bar > .item {
>+        background-image: none;
>+        background-color: hsl(0, 0%, 17%);
>+    }
>+
>+    .tab-bar > .item > .title {
>+        color: white !important;
>+    }
>+
>+    .tab-bar > .item:not(.disabled).selected {
>+        background-image: none;
>+        background-color: hsl(0, 0%, 21%);
>+        border-top-color: hsl(0, 0%, 37%);
>+    }
>+
>+    .tab-bar:not(.animating) > .item:not(.selected):hover {
>+        background-color: hsl(0, 0%, 15%);
>+    }
>+
>+    .tab-bar > .item > .close,
>+    .tab-bar > .item > .icon {
>+        filter: var(--filter-invert);
>+    }
>+
>+    body.window-inactive .tab-bar {
>+        --tab-item-border-color: hsl(0, 0%, 34%);
>+        border-bottom-color: var(--tab-item-border-color);
>+
>+        background-image: none !important;
>+        background-color: hsl(0, 0%, 17%) !important;
>+    }
>+
>+    body.window-inactive .tab-bar > .item {
>+        background-image: none !important;
>+        background-color: hsl(0, 0%, 17%) !important;
>+    }
>+
>+    body.window-inactive .tab-bar > .item.selected {
>+        background-color: var(--background-color) !important;
>+    }
>+
>+    body.window-inactive .tab-bar > .item > .title {
>+        color: hsl(0, 0%, 58%) !important;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Table.css b/Source/WebInspectorUI/UserInterface/Views/Table.css
>index 61422947444..bc0994a6912 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Table.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Table.css
>@@ -174,3 +174,22 @@ body[dir=rtl] .table .cell:first-child {
> .table .cell.align-center {
>     text-align: center;
> }
>+
>+@media (prefers-dark-interface) {
>+    .table,
>+    .table > .header {
>+        background: var(--background-color);
>+    }
>+
>+    .table > .header > .sortable:active {
>+        background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
>+    }
>+
>+    .table > .header > :matches(.sort-ascending, .sort-descending) {
>+        background: var(--background-color-selected);
>+    }
>+
>+    .table > .header > :matches(.sort-ascending, .sort-descending)::after {
>+        filter: invert();
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>index a8f4b2d63e4..f615034989c 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
>@@ -131,6 +131,15 @@
> }
> 
> @media (prefers-dark-interface) {
>+    .text-editor > .CodeMirror .execution-line {
>+        background-color: hsla(89, 100%, 51%, 0.25) !important;
>+    }
>+
>+    .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext),
>+    .text-editor > .CodeMirror .execution-range-highlight:not(.CodeMirror-selectedtext) + .CodeMirror-widget {
>+        background-color: hsl(99, 85%, 30%);
>+    }
>+
>     .text-editor > .CodeMirror .execution-line.primary .CodeMirror-linenumber::after {
>         filter: brightness(0.9) saturate(2.8);
>     }
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>index 7827b3d8ff6..8a70eace9ae 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
>@@ -54,3 +54,9 @@
> .data-grid.timeline td.graph-column .timeline-record-bar {
>     top: 2px;
> }
>+
>+@media (prefers-dark-interface) {
>+    .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 8f7398da3bd..ad7239c3480 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
>@@ -116,3 +116,9 @@
> .heap-snapshot-record .icon {
>     content: url(../Images/HeapSnapshot.svg);
> }
>+
>+@media (prefers-dark-interface) {
>+    .time-icon .icon {
>+        filter: invert();
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>index 0314eb71fb4..5181207ad87 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
>@@ -233,3 +233,18 @@ body[dir=ltr] .timeline-overview > .scroll-container > .scroll-width-sizer {
> body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer {
>     right: 0;
> }
>+
>+@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);
>+    }
>+
>+    .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
>+    .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
>+        border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
>index e9da67fa57b..e631a6c5e92 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
>@@ -86,3 +86,13 @@
>     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;
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Toolbar.css b/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
>index 580c4c21911..79bd3862a20 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
>@@ -222,3 +222,75 @@ body.latest-mac.window-inactive .toolbar .dashboard-container {
>         display: none;
>     }
> }
>+
>+@media (prefers-dark-interface) {
>+    body .toolbar {
>+        background-image: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 22%));
>+        box-shadow: none;
>+    }
>+
>+    body.window-inactive .toolbar {
>+        background-color: var(--background-color);
>+    }
>+
>+    body.latest-mac .toolbar .item.button,
>+    body.latest-mac .toolbar .search-bar > input[type="search"] {
>+        background-image: none;
>+        background-color: var(--button-background-color);
>+        border-color: var(--button-background-color);
>+        border-top-color: hsla(0, 100%, 100%, 0.2);
>+        box-shadow: none;
>+    }
>+
>+    body.latest-mac .toolbar .search-bar > input[type="search"] {
>+        color: var(--text-color);
>+    }
>+
>+    body.latest-mac .toolbar .search-bar > input[type="search"]:focus {
>+        color: var(--text-color-active);
>+
>+        /* FIXME: Use native outline for the default theme as well. */
>+        box-shadow: unset;
>+        transition: unset;
>+        outline: -webkit-focus-ring-color auto 5px;
>+        outline-offset: -3px;
>+    }
>+
>+    body.latest-mac .toolbar .search-bar > input[type="search"]::placeholder {
>+        color: var(--text-color-secondary);
>+    }
>+
>+    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::placeholder {
>+        color: var(--text-color-tertiary);
>+    }
>+
>+    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"]::-webkit-search-results-button {
>+        /* Setting `color` has no effect on the magnifying glass icon. */
>+        opacity: 0.5;
>+    }
>+
>+    body.latest-mac .toolbar .dashboard-container {
>+        background-image: none;
>+        background-color: var(--dashboard-background-color);
>+        border-color: var(--dashboard-background-color);
>+        border-top-color: hsla(0, 100%, 100%, 0.1);
>+        box-shadow: none;
>+    }
>+
>+    body.latest-mac .toolbar .item.button:active {
>+        background-image: none;
>+        border-top-color: hsla(0, 100%, 100%, 0.2);
>+        box-shadow: none;
>+    }
>+
>+    body.latest-mac.window-inactive .toolbar .item.button,
>+    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
>+    body.latest-mac.window-inactive .toolbar .dashboard-container {
>+        opacity: 1;
>+        color: var(--glyph-color);
>+        border-color: transparent;
>+        border-top-color: hsla(0, 100%, 100%, 0.1);
>+        background-image: none;
>+        background: var(--button-background-color-inactive);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
>index b05ac477ade..1ad83e52873 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
>@@ -254,3 +254,9 @@ body[dir=rtl] .tree-outline .item .status {
> .tree-outline .item .alternate-subtitle::before {
>     content: " â ";
> }
>+
>+@media (prefers-dark-interface) {
>+    .tree-outline .item .subtitle {
>+        color: var(--text-color-secondary);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index 288372c9783..b7d51a290dc 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -138,3 +138,136 @@ body.window-inactive * {
>     --border-color: hsl(0, 0%, 85%);
>     --border-color-dark: hsl(0, 0%, 72%);
> }
>+
>+@media (prefers-dark-interface) {
>+
>+    /* FIXME: Use CSS4 color functions once they're available. */
>+    :root {
>+        color: var(--text-color);
>+
>+        --text-color: hsl(0, 0%, 88%);
>+        --text-color-active: white;
>+        --text-color-secondary: hsl(0, 0%, 65%);
>+
>+        /* Disabled text/glyphs */
>+        --text-color-tertiary: hsl(0, 0%, 50%);
>+
>+        /* Dividers, separators, background fills */
>+        --text-color-quaternary: hsl(0, 0%, 33%);
>+
>+        /* Deprecated */
>+        --text-color-gray-dark: hsl(0, 0%, 75%);
>+        --text-color-gray-medium: var(--text-color-secondary);
>+
>+        --background-color: hsl(0, 0%, 24%);
>+        --background-color-secondary: hsl(0, 0%, 27%);
>+        --background-color-tertiary: hsl(0, 0%, 31%);
>+
>+        --background-color-content: hsl(0, 0%, 21%);
>+        --background-color-code: hsl(0, 0%, 21%);
>+
>+        --background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
>+        --background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
>+
>+        --color-button: hsl(0, 0%, 99%);
>+        --color-button-active: var(--text-color-active);
>+
>+        --selected-foreground-color: var(--text-color-active);
>+        --selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
>+        --selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
>+        --selected-background-color: hsl(219, 80%, 43%);
>+        --selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
>+        --selected-background-color-active: hsl(218, 85%, 62%);
>+        --selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
>+        --selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
>+
>+        --glyph-color: hsl(0, 0%, 80%);
>+        --glyph-color-pressed: hsl(0, 0%, 100%);
>+        --glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
>+        --glyph-color-active: hsl(212, 100%, 71%);
>+        --glyph-color-active-pressed: hsl(212, 92%, 74%);
>+        --glyph-color-inactive: hsl(0, 0%, 36%);
>+
>+        --border-color: hsl(0, 0%, 33%);
>+        --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
>+
>+        --border-color-secondary: hsl(0, 0%, 27%);
>+
>+        --button-background-color: hsl(0, 0%, 43%);
>+        --button-background-color-hover: var(--button-background-color);
>+        --button-background-color-pressed: hsl(0, 0%, 55%);
>+        --button-background-color-inactive: hsl(0, 0%, 28%);
>+
>+        --dashboard-background-color: hsl(0, 0%, 36%);
>+
>+        --panel-background-color: hsl(0, 0%, 24%);
>+        --panel-background-color-light: hsl(0, 0%, 29%);
>+
>+        --error-text-color: hsl(0, 86%, 65%);
>+
>+        --green-highlight-background-color: hsl(120, 15%, 28%);
>+        --green-highlight-text-color: hsl(80, 75%, 80%);
>+
>+        --yellow-highlight-background-color: hsl(13, 20%, 26%);
>+        --yellow-highlight-text-color: hsl(50, 96%, 87%);
>+
>+        --value-changed-highlight: var(--green-highlight-background-color);
>+        --value-visual-highlight: var(--yellow-highlight-background-color);
>+
>+        --syntax-highlight-number-color: hsl(276, 100%, 85%);
>+        --syntax-highlight-boolean-color: hsl(299, 71%, 80%);
>+        --syntax-highlight-string-color: hsl(28, 84%, 63%);
>+        --syntax-highlight-link-color: hsl(223, 100%, 77%);
>+        --syntax-highlight-regexp-color: hsl(20, 100%, 64%);
>+        --syntax-highlight-symbol-color: hsl(172, 45%, 65%);
>+        --syntax-highlight-comment-color: hsl(119, 40%, 72%);
>+        --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
>+
>+        --console-secondary-text-color: hsla(0, 0%, 100%, 0.45);
>+
>+        --warning-background-color: hsla(21, 100%, 51%, 0.12);
>+        --error-background-color: hsla(0, 100%, 50%, 0.15);
>+
>+        --network-header-color: hsl(204, 52%, 55%);
>+        --network-system-color: hsl(79, 95%, 50%);
>+        --network-pseudo-header-color: hsl(312, 55%, 61%);
>+        --network-error-color: hsl(0, 54%, 55%);
>+
>+        --even-zebra-stripe-row-background-color: var(--background-color);
>+        --odd-zebra-stripe-row-background-color: var(--background-color-secondary);
>+        --transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 100%, 0.03) 50%, hsla(0, 0%, 100%, 0.03)) top left / 100% 40px;
>+
>+        --search-highlight-text-color: hsl(60, 100%, 50%);
>+        --search-highlight-text-color-active: hsl(0, 0%, 0%);
>+        --search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
>+        --search-highlight-background-color-active: hsl(60, 100%, 50%);
>+        --search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
>+
>+        /* 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);
>+
>+        --console-message-separator: var(--text-color-quaternary);
>+    }
>+
>+    body.window-inactive {
>+        --selected-background-color: hsla(212, 92%, 64%, 0.5);
>+
>+        --glyph-color-active: var(--selected-background-color);
>+        --glyph-color: hsl(0, 0%, 52%);
>+        --glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
>+    }
>+
>+    body.window-inactive * {
>+        /* FIXME: these properties are duplicated so that they have higher specificity than WebKit's stylesheet.
>+        Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
>+        When merging to open source, we should guard the existing .window-inactive style with
>+        '@media not all' to avoid applying the definition too broadly. */
>+        --border-color: hsl(0, 0%, 33%);
>+        --border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css
>index 436810ab3be..3fa13dacd82 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css
>@@ -79,3 +79,19 @@ body[dir=rtl] .web-socket.content-view .icon {
>     background-color: hsl(50, 100%, 90%);
>     color: hsl(3, 96%, 27%);
> }
>+
>+@media (prefers-dark-interface) {
>+    .web-socket.content-view .data-grid table.data tr.revealed {
>+        border-bottom-color: hsla(0, 0%, var(--foreground-lightness), 0.1);
>+    }
>+
>+    .web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing {
>+        background-color: var(--green-highlight-background-color);
>+        color: var(--green-highlight-text-color);
>+    }
>+
>+    .web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame {
>+        background-color: var(--yellow-highlight-background-color);
>+        color: var(--yellow-highlight-text-color);
>+    }
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css
>index 3e60ab003cd..975f2825ad9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css
>@@ -61,3 +61,11 @@ body[dir=rtl] .popover .xhr-breakpoint-content > .editor-wrapper > .editor {
>     width: calc(100% - 2px);
>     overflow: hidden;
> }
>+
>+@media (prefers-dark-interface) {
>+    .popover .xhr-breakpoint-content > .editor-wrapper > .editor {
>+        -webkit-appearance: unset;
>+        border-color: var(--text-color-quaternary);
>+        background: var(--background-color-code);
>+    }
>+}

Flags:

mattbaker: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 189673: 349923 | 349924 | 349927 | 350152 | 350160