Bug 1421389 - Update dark theme with lower-contrast sidebars. r=pbro
MozReview-Commit-ID: 4qgFZfIfDoF
--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
@@ -556,16 +556,20 @@ button:focus {
display: flex;
position: relative;
flex: 1;
background-color: var(--theme-tab-toolbar-background);
height: calc(100% - 1px);
overflow: hidden;
}
+.theme-dark .editor-pane {
+ background-color: var(--theme-toolbar-background);
+}
+
.editor-container {
width: 100%;
}
.search-container {
position: absolute;
top: 0;
left: 0;
@@ -3204,17 +3208,17 @@ html .breakpoints-list .breakpoint.pause
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
:root {
--accordion-header-background: var(--theme-toolbar-background);
}
:root.theme-dark {
- --accordion-header-background: #141416;
+ --accordion-header-background: #222225;
}
.accordion {
background-color: var(--theme-sidebar-background);
width: 100%;
}
.accordion ._header {
@@ -3293,17 +3297,17 @@ html .breakpoints-list .breakpoint.pause
background-color: var(--theme-toolbar-background);
}
html[dir="rtl"] .command-bar {
border-right: 1px solid var(--theme-splitter-color);
}
.theme-dark .command-bar {
- background-color: var(--theme-tab-toolbar-background);
+ background-color: var(--theme-toolbar-background);
}
img.pause,
img.stepOver,
img.stepIn,
img.stepOut,
img.resume {
background-color: var(--theme-body-color);
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -10,17 +10,17 @@
* any changes to the existing styles.
*/
:root {
--accordion-header-background: var(--theme-toolbar-background);
}
:root.theme-dark {
- --accordion-header-background: #141416;
+ --accordion-header-background: #222225;
}
.accordion {
background-color: var(--theme-sidebar-background);
width: 100%;
}
.accordion ._header {
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -9,17 +9,17 @@
--rule-header-background-color: var(--theme-toolbar-background);
--rule-flex-toggle-color: var(--grey-90);
--rule-shape-toggle-color: var(--grey-90);
}
:root.theme-dark {
--rule-highlight-background-color: #521C76;
--rule-overridden-item-border-color: var(--theme-content-color1);
- --rule-header-background-color: #141416;
+ --rule-header-background-color: #222225;
--rule-flex-toggle-color: var(--grey-10);
--rule-shape-toggle-color: var(--grey-10);
}
:root.theme-firebug {
--rule-highlight-background-color: var(--theme-highlight-yellow);
--rule-property-name: darkgreen;
--rule-property-value: darkblue;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -98,49 +98,49 @@
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
--theme-codemirror-gutter-background: #f4f4f4;
--theme-messageCloseButtonFilter: invert(0);
}
:root.theme-dark {
--theme-body-background: var(--grey-80);
- --theme-sidebar-background: var(--grey-90);
+ --theme-sidebar-background: #1B1B1D;
--theme-contrast-background: #ffb35b;
/* Toolbar */
--theme-tab-toolbar-background: var(--grey-90);
- --theme-toolbar-background: var(--grey-90);
+ --theme-toolbar-background: #1B1B1D;
--theme-toolbar-color: var(--grey-40);
--theme-toolbar-selected-color: white;
--theme-toolbar-checked-color: #75BFFF;
--theme-toolbar-highlighted-color: var(--green-50);
--theme-toolbar-background-hover: #20232B;
- --theme-toolbar-background-alt: #2F343E;
+ --theme-toolbar-background-alt: #1B1B1D;
--theme-toolbar-hover: #252526;
--theme-toolbar-hover-active: #252526;
/* Selection */
--theme-selection-background: #204E8A;
--theme-selection-background-hover: #353B48;
--theme-selection-color: #ffffff;
/* Border color that splits the toolbars/panels/headers.
* This needs to be sync with commandline.css and commandline-browser.css. */
--theme-splitter-color: #3c3c3d;
--theme-comment: #939393;
--theme-comment-alt: #939393;
- --theme-body-color: var(--grey-40);
+ --theme-body-color: #909090;
--theme-body-color-alt: var(--grey-50);
--theme-body-color-inactive: var(--grey-40);
--theme-content-color1: var(--grey-30);
--theme-content-color2: var(--grey-40);
- --theme-content-color3: #939393;
+ --theme-content-color3: #58575c;
--theme-highlight-green: #86DE74;
--theme-highlight-blue: #75BFFF;
--theme-highlight-purple: #B98EFF;
--theme-highlight-red: #FF7DE9;
--theme-highlight-yellow: #FFF89E;
/* These theme-highlight color variables have not been photonized. */