<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[236237] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/236237">236237</a></dd>
<dt>Author</dt> <dd>nvasilyev@apple.com</dd>
<dt>Date</dt> <dd>2018-09-19 19:31:42 -0700 (Wed, 19 Sep 2018)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: move DarkMode.css rules into appropriate CSS files
https://bugs.webkit.org/show_bug.cgi?id=189673

Reviewed by Matt Baker.

* 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):</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBezierEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBreakpointActionViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBreakpointPopoverControllercss">trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsButtonNavigationItemcss">trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsButtonToolbarItemcss">trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCallFrameViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCanvasContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCanvasOverviewContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCanvasTabContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorOverridescss">trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsConsoleMessageViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsConsolePromptcss">trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDefaultDashboardViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDetailsSectioncss">trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDividerNavigationItemcss">trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsEditingcss">trunk/Source/WebInspectorUI/UserInterface/Views/Editing.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFindBannercss">trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFontResourceContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFormattedValuecss">trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsGeneralStyleDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsHoverMenucss">trunk/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsImageResourceContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchcss">trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLogContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsMaincss">trunk/Source/WebInspectorUI/UserInterface/Views/Main.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkResourceDetailViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkTableContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNewTabContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsOpenResourceDialogcss">trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsProgressViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ProgressView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsQuickConsolecss">trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRecordingActionTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRecordingContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsRecordingStateDetailsSidebarPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceHeadersContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceSizesContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTimingBreakdownViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsScopeBarcss">trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSearchBarcss">trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsShaderProgramContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsShaderProgramTreeElementcss">trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTextEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetCSSStyleDeclarationEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetCSSStyleDeclarationSectioncss">trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetRulesStyleDetailsPanelcss">trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSyntaxHighlightingDefaultThemecss">trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTabBarcss">trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTablecss">trunk/Source/WebInspectorUI/UserInterface/Views/Table.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTextEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineIconscss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsToolbarcss">trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss">trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVariablescss">trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsWebSocketContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsXHRBreakpointPopovercss">trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDarkModecss">trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/ChangeLog       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -1,3 +1,385 @@
</span><ins>+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 Matt Baker.
+
+        * 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):
+
</ins><span class="cx"> 2018-09-17  Devin Rousso  <drousso@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: generate CSSKeywordCompletions from backend values
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html      2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -239,8 +239,6 @@
</span><span class="cx">     <link rel="stylesheet" href="Controllers/CodeMirrorDragToAdjustNumberController.css">
</span><span class="cx">     <link rel="stylesheet" href="Controllers/CodeMirrorTokenTrackingController.css">
</span><span class="cx"> 
</span><del>-    <link rel="stylesheet" href="Views/DarkMode.css">
-
</del><span class="cx">     <link rel="stylesheet" href="Debug/UncaughtExceptionReporter.css">
</span><span class="cx">     <link rel="stylesheet" href="Debug/DebugContentView.css">
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBezierEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -149,3 +149,33 @@
</span><span class="cx"> body[dir=rtl] .bezier-editor > .number-input-container > input {
</span><span class="cx">     padding-right: var(--bezier-editor-number-input-padding-start);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBreakpointActionViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -111,3 +111,24 @@
</span><span class="cx">     width: 336px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content.wide width */
</span><span class="cx">     overflow: hidden;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBreakpointPopoverControllercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css  2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css     2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -89,3 +89,17 @@
</span><span class="cx">     margin-right: 0;
</span><span class="cx">     margin-left: var(--edit-breakpoint-popover-option-margin-end);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsButtonNavigationItemcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -72,3 +72,9 @@
</span><span class="cx"> .navigation-bar .item.button.disabled > .glyph {
</span><span class="cx">     color: var(--glyph-color-disabled);
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .navigation-bar .item.button {
+        color: var(--text-color-secondary);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsButtonToolbarItemcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -61,3 +61,23 @@
</span><span class="cx"> body.window-inactive .toolbar .item.button.disabled {
</span><span class="cx">     opacity: 0.35 !important;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCallFrameViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -78,3 +78,19 @@
</span><span class="cx">     white-space: nowrap;
</span><span class="cx">     color: hsla(0, 0%, 0%, 0.2);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCanvasContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasContentView.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -54,3 +54,9 @@
</span><span class="cx">     filter: grayscale();
</span><span class="cx">     opacity: 0.5;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .content-view.canvas:not(.tab) {
+        background-color: unset;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCanvasOverviewContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasOverviewContentView.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -186,3 +186,40 @@
</span><span class="cx"> .popover-content > .tree-outline .item.recording:hover > .icon {
</span><span class="cx">     filter: invert();
</span><span class="cx"> }
</span><ins>+
+@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
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCanvasTabContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CanvasTabContentView.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -42,3 +42,20 @@
</span><span class="cx"> .content-view.tab.canvas .navigation-bar > .item .shader-program > .icon {
</span><span class="cx">     content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);
</span><span class="cx"> }
</span><ins>+
+@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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorOverridescss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css  2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css     2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -181,3 +181,23 @@
</span><span class="cx"> .show-invalid-characters .CodeMirror .cm-invalidchar {
</span><span class="cx">     display: initial;
</span><span class="cx"> }
</span><ins>+
+@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%);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -75,3 +75,13 @@
</span><span class="cx">     background-color: var(--selected-background-color);
</span><span class="cx">     color: white;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .completion-suggestions {
+        background-color: var(--overlay-background);
+    }
+
+    .completion-suggestions-container > .item {
+        color: var(--text-color);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsComputedStyleDetailsPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -42,3 +42,13 @@
</span><span class="cx"> .details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
</span><span class="cx">     background-color: white;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsoleMessageViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css   2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css      2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -280,3 +280,25 @@
</span><span class="cx"> .console-top-level-message .object-tree .object-tree {
</span><span class="cx">     display: inline-block;
</span><span class="cx"> }
</span><ins>+
+@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%);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsolePromptcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -35,3 +35,9 @@
</span><span class="cx"> .console-prompt > .CodeMirror-scroll {
</span><span class="cx">     overflow: hidden;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .console-prompt {
+        background-color: var(--background-color-code);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMNodeDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css   2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.css      2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -60,3 +60,9 @@
</span><span class="cx">     opacity: 0;
</span><span class="cx">     -webkit-appearance: none;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .sidebar > .panel.dom-node-details .details-section.dom-node-event-listeners > .header > .filter:hover {
+        filter: brightness(1.25);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeOutlinecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -306,3 +306,41 @@
</span><span class="cx"> .highlight .selection-area {
</span><span class="cx">     animation: "dom-tree-outline-highlight-fadeout" 2s;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDarkModecss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DarkMode.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -1,1379 +0,0 @@
</span><del>-/*
- * 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);
-    }
-
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -428,3 +428,30 @@
</span><span class="cx"> body:not(.window-inactive, .window-docked-inactive) .data-grid:matches(:focus, .force-focus) tr.editable.selected .cell-content > input {
</span><span class="cx">     color: white;
</span><span class="cx"> }
</span><ins>+
+@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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -22,6 +22,7 @@
</span><span class="cx">  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
</span><span class="cx">  * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><ins>+
</ins><span class="cx"> .toolbar .dashboard.debugger {
</span><span class="cx">     display: flex;
</span><span class="cx">     flex-wrap: nowrap;
</span><span class="lines">@@ -199,3 +200,26 @@
</span><span class="cx">     width: 14px;
</span><span class="cx">     height: 14px;
</span><span class="cx"> }
</span><ins>+
+@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));
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDefaultDashboardViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -181,3 +181,39 @@
</span><span class="cx"> @keyframes console-item-pulse {
</span><span class="cx">     50% { opacity: 0.6; }
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDetailsSectioncss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -332,3 +332,35 @@
</span><span class="cx">         border-width: 0.5px !important;
</span><span class="cx">     }
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDividerNavigationItemcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -37,3 +37,10 @@
</span><span class="cx">         width: 0.5px;
</span><span class="cx">     }
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .navigation-bar .item.divider {
+        --divider-background: hsl(0, 0%, 40%);
+        background-image: linear-gradient(var(--divider-background), var(--divider-background));
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsEditingcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Editing.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Editing.css      2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Editing.css 2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -51,3 +51,14 @@
</span><span class="cx"> .editing br {
</span><span class="cx">     display: none;
</span><span class="cx"> }
</span><ins>+
+@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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFindBannercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css   2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css      2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -315,4 +315,14 @@
</span><span class="cx">     .find-banner > button.segmented > .glyph {
</span><span class="cx">         filter: invert();
</span><span class="cx">     }
</span><ins>+
+    .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;
+    }
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFontResourceContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css      2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css 2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -108,3 +108,30 @@
</span><span class="cx">     vertical-align: bottom;
</span><span class="cx">     background-color: lightgrey;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFormattedValuecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -77,3 +77,20 @@
</span><span class="cx">     left: -1px;
</span><span class="cx">     right: -2px;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsGeneralStyleDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css      2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GeneralStyleDetailsSidebarPanel.css 2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -213,3 +213,17 @@
</span><span class="cx"> .sidebar > .panel.details.css-style > .content.filter-in-progress .filter-property-non-matching {
</span><span class="cx">     opacity: 0.5;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsHoverMenucss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -65,3 +65,9 @@
</span><span class="cx"> .hover-menu.visible > img {
</span><span class="cx">     pointer-events: all;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .hover-menu > svg > :matches(path, rect) {
+        stroke: hsla(0, 0%, 100%, 0.3);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsImageResourceContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -45,3 +45,9 @@
</span><span class="cx"> 
</span><span class="cx">     margin: auto 0;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .content-view.resource.image {
+        background: var(--background-color-content);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -118,3 +118,9 @@
</span><span class="cx"> .inline-swatch-variable-popover .CodeMirror pre {
</span><span class="cx">     padding: 0 3px;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .inline-swatch {
+        background: var(--background-color);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLogContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -241,3 +241,80 @@
</span><span class="cx">         /* Accessible label alternative for icon indicating console input/output/warning/error, etc. */
</span><span class="cx">         alt: attr(data-labelprefix);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsMaincss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -380,3 +380,24 @@
</span><span class="cx">     background-size: 20px 20px;
</span><span class="cx">     background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
</span><span class="cx"> }
</span><ins>+
+@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%);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkResourceDetailViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkResourceDetailView.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -85,3 +85,22 @@
</span><span class="cx">     -webkit-user-select: text;
</span><span class="cx">     white-space: nowrap;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNetworkTableContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css      2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css 2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -165,3 +165,9 @@
</span><span class="cx"> .waterfall .block.response {
</span><span class="cx">     background-color: var(--network-response-color);
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .network-table .cell.domain > .lock {
+        filter: var(--filter-invert);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsNewTabContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -88,3 +88,9 @@
</span><span class="cx">     display: block;
</span><span class="cx">     margin-top: 8px;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .new-tab.tab.content-view {
+        background-color: var(--background-color-content);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreePropertyTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -150,3 +150,24 @@
</span><span class="cx"> .object-tree-property .value.error {
</span><span class="cx">     color: red;
</span><span class="cx"> }
</span><ins>+
+@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%);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsObjectTreeViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -132,3 +132,18 @@
</span><span class="cx"> .object-tree-property :matches(.formatted-string, .formatted-regexp) {
</span><span class="cx">     white-space: nowrap;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsOpenResourceDialogcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css   2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css      2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -201,3 +201,27 @@
</span><span class="cx"> .open-resource-dialog > .tree-outline .item.selected .subtitle {
</span><span class="cx">     color: hsla(0, 0%, 100%, 0.9);
</span><span class="cx"> }
</span><ins>+
+@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();
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsProgressViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ProgressView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ProgressView.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ProgressView.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -54,3 +54,17 @@
</span><span class="cx">     height: 24px;
</span><span class="cx">     margin: 0 auto;
</span><span class="cx"> }
</span><ins>+
+@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();
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsQuickConsolecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -106,3 +106,20 @@
</span><span class="cx">     color: var(--selected-foreground-color);
</span><span class="cx">     opacity: 1;
</span><span class="cx"> }
</span><ins>+
+@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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRecordingActionTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css   2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.css      2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -219,3 +219,23 @@
</span><span class="cx">     height: 12px;
</span><span class="cx">     margin-top: 2px;
</span><span class="cx"> }
</span><ins>+
+@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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRecordingContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingContentView.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -86,3 +86,18 @@
</span><span class="cx">     position: absolute;
</span><span class="cx">     z-index: 10;
</span><span class="cx"> }
</span><ins>+
+@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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsRecordingStateDetailsSidebarPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingStateDetailsSidebarPanel.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -42,3 +42,9 @@
</span><span class="cx"> .sidebar > .panel.details.recording-state > .content > .data-grid .inline-swatch {
</span><span class="cx">     vertical-align: -1px;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .sidebar > .panel.details.recording-state > .content > .data-grid tr.modified {
+        color: var(--green-highlight-text-color);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceHeadersContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css   2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css      2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -83,3 +83,9 @@
</span><span class="cx">     background-color: hsla(53, 83%, 53%, 0.2);
</span><span class="cx">     border-bottom: 1px solid hsl(47, 82%, 60%);
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .resource-headers .value {
+        color: var(--text-color);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceSizesContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceSizesContentView.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -116,3 +116,9 @@
</span><span class="cx">     height: 10px;
</span><span class="cx">     -webkit-margin-start: 3px;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .resource-sizes > .content .label {
+        color: var(--text-color-secondary);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResourceTimingBreakdownViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css  2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTimingBreakdownView.css     2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -71,3 +71,22 @@
</span><span class="cx">     top: 1px;
</span><span class="cx">     height: 14px;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsScopeBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -115,3 +115,9 @@
</span><span class="cx"> .scope-bar > li.selected:active {
</span><span class="cx">     background-color: var(--selected-background-color-active);
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .scope-bar > li {
+        color: var(--text-color);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSearchBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SearchBar.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -52,3 +52,20 @@
</span><span class="cx"> .search-bar > input[type="search"]:not(:placeholder-shown) {
</span><span class="cx">     background-color: white;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSettingsTabContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -143,3 +143,13 @@
</span><span class="cx">     margin-left: var(--settings-input-number-margin-end);
</span><span class="cx">     margin-right: var(--settings-input-number-margin-start);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsShaderProgramContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramContentView.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -60,3 +60,14 @@
</span><span class="cx"> .content-view.shader-program > .text-editor.shader > .CodeMirror {
</span><span class="cx">     top: 18px;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsShaderProgramTreeElementcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -40,3 +40,9 @@
</span><span class="cx"> .item.shader-program.disabled > * {
</span><span class="cx">     opacity: 0.5;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .item.shader-program .status > img {
+        filter: invert();
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSourceCodeTextEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -184,6 +184,30 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> @media (prefers-dark-interface) {
</span><ins>+    .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);
+    }
+
</ins><span class="cx">     .source-code.text-editor > .CodeMirror .thread-widget.inline {
</span><span class="cx">         background-color: hsl(99, 85%, 34%);
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetCSSStyleDeclarationEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -150,3 +150,26 @@
</span><span class="cx"> .spreadsheet-style-declaration-editor .property:not(.disabled) .token-comment {
</span><span class="cx">     color: var(--syntax-highlight-comment-color);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetCSSStyleDeclarationSectioncss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -129,3 +129,38 @@
</span><span class="cx">     display: inline-block;
</span><span class="cx">     padding-left: var(--css-declaration-horizontal-padding);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSpreadsheetRulesStyleDetailsPanelcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -141,3 +141,14 @@
</span><span class="cx"> .style-spreadsheet .declarations:hover input[type="checkbox"] {
</span><span class="cx">     visibility: visible;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSyntaxHighlightingDefaultThemecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -124,3 +124,37 @@
</span><span class="cx"> .cm-s-default .basic-block-has-not-executed.cm-m-xml.cm-attribute {
</span><span class="cx">     color: rgb(201, 192, 166);
</span><span class="cx"> }
</span><ins>+
+@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%);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTabBarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css       2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css  2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -357,3 +357,63 @@
</span><span class="cx">     z-index: 2;
</span><span class="cx">     pointer-events: none;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .tab-bar {
+        background-image: none;
+        background-color: hsl(0, 0%, 23%);
+
+        --tab-item-border-color: hsl(0, 0%, 36%);
+
+        /* FIXME: <https://webkit.org/b/189769> Dark Mode: use semantic color names */
+        --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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTablecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Table.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Table.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Table.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -174,3 +174,22 @@
</span><span class="cx"> .table .cell.align-center {
</span><span class="cx">     text-align: center;
</span><span class="cx"> }
</span><ins>+
+@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();
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTextEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css   2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css      2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -131,6 +131,15 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> @media (prefers-dark-interface) {
</span><ins>+    .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%);
+    }
+
</ins><span class="cx">     .text-editor > .CodeMirror .execution-line.primary .CodeMirror-linenumber::after {
</span><span class="cx">         filter: brightness(0.9) saturate(2.8);
</span><span class="cx">     }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -54,3 +54,9 @@
</span><span class="cx"> .data-grid.timeline td.graph-column .timeline-record-bar {
</span><span class="cx">     top: 2px;
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .data-grid th:matches(.sort-ascending, .sort-descending) {
+        background: var(--background-color-selected);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineIconscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css        2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css   2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -116,3 +116,9 @@
</span><span class="cx"> .heap-snapshot-record .icon {
</span><span class="cx">     content: url(../Images/HeapSnapshot.svg);
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .time-icon .icon {
+        filter: invert();
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css     2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css        2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -233,3 +233,18 @@
</span><span class="cx"> body[dir=rtl] .timeline-overview > .scroll-container > .scroll-width-sizer {
</span><span class="cx">     right: 0;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineRecordingContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -86,3 +86,13 @@
</span><span class="cx">     margin-left: 8px;
</span><span class="cx">     vertical-align: middle;
</span><span class="cx"> }
</span><ins>+
+@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;
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsToolbarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css      2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css 2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -222,3 +222,75 @@
</span><span class="cx">         display: none;
</span><span class="cx">     }
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTreeOutlinecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css  2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css     2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -254,3 +254,9 @@
</span><span class="cx"> .tree-outline .item .alternate-subtitle::before {
</span><span class="cx">     content: " — ";
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+    .tree-outline .item .subtitle {
+        color: var(--text-color-secondary);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVariablescss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css    2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css       2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -138,3 +138,135 @@
</span><span class="cx">     --border-color: hsl(0, 0%, 85%);
</span><span class="cx">     --border-color-dark: hsl(0, 0%, 72%);
</span><span class="cx"> }
</span><ins>+
+@media (prefers-dark-interface) {
+
+    :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 * {
+        /* 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 */
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsWebSocketContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -79,3 +79,19 @@
</span><span class="cx">     background-color: hsl(50, 100%, 90%);
</span><span class="cx">     color: hsl(3, 96%, 27%);
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsXHRBreakpointPopovercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css (236236 => 236237)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css 2018-09-20 00:59:04 UTC (rev 236236)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointPopover.css    2018-09-20 02:31:42 UTC (rev 236237)
</span><span class="lines">@@ -61,3 +61,11 @@
</span><span class="cx">     width: calc(100% - 2px);
</span><span class="cx">     overflow: hidden;
</span><span class="cx"> }
</span><ins>+
+@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);
+    }
+}
</ins></span></pre>
</div>
</div>

</body>
</html>