Bug 1421389 - Update dark theme with lower-contrast sidebars. r=pbro draft
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 19 Jan 2018 02:35:44 -0500
changeset 722546 a4285363738e9bce736ec84d085339f63e28efdc
parent 722528 ee16cc590134dad9a591ff4b25c7dfc6c80f0e66
child 746632 47d538335316042cac56d4858a15b11a2762187e
push id96168
push userbmo:gl@mozilla.com
push dateFri, 19 Jan 2018 07:36:07 +0000
reviewerspbro
bugs1421389
milestone59.0a1
Bug 1421389 - Update dark theme with lower-contrast sidebars. r=pbro MozReview-Commit-ID: 4qgFZfIfDoF
devtools/client/debugger/new/debugger.css
devtools/client/inspector/layout/components/Accordion.css
devtools/client/themes/rules.css
devtools/client/themes/variables.css
--- 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. */