Bug 1102369 - Convert existing devtools colors to CSS variables - part 2;r=vporof
authorBrian Grinstead <bgrinstead@mozilla.com>
Thu, 20 Nov 2014 12:10:32 -0800
changeset 216608 d99483864a61044dc7694489298cdec3dd3bf2f6
parent 216607 38d12e852c4bbbd167401be9c52b397115fe2018
child 216609 709fd162929e2c0b9650f02e7a48f65d84095d28
push id10067
push userbgrinstead@mozilla.com
push dateThu, 20 Nov 2014 22:10:49 +0000
treeherderfx-team@d99483864a61 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1102369
milestone36.0a1
Bug 1102369 - Convert existing devtools colors to CSS variables - part 2;r=vporof
browser/devtools/styleinspector/computed-view.js
browser/themes/shared/devtools/canvasdebugger.inc.css
browser/themes/shared/devtools/debugger.inc.css
browser/themes/shared/devtools/inspector.css
browser/themes/shared/devtools/markup-view.css
browser/themes/shared/devtools/netmonitor.inc.css
browser/themes/shared/devtools/profiler.inc.css
browser/themes/shared/devtools/ruleview.css
browser/themes/shared/devtools/shadereditor.inc.css
browser/themes/shared/devtools/splitview.css
browser/themes/shared/devtools/styleeditor.css
browser/themes/shared/devtools/toolbars.inc.css
browser/themes/shared/devtools/webaudioeditor.inc.css
browser/themes/shared/devtools/webconsole.inc.css
browser/themes/shared/devtools/widgets.inc.css
--- a/browser/devtools/styleinspector/computed-view.js
+++ b/browser/devtools/styleinspector/computed-view.js
@@ -569,17 +569,20 @@ CssHtmlTree.prototype = {
     CssHtmlTree.propertyNames = [];
 
     // Here we build and cache a list of css properties supported by the browser
     // We could use any element but let's use the main document's root element
     let styles = this.styleWindow.getComputedStyle(this.styleDocument.documentElement);
     let mozProps = [];
     for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
       let prop = styles.item(i);
-      if (prop.charAt(0) == "-") {
+      if (prop.startsWith("--")) {
+        // Skip any CSS variables used inside of browser CSS files
+        continue;
+      } else if (prop.startsWith("-")) {
         mozProps.push(prop);
       } else {
         CssHtmlTree.propertyNames.push(prop);
       }
     }
 
     CssHtmlTree.propertyNames.sort();
     CssHtmlTree.propertyNames.push.apply(CssHtmlTree.propertyNames,
--- a/browser/themes/shared/devtools/canvasdebugger.inc.css
+++ b/browser/themes/shared/devtools/canvasdebugger.inc.css
@@ -10,26 +10,18 @@
 %define gutterWidth 3em
 %define gutterPaddingStart 22px
 
 /* Reload and waiting notices */
 
 .notice-container {
   margin-top: -50vh;
   font-size: 120%;
-}
-
-.theme-dark .notice-container {
-  background-color: #343c45; /* Toolbars */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .notice-container {
-  background-color: #f0f1f2; /* Toolbars */
-  color: #585959; /* Grey foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
 }
 
 #empty-notice > button {
   min-width: 30px;
   min-height: 28px;
   margin: 0;
   list-style-image: url(profiler-stopwatch.svg);
 }
@@ -107,24 +99,19 @@
   font-size: 80%;
 }
 
 .snapshot-item-save {
   padding-bottom: 2px;
   font-size: 90%;
 }
 
-.theme-dark .snapshot-item-calls,
-.theme-dark .snapshot-item-save {
-  color: #b6babf; /* Foreground (Text) - Grey */
-}
-
-.theme-light .snapshot-item-calls,
-.theme-light .snapshot-item-save {
-  color: #585959; /* Foreground (Text) - Grey */
+.snapshot-item-calls,
+.snapshot-item-save {
+  color: var(--theme-body-color-alt);
 }
 
 .snapshot-item-save {
   text-decoration: underline;
   cursor: pointer;
 }
 
 .snapshot-item-save[disabled=true] {
@@ -277,76 +264,57 @@
 }
 
 @media (min-resolution: 2dppx) {
   .selected .call-item-gutter {
     background-image: url("editor-debug-location@2x.png");
   }
 }
 
-.theme-dark .call-item-gutter {
-  background-color: #181d20;
-  color: #5f7387;
-  border-color: #000;
-}
-
-.theme-light .call-item-gutter {
-  background-color: #f7f7f7;
-  color: #667380;
-  border-color: #aaa;
+.call-item-gutter {
+  background-color: var(--theme-sidebar-background);
+  color: var(--theme-content-color3);
+  border-color: var(--theme-splitter-color);
 }
 
 .call-item-index {
   text-align: end;
 }
 
-.theme-dark .call-item-context {
-  color: #eb5368; /* Highlight Orange */
+.call-item-context {
+  color: var(--theme-highlight-orange);
 }
 
-.theme-light .call-item-context {
-  color: #f13c00; /* Highlight Orange */
-}
-
-.theme-dark .call-item-name {
-  color: #46afe3; /* Highlight Blue */
-}
-
-.theme-light .call-item-name {
-  color: #0088cc; /* Highlight Blue */
+.call-item-name {
+  color: var(--theme-highlight-blue);
 }
 
 .call-item-location {
   -moz-padding-start: 2px;
   -moz-padding-end: 6px;
   text-align: end;
   cursor: pointer;
+  color: var(--theme-highlight-bluegrey);
 }
 
-.theme-dark .call-item-location:hover {
-  color: #0088cc; /* Highlight Blue */
-}
-
-.theme-light .call-item-location:hover {
-  color: #46afe3; /* Highlight Blue */
+.call-item-location:hover {
+  color: var(--theme-highlight-blue);
 }
 
 .call-item-view:hover .call-item-location,
 .call-item-view[expanded] .call-item-location {
   text-decoration: underline;
 }
 
 .theme-dark .call-item-location {
   border-color: #111;
-  color: #5e88b0; /* Highlight Blue-Grey */
 }
 
 .theme-light .call-item-location {
   border-color: #eee;
-  color: #5f88b0; /* Highlight Blue-Grey */
 }
 
 .call-item-stack {
   -moz-padding-start: calc(@gutterWidth@ + @gutterPaddingStart@);
   padding-bottom: 10px;
 }
 
 .theme-dark .call-item-stack {
@@ -365,38 +333,26 @@
 .call-item-stack-fn-location {
   -moz-padding-start: 2px;
   -moz-padding-end: 6px;
   text-align: end;
   cursor: pointer;
   text-decoration: underline;
 }
 
-.theme-dark .call-item-stack-fn-name {
-  color: #a9bacb; /* Content (Text) - Light */
-}
-
-.theme-light .call-item-stack-fn-name {
-  color: #667380; /* Content (Text) - Dark Grey */
+.call-item-stack-fn-name {
+  color: var(--theme-content-color3);
 }
 
-.theme-dark .call-item-stack-fn-location {
-  color: #5e88b0; /* Highlight Blue-Grey */
+.call-item-stack-fn-location {
+  color: var(--theme-highlight-bluegrey);
 }
 
-.theme-light .call-item-stack-fn-location {
-  color: #5e88b0; /* Highlight Blue-Grey */
-}
-
-.theme-dark .call-item-stack-fn-location:hover {
-  color: #0088cc; /* Highlight Blue */
-}
-
-.theme-light .call-item-stack-fn-location:hover {
-  color: #46afe3; /* Highlight Blue */
+.call-item-stack-fn-location:hover {
+  color: var(--theme-highlight-blue);
 }
 
 #calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
   /* Text inside a selected item should not be custom colored. */
   color: inherit !important;
 }
 
 /* Rendering preview */
@@ -460,22 +416,22 @@
 /* Snapshot filmstrip */
 
 #snapshot-filmstrip {
   overflow: hidden;
 }
 
 .theme-dark #snapshot-filmstrip {
   border-top: 1px solid #000;
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-light #snapshot-filmstrip {
   border-top: 1px solid #aaa;
-  color: #585959; /* Grey foreground text */
+  color: var(--theme-body-color-alt);
 }
 
 .filmstrip-thumbnail {
   image-rendering: -moz-crisp-edges;
   background-image: @checkerboardPattern@;
   background-size: 12px 12px, 12px 12px;
   background-position: 0px -1px, 6px 5px;
   background-repeat: repeat, repeat;
@@ -493,31 +449,19 @@
 .theme-dark .filmstrip-thumbnail {
   background-color: @darkCheckerboardBackground@;
 }
 
 .theme-light .filmstrip-thumbnail {
   background-color: @lightCheckerboardBackground@;
 }
 
-.theme-dark .filmstrip-thumbnail {
-  -moz-border-end: 1px solid #000;
+.filmstrip-thumbnail {
+  -moz-border-end: 1px solid var(--theme-splitter-color)
 }
 
-.theme-light .filmstrip-thumbnail {
-  -moz-border-end: 1px solid #aaa;
-}
-
-.theme-dark #snapshot-filmstrip > .filmstrip-thumbnail:hover,
-.theme-dark #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
-  border: 1px solid #46afe3; /* Highlight Blue */
+#snapshot-filmstrip > .filmstrip-thumbnail:hover,
+#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
+  border: 1px solid var(--theme-highlight-blue);
   margin: 0 0 0 -1px;
   padding: 0;
   opacity: 0.66;
 }
-
-.theme-light #snapshot-filmstrip > .filmstrip-thumbnail:hover,
-.theme-light #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
-  border: 1px solid #0088cc; /* Highlight Blue */
-  margin: 0 0 0 -1px;
-  padding: 0;
-  opacity: 0.66;
-}
--- a/browser/themes/shared/devtools/debugger.inc.css
+++ b/browser/themes/shared/devtools/debugger.inc.css
@@ -13,24 +13,19 @@
   -moz-border-end: 1px solid;
 }
 
 #sources-pane .devtools-toolbar {
   border: none; /* Remove the devtools-toolbar bottom border. */
   -moz-border-end: 1px solid;
 }
 
-.theme-dark #sources-pane > tabs,
-.theme-dark #sources-pane .devtools-toolbar {
-  -moz-border-end-color: black; /* Match the splitter color. */
-}
-
-.theme-light #sources-pane > tabs,
-.theme-light #sources-pane .devtools-toolbar {
-  -moz-border-end-color: #aaa; /* Match the splitter color. */
+#sources-pane > tabs,
+#sources-pane .devtools-toolbar {
+  -moz-border-end-color: var(--theme-splitter-color);
 }
 
 /* Sources and breakpoints list */
 
 .dbg-source-item {
   padding: 2px 0px;
 }
 
@@ -184,38 +179,26 @@
   float: left;
 }
 
 .dbg-classic-stackframe-details-url {
   max-width: 90%;
   text-align: end;
 }
 
-.theme-dark .dbg-classic-stackframe-details-url {
-  color: #a9bacb; /* Light content text */
-}
-
-.theme-light .dbg-classic-stackframe-details-url {
-  color: #667380; /* Dark grey content text */
+.dbg-classic-stackframe-details-url {
+  color: var(--theme-content-color1);
 }
 
-.theme-dark .dbg-classic-stackframe-details-sep {
-  color: #b6babf; /* Grey foreground text */
+.dbg-classic-stackframe-details-sep {
+  color: var(--theme-body-color-alt)
 }
 
-.theme-light .dbg-classic-stackframe-details-sep {
-  color: #585959; /* Grey foreground text */
-}
-
-.theme-dark .dbg-classic-stackframe-details-line {
-  color: #5e88b0; /* Highlight blue grey */
-}
-
-.theme-light .dbg-classic-stackframe-details-line {
-  color: #5f88b0; /* Highlight blue grey */
+.dbg-classic-stackframe-details-line {
+  color: var(--theme-highlight-bluegrey);
 }
 
 #callstack-list .selected label {
   /* Text inside a selected item should not be custom colored. */
   color: inherit !important;
 }
 
 /* Tracer */
@@ -247,91 +230,69 @@
 
 .trace-name {
   -moz-padding-start: 4px;
 }
 
 /* Tracer dark theme */
 
 .theme-dark .trace-item {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-dark .trace-item.black-boxed {
   color: rgba(128,128,128,0.4);
 }
 
 .theme-dark .trace-item.selected-matching {
   background-color: rgba(29,79,115,.4); /* Select highlight blue at 40% alpha */
 }
 
 .theme-dark .selected > .trace-item {
   background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */
 }
 
-.theme-dark .trace-call {
-  color: #46afe3; /* Highlight blue */
+.trace-call {
+  color: var(--theme-highlight-blue);
 }
 
-.theme-dark .trace-return,
-.theme-dark .trace-yield {
-  color: #70bf53; /* Highlight green */
+.trace-return,
+.trace-yield {
+  color: var(--theme-highlight-green);
 }
 
-.theme-dark .trace-throw {
-  color: #eb5368; /* Highlight red */
+.trace-throw {
+  color: var(--theme-highlight-red);
 }
 
-.theme-dark .trace-param {
-  color: #a9bacb; /* Content text light */
+.trace-param {
+  color: var(--theme-content-color1);
 }
 
 .theme-dark .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
+  color: var(--theme-content-color2);
 }
 
 /* Tracer light theme */
-
 .theme-light .trace-item {
-  color: #292e33; /* Dark foreground text */
+  color: var(--theme-content-color1);
 }
 
 .theme-light .trace-item.black-boxed {
   color: rgba(128,128,128,0.4);
 }
 
 .theme-light .trace-item.selected-matching {
   background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */
 }
 
 .theme-light .selected > .trace-item {
   background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
 }
 
-.theme-light .trace-call {
-  color: #0088cc; /* Highlight blue */
-}
-
-.theme-light .trace-return,
-.theme-light .trace-yield {
-  color: #2cbb0f; /* Highlight green */
-}
-
-.theme-light .trace-throw {
-  color: #ed2655; /* Highlight red */
-}
-
-.theme-light .trace-param {
-  color: #667380; /* Content text dark grey  */
-}
-
-.theme-light .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
-}
-
 #tracer-traces .selected label {
   /* Text inside a selected item should not be custom colored. */
   color: inherit !important;
 }
 
 /* Watch expressions view */
 
 #expressions {
@@ -366,52 +327,36 @@
 .dbg-expression-button {
   -moz-appearance: none;
   border: none;
   background: none;
   text-decoration: underline;
   cursor: pointer;
 }
 
-.theme-dark .dbg-expression-button {
-  color: #46afe3; /* Blue highlight color */
-}
-
-.theme-light .dbg-expression-button {
-  color: #0088cc; /* Blue highlight color */
+.dbg-expression-button {
+  color: var(--theme-highlight-blue);
 }
 
 /* Event listeners view */
 
 .dbg-event-listener-type {
   font-weight: 600;
 }
 
-.theme-dark .dbg-event-listener-location {
-  color: #a9bacb; /* Light content text */
-}
-
-.theme-light .dbg-event-listener-location {
-  color: #667380; /* Dark grey content text */
+.dbg-event-listener-location {
+  color: var(--theme-content-color1);
 }
 
-.theme-dark .dbg-event-listener-separator {
-  color: #b6babf; /* Grey foreground text */
+.dbg-event-listener-separator {
+  color: var(--theme-body-color-alt);
 }
 
-.theme-light .dbg-event-listener-separator {
-  color: #585959; /* Grey foreground text */
-}
-
-.theme-dark .dbg-event-listener-targets {
-  color: #5e88b0; /* Highlight blue grey */
-}
-
-.theme-light .dbg-event-listener-targets {
-  color: #5f88b0; /* Highlight blue grey */
+.dbg-event-listener-targets {
+  color: var(--theme-highlight-bluegrey);
 }
 
 .theme-dark #event-listeners .selected {
   /* Selected items shouldn't be displayed differently. */
   background: none;
   color: #fff;
 }
 
@@ -470,37 +415,29 @@
   font-weight: 600;
 }
 
 .results-panel-item-label-before {
   -moz-padding-end: 6px;
 }
 
 .theme-dark .results-panel-item-label {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-light .results-panel-item-label {
-  color: #18191a; /* Dark foreground text */
-}
-
-.theme-dark .results-panel-item-label-before {
-  color: #5e88b0; /* Highlight blue grey */
+  color: var(--theme-body-color);
 }
 
-.theme-light .results-panel-item-label-before {
-  color: #5f88b0; /* Highlight blue grey */
+.results-panel-item-label-before {
+  color: var(--theme-highlight-bluegrey);
 }
 
-.theme-dark .results-panel-item-label-below {
-  color: #5f7387; /* Dark grey content text */
-}
-
-.theme-light .results-panel-item-label-below {
-  color: #667380; /* Dark grey content text */
+.results-panel-item-label-below {
+  color: var(--theme-content-color3);
 }
 
 #results-panel .selected label {
   /* Text inside a selected item should not be custom colored. */
   color: inherit !important;
 }
 
 /* Sources search view */
@@ -546,74 +483,59 @@
   transition: transform 0.3s ease-in-out;
 }
 
 .dbg-results-line-contents-string[match=true][focused] {
   transition-duration: 0.1s;
   transform: scale(1.75, 1.75);
 }
 
-.theme-dark .dbg-source-results:not(.selected):hover {
-  background-color: #181d20; /* Sidebar background */
+.dbg-source-results:not(.selected):hover {
+  background-color: var(--theme-sidebar-background);
 }
 
-.theme-light .dbg-source-results:not(.selected):hover {
-  background-color: #f7f7f7; /* Sidebar background */
+.dbg-results-header {
+  background-color: var(--theme-tab-toolbar-background);
 }
 
 .theme-dark .dbg-results-header {
-  background-color: #252c33; /* Tab toolbar */
-  color: #a9bacb; /* Light content text */
+  color: var(--theme-content-color1);
 }
 
 .theme-light .dbg-results-header {
-  background-color: #ebeced; /* Tab toolbar */
-  color: #667380; /* Dark grey content text */
+  color: var(--theme-content-color3);
 }
 
 .theme-dark .dbg-search-result:hover {
   background-color: rgba(29,79,115,.2); /* Select highlight blue at 40% alpha */
 }
 
 .theme-light .dbg-search-result:hover {
   background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
 }
 
-.theme-dark .dbg-results-header-match-count {
-  color: #5f7387; /* Dark grey content text */
-}
-
-.theme-light .dbg-results-header-match-count {
-  color: #667380; /* Dark grey content text */
+.dbg-results-header-match-count {
+  color: var(--theme-content-color3);
 }
 
-.theme-dark .dbg-results-line-number {
-  background-color: #252c33; /* Tab toolbars */
-  color: #b6babf; /* Grey foreground text */
+.dbg-results-line-number {
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-body-color-alt);
 }
 
-.theme-light .dbg-results-line-number {
-  background-color: #ebeced; /* Tab toolbars */
-  color: #585959; /* Grey foreground text */
-}
-
-.theme-dark .dbg-results-line-contents-string {
-  color: #b6babf; /* Grey foreground text */
-}
-
-.theme-light .dbg-results-line-contents-string {
-  color: #585959; /* Grey foreground text */
+.dbg-results-line-contents-string {
+  color: var(--theme-body-color-alt);
 }
 
 .theme-dark .dbg-results-line-contents-string[match=true] {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-light .dbg-results-line-contents-string[match=true] {
-  color: #18191a; /* Dark foreground text */
+  color: var(--theme-body-color);
 }
 
 /* Toolbar controls */
 
 #debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 #sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
--- a/browser/themes/shared/devtools/inspector.css
+++ b/browser/themes/shared/devtools/inspector.css
@@ -100,39 +100,31 @@
   -moz-margin-start: 5px;
   -moz-margin-end: 0;
 }
 
 .event-tooltip-source {
   margin-bottom: 0;
 }
 
-.theme-dark .event-tooltip-attributes-box {
-  background-color: #B6BABF;
-  color: #343C45;
-}
-
 .event-tooltip-attributes-container {
   display: flex;
   flex-shrink: 0;
   flex-grow: 1;
   justify-content: flex-end;
 }
 
 .event-tooltip-attributes-box {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   border-radius: 3px;
   padding: 2px;
   -moz-margin-start: 5px;
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-toolbar-background);
 }
 
 .event-tooltip-attributes {
   margin: 0;
   font-size: 9px;
   padding-top: 2px;
 }
-
-.theme-light .event-tooltip-attributes-box {
-  background-color: #585959;
-  color: #F0F1F2;
-}
--- a/browser/themes/shared/devtools/markup-view.css
+++ b/browser/themes/shared/devtools/markup-view.css
@@ -22,17 +22,17 @@
 .theme-selected ~ .editor,
 .theme-selected ~ .editor .theme-fg-color1,
 .theme-selected ~ .editor .theme-fg-color2,
 .theme-selected ~ .editor .theme-fg-color3,
 .theme-selected ~ .editor .theme-fg-color4,
 .theme-selected ~ .editor .theme-fg-color5,
 .theme-selected ~ .editor .theme-fg-color6,
 .theme-selected ~ .editor .theme-fg-color7 {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 /* In case a node isn't displayed in the page, we fade the syntax highlighting */
 .not-displayed .open,
 .not-displayed .close {
   opacity: .7;
 }
 
@@ -48,24 +48,19 @@
   right: 0;
   width: 90px;
   background: black;
   border-left: 1px solid;
   border-bottom: 1px solid;
   overflow: hidden;
 }
 
-.theme-dark #previewbar {
-  background: #252c33; /* Tab Toolbar */
-  border-color: #000; /* Splitters */
-}
-
-.theme-light #previewbar {
-  background: #ebeced; /* Tab Toolbar */
-  border-color: #aaa; /* Splitters */
+#previewbar {
+  background: var(--theme-tab-toolbar-background);
+  border-color: var(--theme-splitter-color);
 }
 
 #preview {
   position: absolute;
   top: 0;
   right: 5px;
   width: 80px;
   height: 100%;
@@ -94,17 +89,12 @@
   font-weight: bold;
   line-height: 10px;
   border-radius: 3px;
   padding: 0px 2px;
   -moz-margin-start: 5px;
   -moz-user-select: none;
 }
 
-.theme-dark .markupview-events {
-  background-color: #b6babf;
-  color: #14171a;
+.markupview-events {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
 }
-
-.theme-light .markupview-events {
-  background-color: #585959;
-  color: #fcfcfc;
-}
--- a/browser/themes/shared/devtools/netmonitor.inc.css
+++ b/browser/themes/shared/devtools/netmonitor.inc.css
@@ -4,24 +4,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #requests-menu-empty-notice {
   margin: 0;
   padding: 12px;
   font-size: 120%;
 }
 
-.theme-dark #requests-menu-empty-notice {
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light #requests-menu-empty-notice {
-  color: #585959; /* Grey foreground text */
-}
-
 #notice-perf-message {
   margin-top: 2px;
 }
 
 #requests-menu-perf-notice-button {
   min-width: 30px;
   min-height: 26px;
   margin: 0;
@@ -283,40 +275,40 @@ label.requests-menu-status-code {
   transform-origin: left center;
 }
 
 .requests-menu-timings-division:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 
 .theme-dark .requests-menu-timings-division[division-scale=millisecond] {
-  -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
+  -moz-border-start-color: var(--theme-selection-color) !important;
 }
 
 .theme-light .requests-menu-timings-division[division-scale=millisecond] {
-  -moz-border-start-color: #585959 !important; /* Grey foreground text */
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
 }
 
 .theme-dark .requests-menu-timings-division[division-scale=second] {
-  -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
+  -moz-border-start-color: var(--theme-selection-color) !important;
   font-weight: 600;
 }
 
 .theme-light .requests-menu-timings-division[division-scale=second] {
-  -moz-border-start-color: #585959 !important; /* Grey foreground text */
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
   font-weight: 600;
 }
 
 .theme-dark .requests-menu-timings-division[division-scale=minute] {
-  -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
+  -moz-border-start-color: var(--theme-selection-color) !important;
   font-weight: 600;
 }
 
 .theme-light .requests-menu-timings-division[division-scale=minute] {
-  -moz-border-start-color: #585959 !important; /* Grey foreground text */
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
   font-weight: 600;
 }
 
 /* Network requests table: waterfall items */
 
 .requests-menu-subitem.requests-menu-waterfall {
   -moz-padding-start: 0px;
   -moz-padding-end: 4px;
@@ -444,18 +436,18 @@ label.requests-menu-status-code {
   #details-pane-toggle:active {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
 /* Network request details tabpanels */
 
 .theme-dark .tabpanel-content {
-  background-color: #343c45; /* Toolbars */
-  color: #f5f7fa; /* Light foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-selection-color);
 }
 
 /* Summary tabpanel */
 
 .tabpanel-summary-container {
   padding: 1px;
 }
 
@@ -494,26 +486,18 @@ label.requests-menu-status-code {
   height: 50vh;
 }
 
 /* Response tabpanel */
 
 #response-content-info-header {
   margin: 0;
   padding: 3px 8px;
-}
-
-.theme-dark  #response-content-info-header {
-  background-color: #eb5368; /* Red highlight */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light  #response-content-info-header {
-  background-color: #ed2655; /* Red highlight */
-  color: #f5f7fa; /* Light foreground text */
+  background-color: var(--theme-highlight-red);
+  color: var(--theme-selection-color);
 }
 
 #response-content-image-box {
   padding-top: 10px;
   padding-bottom: 10px;
 }
 
 #response-content-image {
@@ -567,41 +551,41 @@ label.requests-menu-status-code {
   width: 4.5em;
 }
 
 /* Footer */
 
 .theme-dark #requests-menu-footer {
   border-top: 1px solid @table_itemDarkStartBorder@;
   box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset;
-  background-color: #343c45; /* Toolbars */
+  background-color: var(--theme-toolbar-background);
 }
 
 .theme-light #requests-menu-footer {
   border-top: 1px solid @table_itemLightStartBorder@;
   box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset;
-  background-color: #f0f1f2; /* Toolbars */
+  background-color: var(--theme-toolbar-background);
 }
 
 .requests-menu-footer-button,
 .requests-menu-footer-label {
   min-width: 1em;
   margin: 0;
   border: none;
   padding: 2px 1vw;
 }
 
 .theme-dark .requests-menu-footer-button,
 .theme-dark .requests-menu-footer-label {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-light .requests-menu-footer-button,
 .theme-light .requests-menu-footer-label {
-  color: #18191a; /* Dark foreground text */
+  color: var(--theme-body-color);
 }
 
 .requests-menu-footer-spacer {
   min-width: 2px;
 }
 
 .theme-dark .requests-menu-footer-spacer:not(:first-child),
 .theme-dark .requests-menu-footer-button:not(:first-child) {
@@ -691,112 +675,68 @@ label.requests-menu-status-code {
   cursor: default;
   pointer-events: none;
 }
 
 #network-statistics-charts {
   min-height: 1px;
 }
 
-.theme-dark #network-statistics-charts {
-  background-color: #343c45; /* Toolbars */
-}
-
-.theme-light #network-statistics-charts {
-  background-color: #f0f1f2; /* Toolbars */
+#network-statistics-charts {
+  background-color: var(--theme-toolbar-background);
 }
 
 #network-statistics-charts .pie-chart-container {
   -moz-margin-start: 3vw;
   -moz-margin-end: 1vw;
 }
 
 #network-statistics-charts .table-chart-container {
   -moz-margin-start: 1vw;
   -moz-margin-end: 3vw;
 }
 
-.theme-dark .chart-colored-blob[name=html] {
-  fill: #5e88b0; /* Blue-Grey highlight */
-  background: #5e88b0;
-}
-
-.theme-light .chart-colored-blob[name=html] {
-  fill: #5f88b0; /* Blue-Grey highlight */
-  background: #5f88b0;
-}
-
-.theme-dark .chart-colored-blob[name=css] {
-  fill: #46afe3; /* Blue highlight */
-  background: #46afe3;
+.chart-colored-blob[name=html] {
+  fill: var(--theme-highlight-bluegrey);
+  background: var(--theme-highlight-bluegrey);
 }
 
-.theme-light .chart-colored-blob[name=css] {
-  fill: #0088cc; /* Blue highlight */
-  background: #0088cc;
+.chart-colored-blob[name=css] {
+  fill: var(--theme-highlight-blue);
+  background: var(--theme-highlight-blue);
 }
 
-.theme-dark .chart-colored-blob[name=js] {
-  fill: #d99b28; /* Light Orange highlight */
-  background: #d99b28;
-}
-
-.theme-light .chart-colored-blob[name=js] {
-  fill: #d97e00; /* Light Orange highlight */
-  background: #d97e00;
-}
-
-.theme-dark .chart-colored-blob[name=xhr] {
-  fill: #d96629; /* Orange highlight */
-  background: #d96629;
+.chart-colored-blob[name=js] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
 }
 
-.theme-light .chart-colored-blob[name=xhr] {
-  fill: #f13c00; /* Orange highlight */
-  background: #f13c00;
+.chart-colored-blob[name=xhr] {
+  fill: var(--theme-highlight-orange);
+  background: var(--theme-highlight-orange);
 }
 
-.theme-dark .chart-colored-blob[name=fonts] {
-  fill: #6b7abb; /* Purple highlight */
-  background: #6b7abb;
-}
-
-.theme-light .chart-colored-blob[name=fonts] {
-  fill: #5b5fff; /* Purple highlight */
-  background: #5b5fff;
-}
-
-.theme-dark .chart-colored-blob[name=images] {
-  fill: #df80ff; /* Pink highlight */
-  background: #df80ff;
+.chart-colored-blob[name=fonts] {
+  fill: var(--theme-highlight-purple);
+  background: var(--theme-highlight-purple);
 }
 
-.theme-light .chart-colored-blob[name=images] {
-  fill: #b82ee5; /* Pink highlight */
-  background: #b82ee5;
-}
-
-.theme-dark .chart-colored-blob[name=media] {
-  fill: #70bf53; /* Green highlight */
-  background: #70bf53;
+.chart-colored-blob[name=images] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);
 }
 
-.theme-light .chart-colored-blob[name=media] {
-  fill: #2cbb0f; /* Green highlight */
-  background: #2cbb0f;
+.chart-colored-blob[name=media] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
 }
 
-.theme-dark .chart-colored-blob[name=flash] {
-  fill: #eb5368; /* Red highlight */
-  background: #eb5368;
-}
-
-.theme-light .chart-colored-blob[name=flash] {
-  fill: #ed2655; /* Red highlight */
-  background: #ed2655;
+.chart-colored-blob[name=flash] {
+  fill: var(--theme-highlight-red);
+  background: var(--theme-highlight-red);
 }
 
 .table-chart-row-label[name=cached] {
   display: none;
 }
 
 .table-chart-row-label[name=count] {
   width: 3em;
--- a/browser/themes/shared/devtools/profiler.inc.css
+++ b/browser/themes/shared/devtools/profiler.inc.css
@@ -3,26 +3,18 @@
  * 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/. */
 
 /* Reload and waiting notices */
 
 .notice-container {
   margin-top: -50vh;
   font-size: 120%;
-}
-
-.theme-dark .notice-container {
-  background: #343c45; /* Toolbars */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .notice-container {
-  background: #f0f1f2; /* Toolbars */
-  color: #585959; /* Grey foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
 }
 
 #empty-notice button,
 #recording-notice button {
   min-width: 30px;
   min-height: 28px;
   margin: 0;
   list-style-image: url(profiler-stopwatch.svg);
@@ -50,24 +42,19 @@
 
 /* Recordings pane */
 
 #recordings-pane > tabs,
 #recordings-pane .devtools-toolbar {
   -moz-border-end-width: 1px;
 }
 
-.theme-dark #recordings-pane > tabs,
-.theme-dark #recordings-pane .devtools-toolbar {
-  -moz-border-end-color: #000; /* Splitters */
-}
-
-.theme-light #recordings-pane > tabs,
-.theme-light #recordings-pane .devtools-toolbar {
-  -moz-border-end-color: #aaa; /* Splitters */
+#recordings-pane > tabs,
+#recordings-pane .devtools-toolbar {
+  -moz-border-end-color: var(--theme-splitter-color);
 }
 
 #record-button {
   list-style-image: url(profiler-stopwatch.svg);
 }
 
 #record-button[checked] {
   list-style-image: url(profiler-stopwatch-checked.svg);
@@ -92,24 +79,19 @@
   font-size: 90%;
 }
 
 .recording-item-save {
   text-decoration: underline;
   cursor: pointer;
 }
 
-.theme-dark .recording-item-duration,
-.theme-dark .recording-item-save {
-  color: #b6babf; /* Foreground (Text) - Grey */
-}
-
-.theme-light .recording-item-duration,
-.theme-light .recording-item-save {
-  color: #585959; /* Foreground (Text) - Grey */
+.recording-item-duration,
+.recording-item-save {
+  color: var(--theme-body-color-alt);
 }
 
 #recordings-list .selected label {
   /* Text inside a selected item should not be custom colored. */
   color: inherit !important;
 }
 
 /* Profile pane */
@@ -127,59 +109,45 @@
   border-radius: 0;
   padding: 0;
   text-shadow: none;
   transition-duration: 0.25s;
   transition-timing-function: ease-in-out;
   transition-property: opacity, transform;
 }
 
-.theme-dark #profile-content tab {
-  color: #8fa1b2; /* Body Text */
-}
-
-.theme-light #profile-content tab {
-  color: #18191a; /* Body Text */
+#profile-content tab {
+  color: var(--theme-body-color);
 }
 
 #profile-content tab:not([selected]) {
   cursor: pointer;
 }
 
 #profile-content tab[covered] {
   opacity: 0;
   transform: translateY(100%);
 }
 
-.theme-dark #profile-content tab {
+#profile-content tab {
   -moz-appearance: none;
-  -moz-border-end: 1px solid #000; /* Splitters */
-}
-
-.theme-light #profile-content tab {
-  -moz-appearance: none;
-  -moz-border-end: 1px solid #aaa; /* Splitters */
+  -moz-border-end: 1px solid var(--theme-splitter-color);
 }
 
 .theme-dark #profile-content tab:hover {
   background-color: rgba(0,0,0,0.3);
 }
 
 .theme-light #profile-content tab:hover {
   background-color: rgba(255,255,255,0.8);
 }
 
-.theme-dark #profile-content tab[selected] {
-  background-color: #1d4f73; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light #profile-content tab[selected] {
-  background-color: #4c9ed9; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
+#profile-content tab[selected] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 #profile-content tabpanel {
   -moz-box-orient: vertical;
   transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */
 }
 
 #profile-newtab-button {
@@ -224,22 +192,18 @@
 }
 
 #profile-newtab-button:hover:active {
   background-position: 22px 2px;
 }
 
 /* Profile call tree */
 
-.theme-dark .call-tree-headers-container {
-  border-top: 1px solid #000;
-}
-
-.theme-light .call-tree-headers-container {
-  border-top: 1px solid #aaa;
+.call-tree-headers-container {
+  border-top: 1px solid var(--theme-splitter-color);
 }
 
 .call-tree-cells-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
   overflow: auto;
 }
 
@@ -271,49 +235,44 @@
   -moz-box-flex: 1;
 }
 
 .call-tree-header,
 .call-tree-cell {
   -moz-box-align: center;
   overflow: hidden;
   padding: 1px 4px;
+  color: var(--theme-body-color);
 }
 
 .call-tree-header:not(:last-child),
 .call-tree-cell:not(:last-child) {
   -moz-border-end: 1px solid;
 }
 
 .theme-dark .call-tree-header,
 .theme-dark .call-tree-cell {
   -moz-border-end-color: rgba(255,255,255,0.15);
-  color: #8fa1b2; /* Body Text */
 }
 
 .theme-light .call-tree-header,
 .theme-light .call-tree-cell {
   -moz-border-end-color: rgba(0,0,0,0.15);
-  color: #18191a; /* Body Text */
 }
 
 .call-tree-header:not(:last-child) {
   text-align: center;
 }
 
 .call-tree-cell:not(:last-child) {
   text-align: end;
 }
 
-.theme-dark .call-tree-header {
-  background-color: #252c33; /* Tab Toolbar */
-}
-
-.theme-light .call-tree-header {
-  background-color: #ebeced; /* Tab Toolbar */
+.call-tree-header {
+  background-color: var(--theme-tab-toolbar-background);
 }
 
 .theme-dark .call-tree-item:last-child:not(:focus) {
   border-bottom: 1px solid rgba(255,255,255,0.15);
 }
 
 .theme-light .call-tree-item:last-child:not(:focus) {
   border-bottom: 1px solid rgba(0,0,0,0.15);
@@ -330,26 +289,22 @@
 .theme-dark .call-tree-item:hover {
   background-color: rgba(29,79,115,0.25);
 }
 
 .theme-light .call-tree-item:hover {
   background-color: rgba(76,158,217,0.2);
 }
 
-.theme-dark .call-tree-item:focus {
-  background-color: #1d4f73; /* Select Highlight Blue */
-}
-
-.theme-light .call-tree-item:focus {
-  background-color: #4c9ed9; /* Select Highlight Blue */
+.call-tree-item:focus {
+  background-color: var(--theme-selection-background);
 }
 
 .call-tree-item:focus label {
-  color: #f5f7fa !important; /* Light foreground text */
+  color: var(--theme-selection-color) !important;
 }
 
 .theme-dark .call-tree-item:focus .call-tree-cell {
   -moz-border-end-color: rgba(0,0,0,0.3);
 }
 
 .theme-light .call-tree-item:focus .call-tree-cell {
   -moz-border-end-color: rgba(255,255,255,0.5);
@@ -366,43 +321,29 @@
   -moz-margin-start: 4px !important;
   cursor: pointer;
 }
 
 .call-tree-url:hover {
   text-decoration: underline;
 }
 
-.theme-dark .call-tree-url {
-  color: #46afe3;
+.call-tree-url {
+  color: var(--theme-highlight-blue);
 }
 
-.theme-light .call-tree-url {
-  color: #0088cc;
-}
 
-.theme-dark .call-tree-line {
-  color: #d96629;
-}
-
-.theme-light .call-tree-line {
-  color: #f13c00;
+.call-tree-line {
+  color: var(--theme-highlight-orange);
 }
 
 .call-tree-host {
   -moz-margin-start: 8px !important;
   font-size: 90%;
-}
-
-.theme-dark .call-tree-host {
-  color: #8fa1b2;
-}
-
-.theme-light .call-tree-host {
-  color: #8fa1b2;
+  color: var(--theme-content-color2);
 }
 
 .call-tree-url[value=""],
 .call-tree-line[value=""],
 .call-tree-host[value=""] {
   display: none;
 }
 
--- a/browser/themes/shared/devtools/ruleview.css
+++ b/browser/themes/shared/devtools/ruleview.css
@@ -46,30 +46,26 @@
 }
 
 .ruleview-rule,
 #noResults {
   padding: 2px 4px;
 }
 
 /* User agent styles are not editable, display them differently */
-.theme-light .ruleview-rule[uneditable=true] {
-  background: #ebeced; /* Tab Toolbar */
-}
-
-.theme-dark .ruleview-rule[uneditable=true] {
-  background: #252c33; /* Tab Toolbar */
+.ruleview-rule[uneditable=true] {
+  background: var(--theme-tab-toolbar-background);
 }
 
 .ruleview-rule[uneditable=true] :focus {
   outline: none;
 }
 
 .ruleview-rule[uneditable=true] .theme-link {
-  color: #5f88b0; /* Blue - Grey */
+  color: var(--theme-highlight-bluegrey);
 }
 
 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
   visibility: hidden;
 }
 
 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
@@ -193,39 +189,35 @@
   }
 }
 
 .ruleview-overridden {
   text-decoration: line-through;
 }
 
 .theme-light .ruleview-overridden {
-  text-decoration-color: #667380; /*  Content (Text) - Dark Grey */
+  text-decoration-color: var(--theme-content-color3);
 }
 
 .styleinspector-propertyeditor {
   border: 1px solid #CCC;
   padding: 0;
 }
 
 .ruleview-property {
   border-left: 3px solid transparent;
   clear: right;
 }
 
 .ruleview-property  > * {
   vertical-align: middle;
 }
 
-.theme-dark .ruleview-property[dirty] {
-  border-left-color: #70bf53; /* Green */
-}
-
-.theme-light .ruleview-property[dirty] {
-  border-left-color: #2cbb0f; /* Green */
+.ruleview-property[dirty] {
+  border-left-color: var(--theme-highlight-green);
 }
 
 .ruleview-namecontainer > .ruleview-propertyname,
 .ruleview-propertycontainer > .ruleview-propertyvalue {
   border-bottom: 1px dashed transparent;
 }
 
 .ruleview-namecontainer:hover > .ruleview-propertyname,
--- a/browser/themes/shared/devtools/shadereditor.inc.css
+++ b/browser/themes/shared/devtools/shadereditor.inc.css
@@ -1,26 +1,18 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 /* Reload and waiting notices */
 
 .notice-container {
   margin-top: -50vh;
-}
-
-.theme-dark .notice-container {
-  background-color: #343c45; /* Toolbars */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .notice-container {
-  background-color: #f0f1f2; /* Toolbars */
-  color: #585959; /* Grey foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
 }
 
 #reload-notice {
   font-size: 120%;
 }
 
 #waiting-notice {
   font-size: 110%;
@@ -94,36 +86,25 @@
 
 /* Shader source editors */
 
 .editor-label {
   padding: 1px 12px;
   border-top: 1px solid;
 }
 
-.theme-dark .editor-label {
-  background: #343c45; /* Dark toolbars */
-  border-color: #000; /* Match the splitter color. */
-  color: #f5f7fa; /* Light foreground text */
+.editor-label {
+  background: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
+  color: var(--theme-body-color-alt);
 }
 
-.theme-light .editor-label {
-  background: #f0f1f2; /* Light toolbars */
-  border-color: #aaa; /* Match the splitter color. */
-  color: #585959; /* Grey foreground text */
-}
-
-.theme-dark .editor-label[selected] {
-  background-color: #1d4f73; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .editor-label[selected] {
-  background-color: #4c9ed9; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
+.editor-label[selected] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 /* Responsive sidebar */
 
 @media (max-width: 700px) {
   #shaders-pane {
     max-height: 60vh;
   }
--- a/browser/themes/shared/devtools/splitview.css
+++ b/browser/themes/shared/devtools/splitview.css
@@ -13,17 +13,17 @@
 
 .loading .splitview-nav-container {
   background-image: url(chrome://global/skin/icons/loading_16.png);
   background-repeat: no-repeat;
   background-position: center center;
 }
 
 .theme-dark .splitview-nav-container {
-  background-color: #343c45; /* Toolbars */
+  background-color: var(--theme-toolbar-background);
 }
 
 .splitview-nav {
   -moz-appearance: none;
   list-style-image: none;
   list-style: none;
   padding: 0;
   margin: 0;
--- a/browser/themes/shared/devtools/styleeditor.css
+++ b/browser/themes/shared/devtools/styleeditor.css
@@ -9,47 +9,47 @@
 }
 
 .stylesheet-name {
   font-size: 13px;
 }
 
 .theme-dark .stylesheet-title,
 .theme-dark .stylesheet-name {
-  color: #f5f7fa;
+  color: var(--theme-selection-color);
 }
 
 .theme-dark .stylesheet-rule-count,
 .theme-dark .stylesheet-linked-file,
 .theme-dark .stylesheet-saveButton {
-  color: #b6babf;
+  color: var(--theme-body-color-alt);
 }
 
 .theme-light .stylesheet-title,
 .theme-light .stylesheet-name {
-  color: #585959;
+  color: var(--theme-body-color-alt);
 }
 
 .theme-light .stylesheet-rule-count,
 .theme-light .stylesheet-linked-file,
 .theme-light .stylesheet-saveButton {
-  color: #18191a;
+  color: var(--theme-body-color);
 }
 
 .stylesheet-saveButton {
   text-decoration: underline;
   cursor: pointer;
 }
 
 .splitview-active .stylesheet-title,
 .splitview-active .stylesheet-name,
 .theme-light .splitview-active .stylesheet-rule-count,
 .theme-light .splitview-active .stylesheet-linked-file,
 .theme-light .splitview-active .stylesheet-saveButton {
-  color: #f5f7fa;
+  color: var(--theme-selection-color);
 }
 
 .splitview-nav:focus {
   outline: 0; /* focus ring is on the stylesheet name */
 }
 
 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
   font-style: italic;
@@ -200,22 +200,18 @@ h3 {
     -moz-box-align: baseline;
   }
 
   .stylesheet-sidebar {
     width: 180px;
   }
 }
 
-.theme-light .csscoverage-report {
-  background-color: #f0f1f2; /* Toolbars */
-}
-
-.theme-dark .csscoverage-report {
-  background-color: #343c45; /* Toolbars */
+.csscoverage-report {
+  background-color: var(--theme-toolbar-background);
 }
 
 .csscoverage-report-container {
   height: 100vh;
   padding: 0 30px;
 }
 
 .csscoverage-report-content {
@@ -269,44 +265,29 @@ h3 {
   margin: 0;
   padding: 0;
   border-radius: 0;
   border-top: none;
   border-bottom: none;
   -moz-border-start: none;
 }
 
-.theme-dark .chart-colored-blob[name="Used Preload"] {
-  fill: #df80ff; /* Pink highlight */
-  background: #df80ff;
-}
-
-.theme-light .chart-colored-blob[name="Used Preload"] {
-  fill: #b82ee5; /* Pink highlight */
-  background: #b82ee5;
+.chart-colored-blob[name="Used Preload"] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);;
 }
 
-.theme-dark .chart-colored-blob[name=Used] {
-  fill: #70bf53; /* Green highlight */
-  background: #70bf53;
+.chart-colored-blob[name=Used] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
 }
 
-.theme-light .chart-colored-blob[name=Used] {
-  fill: #2cbb0f; /* Green highlight */
-  background: #2cbb0f;
-}
-
-.theme-dark .chart-colored-blob[name=Unused] {
-  fill: #d99b28; /* Light Orange highlight */
-  background: #d99b28;
-}
-
-.theme-light .chart-colored-blob[name=Unused] {
-  fill: #d97e00; /* Light Orange highlight */
-  background: #d97e00;
+.chart-colored-blob[name=Unused] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
 }
 
 /* Undo 'largest' customization */
 .theme-dark .pie-chart-slice[largest] {
   stroke-width: 1px;
   stroke: rgba(0,0,0,0.2);
 }
 
--- a/browser/themes/shared/devtools/toolbars.inc.css
+++ b/browser/themes/shared/devtools/toolbars.inc.css
@@ -52,16 +52,18 @@
   min-height: 18px;
   padding: 1px;
   text-shadow: none;
   border: none;
   border-radius: 0;
   margin: 2px 3px;
   color: inherit;
   transition: background 0.05s ease-in-out;
+  color: var(--theme-content-color1);
+  background-color: var(--theme-toolbar-background);
 }
 
 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
   outline: 1px dotted hsla(210,30%,85%,0.7);
   outline-offset: -4px;
 }
 
@@ -136,24 +138,20 @@
   -moz-appearance: none !important;
   list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
   -moz-box-align: center;
   padding: 0 3px;
 }
 
 .theme-dark .devtools-menulist,
 .theme-dark .devtools-toolbarbutton {
-  color: #a9bacb; /* Body text - high contrast */
-  background-color: #343c45; /* Toolbars */
   border-color: rgba(0, 0, 0, .4); /* Splitters */
 }
 .theme-light .devtools-menulist,
 .theme-light .devtools-toolbarbutton {
-  color: #292e33; /* Body text - high contrast */
-  background-color: #f0f1f2; /* Toolbars */
   border-color: rgba(170, 170, 170, .5); /* Splitters */
 }
 
 /* Text-only buttons */
 .theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
 .theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
   background-color: rgba(170, 170, 170, .2); /* Splitter */
 }
@@ -184,31 +182,31 @@
 .theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]):hover:active {
   background: rgba(170, 170, 170, .4); /* Splitters */
 }
 
 /* Menu type buttons and checked states */
 .theme-dark .devtools-toolbarbutton[checked=true],
 .theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
   background: rgba(29, 79, 115, .7); /* Select highlight blue */
-  color: #f5f7fa;
+  color: var(--theme-selection-color);
 }
 
 .theme-light .devtools-toolbarbutton[checked=true],
 .theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
   background: rgba(76, 158, 217, .2); /* Select highlight blue */
 }
 
 .theme-dark .devtools-menulist[open=true],
 .theme-dark .devtools-toolbarbutton[open=true],
 .theme-dark .devtools-toolbarbutton[open=true]:hover,
 .theme-dark .devtools-toolbarbutton[open=true]:hover:active,
 .theme-dark .devtools-toolbarbutton[checked=true]:hover {
   background: rgba(29, 79, 115, .8); /* Select highlight blue */
-  color: #f5f7fa;
+  color: var(--theme-selection-color);
 }
 
 .theme-light .devtools-menulist[open=true],
 .theme-light .devtools-toolbarbutton[open=true],
 .theme-light .devtools-toolbarbutton[open=true]:hover,
 .theme-light .devtools-toolbarbutton[open=true]:hover:active,
 .theme-light .devtools-toolbarbutton[checked=true]:hover {
   background: rgba(76, 158, 217, .4); /* Select highlight blue */
@@ -254,26 +252,17 @@
   margin: 0 3px;
   border: 1px solid;
 %ifdef XP_MACOSX
   border-radius: 20px;
 %else
   border-radius: 2px;
 %endif
   padding: 4px 6px;
-}
-
-.theme-dark .devtools-textinput,
-.theme-dark .devtools-searchinput {
-  border-color: rgb(88, 94, 101);
-}
-
-.theme-light .devtools-textinput,
-.theme-light .devtools-searchinput {
-  border-color: #aaa; /* Match the splitter color */
+  border-color: var(--theme-splitter-color);
 }
 
 .devtools-searchinput {
   margin-top: 1px;
   margin-bottom: 1px;
   padding: 0;
   -moz-padding-start: 22px;
   -moz-padding-end: 12px;
@@ -305,17 +294,17 @@
   background-position: calc(100% - 8px) center;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons {
   display: none;
 }
 
 .devtools-no-search-result {
-  border-color: #eb5368 !important;
+  border-color: var(--theme-highlight-red) !important;
 }
 
 /* Close button */
 
 .devtools-closebutton {
   -moz-appearance: none;
   border: none;
   margin: 0 4px;
@@ -344,32 +333,31 @@
   display: none;
 }
 
 .devtools-closebutton:hover {
   opacity: 1;
 }
 
 /* In-tools sidebar */
-
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;
 }
 
 .devtools-sidebar-tabs > tabpanels {
   -moz-appearance: none;
   background: transparent;
   padding: 0;
   border: 0;
 }
 
 .theme-light .devtools-sidebar-tabs > tabpanels {
-  background: #f7f7f7;
-  color: #18191a;
+  background: var(--theme-sidebar-background);
+  color: var(--theme-body-color);
 }
 
 .devtools-sidebar-tabs > tabs {
   position: static;
   font: inherit;
   margin-bottom: 0;
   overflow: hidden;
 }
@@ -429,17 +417,17 @@
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover:active {
   background: hsla(206,37%,4%,.4);
   border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected],
 .theme-dark .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
-  color: #f5f7fa;
+  color: var(--theme-selection-color);
   background: #1d4f73;
   border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab {
   border-image: @smallSeparatorLight@ 1 1;
 }
 
@@ -459,17 +447,17 @@
 
 .theme-light .devtools-sidebar-tabs > tabs > tab[selected] + tab:hover {
   background: #ddd;
   border-image: @solidSeparatorLight@;
 }
 
 .theme-light .devtools-sidebar-tabs > tabs > tab[selected],
 .theme-light .devtools-sidebar-tabs > tabs > tab[selected]:hover:active {
-  color: #f5f7fa;
+  color: var(--theme-selection-color);
   background: #4c9ed9;
   border-image: @solidSeparatorLight@;
 }
 
 /* Toolbox - moved from toolbox.css.
  * Rules that apply to the global toolbox like command buttons,
  * devtools tabs, docking buttons, etc. */
 
@@ -658,28 +646,26 @@
 /* Tabs */
 
 .devtools-tabbar {
   -moz-appearance: none;
   min-height: 28px;
   border: 0px solid;
   border-bottom-width: 1px;
   padding: 0;
+  background: var(--theme-tab-toolbar-background);
+  border-bottom-color: var(--theme-splitter-color);
 }
 
 .theme-light .devtools-tabbar {
   box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset;
-  background: #ebeced;
-  border-bottom-color: #aaa;
 }
 
 .theme-dark .devtools-tabbar {
   box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset;
-  background: #252c33;
-  border-bottom-color: #000;
 }
 
 #toolbox-tabs {
   margin: 0;
 }
 
 .devtools-tab {
   -moz-appearance: none;
@@ -692,37 +678,37 @@
   padding: 0;
   border-style: solid;
   border-width: 0;
   -moz-border-start-width: 1px;
   -moz-box-align: center;
 }
 
 .theme-dark .devtools-tab {
-  color: #b6babf;
+  color: var(--theme-body-color-alt);
   border-color: #42484f;
 }
 
 .theme-light .devtools-tab {
-  color: #18191a;
-  border-color: #aaa;
+  color: var(--theme-body-color);
+  border-color: var(--theme-splitter-color);
 }
 
 .theme-dark .devtools-tab:hover {
   background-color: hsla(206,37%,4%,.2);
   color: #ced3d9;
 }
 
 .theme-light .devtools-tab:hover {
   background-color: rgba(170,170,170,.2);
 }
 
 .theme-dark .devtools-tab:hover:active {
   background-color: hsla(206,37%,4%,.4);
-  color: #f5f7fa;
+  color: var(--theme-selection-color);
 }
 
 .theme-light .devtools-tab:hover:active {
   background-color: rgba(170,170,170,.4);
 }
 
 .theme-dark .devtools-tab:not([selected])[highlighted] {
   background-color: hsla(99,100%,14%,.2);
@@ -750,27 +736,28 @@
   opacity: 0.8;
 }
 
 .devtools-tab:active > image,
 .devtools-tab[selected] > image {
   opacity: 1;
 }
 
+.devtools-tabbar .devtools-tab[selected] {
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
 .theme-dark .devtools-tabbar .devtools-tab[selected] {
-  color: #f5f7fa;
-  background-color: #1a4666;
   box-shadow: 0 2px 0 #d7f1ff inset,
               0 8px 3px -5px #2b82bf inset,
               0 -2px 0 rgba(0,0,0,.2) inset;
 }
 
 .theme-light .devtools-tabbar .devtools-tab[selected] {
-  color: #f5f7fa;
-  background-color: #4c9ed9;
   box-shadow: 0 2px 0 #d7f1ff inset,
               0 8px 3px -5px #2b82bf inset,
               0 -2px 0 rgba(0,0,0,.06) inset;
 }
 
 #toolbox-tabs .devtools-tab[selected],
 #toolbox-tabs .devtools-tab[highlighted] {
   border-width: 0;
--- a/browser/themes/shared/devtools/webaudioeditor.inc.css
+++ b/browser/themes/shared/devtools/webaudioeditor.inc.css
@@ -1,25 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 /* Reload and waiting notices */
 .notice-container {
   margin-top: -50vh;
-}
-
-.theme-dark .notice-container {
-  background-color: #343c45; /* Toolbars */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .notice-container {
-  background-color: #f0f1f2; /* Toolbars */
-  color: #585959; /* Grey foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
 }
 
 #reload-notice {
   font-size: 120%;
 }
 
 #waiting-notice {
   font-size: 110%;
@@ -70,62 +62,51 @@ g.edgePath.param-connection {
  * dotted lines. */
 .theme-dark g.edgeLabel rect {
   fill: #14171a;
 }
 .theme-light g.edgeLabel rect {
   fill: #fcfcfc; /* Background - Editor */
 }
 .theme-dark g.edgeLabel tspan {
-  fill: #b6babf; /* Grey foreground text */
+  fill: var(--theme-body-color-alt);
 }
 .theme-light g.edgeLabel tspan {
   fill: #585959; /* Grey foreground text */
 }
 
 /* Audio Nodes */
 .nodes rect {
   stroke-width: 1px;
   cursor: pointer;
 }
 
-.theme-dark .nodes rect {
-  stroke: #252c33; /* Tab toolbar */
-  fill: #343c45; /* Toolbars */
+.nodes rect {
+  stroke: var(--theme-tab-toolbar-background);
+  fill: var(--theme-toolbar-background);
 }
 
-.theme-light .nodes rect {
-  stroke: #ebeced; /* Tab toolbar */
-  fill: #f0f1f2; /* Toolbar */
-}
-
-.theme-dark .nodes g.selected rect {
-  fill: #1d4f73; /* Select Highlight Blue */
-}
-
-.theme-light .nodes g.selected rect {
-  fill: #4c9ed9; /* Select Highlight Blue */
+.nodes g.selected rect {
+  fill: var(--theme-selection-background);
 }
 
 /* Text in nodes and edges */
 text {
   cursor: default; /* override the "text" cursor */
   font-weight: 300;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
   font-size: 14px;
 }
 
-.theme-dark text {
-  fill: #b6babf; /* Grey foreground text */
+text {
+  fill: var(--theme-body-color-alt);
 }
-.theme-light text {
-  fill: #585959; /* Grey foreground text */
-}
+
 .theme-light g.selected text {
-  fill: #f0f1f2; /* Toolbars */
+  fill: var(--theme-toolbar-background);
 }
 
 .nodes text {
   cursor: pointer;
 }
 
 /**
  * Inspector Styles
--- a/browser/themes/shared/devtools/webconsole.inc.css
+++ b/browser/themes/shared/devtools/webconsole.inc.css
@@ -155,22 +155,18 @@ a {
   -moz-margin-start: 7px;
   width: calc(100% - 7px);
 }
 
 #output-container.hideTimestamps > .message > .timestamp {
   display: none;
 }
 
-.theme-dark #output-container.hideTimestamps > .message > .indent {
-  background-color: #14171a; /* .theme-body */
-}
-
-.theme-light #output-container.hideTimestamps > .message > .indent {
-  background-color: #fcfcfc; /* .theme-body */
+#output-container.hideTimestamps > .message > .indent {
+  background-color: var(--theme-body-background);
 }
 
 .filtered-by-type,
 .filtered-by-string {
   display: none;
 }
 
 .hidden-message {
@@ -214,22 +210,18 @@ a {
 .theme-light .message[severity=error] {
   background-color: rgba(255, 150, 150, 0.3);
 }
 
 .theme-dark .message[severity=error] {
   background-color: rgba(235, 83, 104, 0.17);
 }
 
-.theme-dark .console-string {
-  color: #d99b28;
-}
-
-.theme-light .console-string {
-  color: hsl(24,85%,39%);
+.console-string {
+  color: var(--theme-highlight-lightorange);
 }
 
 .theme-selected .console-string,
 .theme-selected .cm-number,
 .theme-selected .cm-variable,
 .theme-selected .kind-ArrayLike {
   color: #f5f7fa !important; /* Selection Text Color */
 }
@@ -494,57 +486,49 @@ a {
 .open-inspector:hover {
   background-position: -32px 0;
 }
 
 .open-inspector:active {
   background-position: -16px 0;
 }
 
-/* Replace these values with CSS variables as available */
-.theme-dark .jsterm-input-container {
-  background-color: #252c33; /* tabToolbarBackgroundColor */
-  border-color: #14171a; /* mainBackgroundColor */
+.jsterm-input-container {
+  background-color: var(--theme-tab-toolbar-background);
+  border-color: var(--theme-body-background);
 }
 
-.theme-dark .jsterm-input-node {
-  color: #a9bacb; /* textColor */
+.jsterm-input-node {
+  color: var(--theme-content-color1);
 }
 
-.theme-dark .jsterm-complete-node {
-  color: #5c6773; /* commentColor */
+.jsterm-complete-node {
+  color: var(--theme-comment);
 }
 
-.theme-dark .navigation-marker .url {
-  background: #14171a; /* mainBackgroundColor */
+.navigation-marker .url {
+  background: var(--theme-body-background);
 }
 
 .theme-dark .inlined-variables-view iframe {
   border-color: #333;
 }
 
 .theme-dark .stacktrace {
   border-color: #333;
 }
 
 .theme-light .jsterm-input-container {
-  background-color: #fff; /* mainBackgroundColor */
+  /* For light theme use a white background for the input - it looks better
+     than off-white */
+  background-color: #fff;
   border-color: ThreeDShadow;
 }
-
-.theme-light .jsterm-input-node {
-  color: black; /* textColor */
-}
-
-.theme-light .jsterm-complete-node {
-  color: hsl(90,2%,46%); /* commentColor */
-}
-
 .theme-light .navigation-marker .url {
-  background: #fff; /* mainBackgroundColor */
+  background: #fff;
 }
 
 .theme-light .inlined-variables-view iframe {
   border-color: #ccc;
 }
 
 .theme-light .stacktrace {
   border-color: #ccc;
--- a/browser/themes/shared/devtools/widgets.inc.css
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -117,24 +117,24 @@
   opacity: 0.5;
 }
 
 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
 .scrollbutton-up:-moz-locale-dir(ltr),
 .scrollbutton-down:-moz-locale-dir(rtl) {
   border-right: solid 1px rgba(255, 255, 255, .1);
   border-left: solid 1px transparent;
-  box-shadow: 3px 0px 3px -3px #181d20;
+  box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
 }
 
 .scrollbutton-down:-moz-locale-dir(ltr),
 .scrollbutton-up:-moz-locale-dir(rtl) {
   border-right: solid 1px transparent;
   border-left: solid 1px rgba(255, 255, 255, .1);
-  box-shadow: -3px 0px 3px -3px #181d20;
+  box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
 }
 
 .scrollbutton-up[disabled],
 .scrollbutton-down[disabled] {
   box-shadow: none;
   border-color: transparent;
 }
 
@@ -156,34 +156,24 @@
 #breadcrumb-separator-before,
 #breadcrumb-separator-after,
 #breadcrumb-separator-normal {
   width: 12px;
   height: 24px;
   overflow: hidden;
 }
 
-.theme-dark #breadcrumb-separator-before,
-.theme-dark #breadcrumb-separator-after:after {
-  background: #1d4f73; /* Select Highlight Blue */
+#breadcrumb-separator-before,
+#breadcrumb-separator-after:after {
+  background: var(--theme-selection-background);
 }
 
-.theme-dark #breadcrumb-separator-after,
-.theme-dark #breadcrumb-separator-before:after {
-  background: #343c45; /* Toolbars */
-}
-
-.theme-light #breadcrumb-separator-before,
-.theme-light #breadcrumb-separator-after:after {
-  background: #4c9ed9; /* Select Highlight Blue */
-}
-
-.theme-light #breadcrumb-separator-after,
-.theme-light #breadcrumb-separator-before:after {
-  background: #f0f1f2; /* Toolbars */
+#breadcrumb-separator-after,
+#breadcrumb-separator-before:after {
+  background: var(--theme-toolbar-background);
 }
 
 /* This chevron arrow cannot be replicated easily in CSS, so we are using
  * a background image for it (still keeping it in a separate element so
  * we can handle RTL support with a CSS transform).
  */
 #breadcrumb-separator-normal {
   background: url(breadcrumbs-divider@2x.png) no-repeat center right;
@@ -226,22 +216,18 @@
 .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
   background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
 }
 
 .breadcrumbs-widget-item[checked] {
   background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
 }
 
-.theme-dark .breadcrumbs-widget-item[checked] {
-  background-color: #1d4f73; /* Select Highlight Blue */
-}
-
-.theme-light .breadcrumbs-widget-item[checked] {
-  background-color: #4c9ed9; /* Select Highlight Blue */
+.breadcrumbs-widget-item[checked] {
+  background-color: var(--theme-selection-background);
 }
 
 .breadcrumbs-widget-item:first-child {
   background-image: none;
 }
 
 /* RTL support: move the images that were on the left to the right,
  * and move images that were on the right to the left.
@@ -265,49 +251,37 @@
 #breadcrumb-separator-after:-moz-locale-dir(rtl):after {
   transform: translateX(-5px) rotate(45deg);
 }
 
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
 .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
-  color: #f5f7fa; /* Foreground (Text) - Light */
+  color: var(--theme-selection-color);
 }
 
 .theme-dark .breadcrumbs-widget-item {
-  color: #f5f7fa; /* Foreground (Text) - Light */
+  color: var(--theme-selection-color);
 }
 
 .theme-light .breadcrumbs-widget-item {
-  color: #18191a; /* Foreground (Text) - Dark */
+  color: var(--theme-body-color);
 }
 
-.theme-dark .breadcrumbs-widget-item-id {
-  color: #b6babf; /* Foreground (Text) - Grey */
-}
-
-.theme-light .breadcrumbs-widget-item-id {
-  color: #585959; /* Foreground (Text) - Grey */
+.breadcrumbs-widget-item-id {
+  color: var(--theme-body-color-alt);
 }
 
-.theme-dark .breadcrumbs-widget-item-classes {
-  color: #a9bacb; /* Content (Text) - Light */
+.breadcrumbs-widget-item-classes {
+  color: var(--theme-content-color1);
 }
 
-.theme-light .breadcrumbs-widget-item-classes {
-  color: #667380; /* Content (Text) - Dark Grey */
-}
-
-.theme-dark .breadcrumbs-widget-item-pseudo-classes {
-  color: #d99b28; /* Light Orange */
-}
-
-.theme-light .breadcrumbs-widget-item-pseudo-classes {
-  color: #d97e00; /* Light Orange */
+.breadcrumbs-widget-item-pseudo-classes {
+  color: var(--theme-highlight-lightorange);
 }
 
 .theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
   color: white;
 }
 
 .theme-light .breadcrumbs-widget-item:not([checked]):hover label {
   color: black;
@@ -315,82 +289,63 @@
 
 /* SimpleListWidget */
 
 .simple-list-widget-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
 }
 
-.theme-dark .simple-list-widget-item.selected {
-  background-color: #1d4f73; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .simple-list-widget-item.selected {
-  background-color: #4c9ed9; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
+.simple-list-widget-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .theme-dark .simple-list-widget-item:not(.selected):hover {
   background-color: rgba(255,255,255,.05);
 }
 
 .theme-light .simple-list-widget-item:not(.selected):hover {
   background-color: rgba(0,0,0,.05);
 }
 
 .simple-list-widget-empty-text,
 .simple-list-widget-perma-text {
   padding: 4px 8px;
 }
 
-.theme-dark .simple-list-widget-empty-text,
-.theme-dark .simple-list-widget-perma-text {
-  color: #b6babf; /* Light foreground text */
-}
-
-.theme-light .simple-list-widget-empty-text,
-.theme-light .simple-list-widget-perma-text {
-  color: #585959; /* Grey foreground text */
+.simple-list-widget-empty-text,
+.simple-list-widget-perma-text {
+  color: var(--theme-body-color-alt);
 }
 
 /* FastListWidget */
 
 .fast-list-widget-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
 }
 
 .fast-list-widget-empty-text {
   padding: 4px 8px;
 }
 
-.theme-dark .fast-list-widget-empty-text {
-  color: #b6babf; /* Light foreground text */
-}
-
-.theme-light .fast-list-widget-empty-text {
-  color: #585959; /* Grey foreground text */
+.fast-list-widget-empty-text {
+  color: var(--theme-body-color-alt);
 }
 
 /* SideMenuWidget */
 
 .side-menu-widget-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
 }
 
 /* SideMenuWidget container */
 
-.theme-dark .side-menu-widget-container,
-.theme-dark .side-menu-widget-empty-text {
-  background-color: #343c45; /* Toolbars */
-}
-
 .theme-dark .side-menu-widget-container:-moz-locale-dir(ltr),
 .theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
   box-shadow: inset -1px 0 0 @smw_marginDark@;
 }
 
 .theme-dark .side-menu-widget-container:-moz-locale-dir(rtl),
 .theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) {
   box-shadow: inset 1px 0 0 @smw_marginDark@;
@@ -415,65 +370,59 @@
   /* To compensate for the arrow image's dark margin. */
   -moz-margin-end: -1px;
 }
 
 /* SideMenuWidget groups */
 
 .side-menu-widget-group-title {
   padding: 4px;
+  background-color: var(--theme-tab-toolbar-background);
 }
 
 .theme-dark .side-menu-widget-group-title {
-  background-color: #252c33; /* Tab toolbar */
-  color: #a9bacb; /* Light content text */
+  color: var(--theme-content-color1);
 }
 
 .theme-light .side-menu-widget-group-title {
-  background-color: #ebeced; /* Tab toolbar */
-  color: #667380; /* Dark grey content text */
+  color: var(--theme-content-color3);
 }
 
 /* SideMenuWidget items */
 
 .side-menu-widget-item {
   /* To compensate for the top and bottom borders */
   margin-top: -1px;
   margin-bottom: -1px;
   background-clip: padding-box;
 }
 
 .theme-dark .side-menu-widget-item {
   border-top: 1px solid @smw_itemDarkTopBorder@;
   border-bottom: 1px solid @smw_itemDarkBottomBorder@;
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-dark .side-menu-widget-item:last-of-type {
   box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;
 }
 
 .theme-light .side-menu-widget-item {
   border-top: 1px solid @smw_itemLightTopBorder@;
   border-bottom: 1px solid @smw_itemLightBottomBorder@;
-  color: #18191a; /* Dark foreground text */
+  color: var(--theme-body-color);
 }
 
 .theme-light .side-menu-widget-item:last-of-type {
   box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
 }
 
-.theme-dark .side-menu-widget-item.selected {
-  background-color: #1d4f73; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .side-menu-widget-item.selected {
-  background-color: #4c9ed9; /* Select Highlight Blue */
-  color: #f5f7fa; /* Light foreground text */
+.side-menu-widget-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .side-menu-widget-item-arrow {
   -moz-margin-start: -7px;
   width: 7px; /* The image's width is 7 pixels */
   /* Cover the border of the side-menu-widget-item */
   margin-top: -1px;
   margin-bottom: -1px;
@@ -537,91 +486,71 @@
 }
 
 .theme-light .side-menu-widget-item-other {
   background-color: rgba(128,128,128,.1);
 }
 
 .theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other {
   background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-light .side-menu-widget-item.selected .side-menu-widget-item-other {
   background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */
-  color: #18191a; /* Dark foreground text */
+  color: var(--theme-body-color);
 }
 
-.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
+.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
   background-color: transparent;
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
-  background-color: transparent;
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 /* SideMenuWidget checkboxes */
 
 .side-menu-widget-group-checkbox {
   margin: 0;
   -moz-margin-end: 4px;
 }
 
 .side-menu-widget-item-checkbox {
   margin: 0;
   -moz-margin-start: 4px;
 }
 
 /* SideMenuWidget misc */
 
-.side-menu-widget-empty-text {
-  padding: 4px 8px;
+.theme-dark .side-menu-widget-container,
+.theme-dark .side-menu-widget-empty-text {
+  background-color: var(--theme-toolbar-background);
 }
 
-.theme-dark .side-menu-widget-empty-text {
-  background-color: #343c45; /* Toolbars */
-  color: #b6babf; /* Foreground (Text) - Grey */
-}
-
-.theme-light .side-menu-widget-empty-text {
-  background: #f7f7f7; /* Toolbars */
-  color: #585959; /* Grey foreground text */
+.side-menu-widget-empty-text {
+  padding: 4px 8px;
 }
 
 /* VariablesView */
 
 .variables-view-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
 }
 
 .variables-view-empty-notice {
   padding: 2px;
 }
 
-.theme-dark .variables-view-empty-notice {
-  color: #b6babf; /* Foreground (Text) - Grey */
-}
-
-.theme-light .variables-view-empty-notice {
-  color: #585959; /* Grey foreground text */
+.variables-view-empty-notice {
+  color: var(--theme-body-color-alt);
 }
 
-.theme-dark .variables-view-scope:focus > .title,
-.theme-dark .variable-or-property:focus > .title {
-  background-color: #1d4f73; /* Selection colors */
-  color: #f5f7fa;
-}
-
-.theme-light .variables-view-scope:focus > .title,
-.theme-light .variable-or-property:focus > .title {
-  background-color: #4c9ed9; /* Selection colors */
-  color: #f5f7fa;
+.variables-view-scope:focus > .title,
+.variable-or-property:focus > .title {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .variables-view-scope > .title {
   border-top-width: 1px;
   border-top-style: solid;
   margin-top: -1px;
 }
 
@@ -1101,31 +1030,26 @@
 /* Charts */
 
 .generic-chart-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
 }
 
 .theme-dark .generic-chart-container {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-light .generic-chart-container {
-  color: #585959; /* Grey foreground text */
+  color: var(--theme-body-color-alt);
 }
 
-.theme-dark .chart-colored-blob {
-  fill: #a9bacb; /* Light content text */
-  background: #a9bacb;
-}
-
-.theme-light .chart-colored-blob {
-  fill: #8fa1b2; /* Grey content text */
-  background: #8fa1b2;
+.chart-colored-blob {
+  fill: var(--theme-content-color2);
+  background: var(--theme-content-color2);
 }
 
 /* Charts: Pie */
 
 .pie-chart-slice {
   stroke-width: 1px;
   cursor: pointer;
 }
@@ -1213,56 +1137,52 @@
   cursor: inherit;
 }
 
 .table-chart-totals {
   margin-top: 8px;
   padding-top: 6px;
 }
 
-.theme-dark .table-chart-totals {
-  border-top: 1px solid #b6babf; /* Grey foreground text */
-}
-
-.theme-light .table-chart-totals {
-  border-top: 1px solid #585959; /* Grey foreground text */
+.table-chart-totals {
+  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
 }
 
 .table-chart-summary-label {
   font-weight: 600;
   padding: 1px 0px;
 }
 
 .theme-dark .table-chart-summary-label {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-light .table-chart-summary-label {
-  color: #18191a; /* Dark foreground text */
+  color: var(--theme-body-color);
 }
 
 /* Table Widget */
 
 /* Table body */
 
 .table-widget-body > .devtools-side-splitter {
   border: none;
 }
 
 .table-widget-body {
   overflow: auto;
 }
 
 .theme-light .table-widget-body {
-  background: #F7F7F7; /* Background-Sidebar */
+  background: var(--theme-sidebar-background);
 }
 
 .theme-dark .table-widget-body,
 .theme-dark .table-widget-empty-text {
-  background-color: #343c45; /* Toolbars */
+  background-color: var(--theme-toolbar-background);
 }
 
 .theme-dark .table-widget-body:-moz-locale-dir(ltr) {
   box-shadow: inset -1px 0 0 @smw_marginDark@;
 }
 
 .theme-dark .table-widget-body:-moz-locale-dir(rtl) {
   box-shadow: inset 1px 0 0 @smw_marginDark@;
@@ -1342,17 +1262,17 @@
   background-clip: padding-box;
   min-width: 100px;
   -moz-user-focus: normal;
 }
 
 .theme-dark .table-widget-cell {
   border-top: 1px solid @smw_itemDarkTopBorder@;
   border-bottom: 1px solid @smw_itemDarkBottomBorder@;
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
 .theme-dark .table-widget-cell:not(.theme-selected)[odd] {
   background: rgba(255,255,255,0.05);
 }
 
 .theme-dark .table-widget-cell:last-of-type {
@@ -1360,45 +1280,35 @@
 }
 
 .theme-light .table-widget-cell {
   border-top: 1px solid @smw_itemLightTopBorder@;
   border-bottom: 1px solid @smw_itemLightBottomBorder@;
 }
 
 .theme-light .table-widget-cell:not(.theme-selected) {
-  color: #18191a; /* Dark foreground text */
+  color: var(--theme-body-color);
 }
 
 .theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
 .theme-light .table-widget-cell:not(.theme-selected)[odd] {
   background: rgba(128,128,128,0.05);
 }
 
 .theme-light .table-widget-cell:last-of-type {
   box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
 }
 
-.theme-light .table-widget-cell.flash-out {
-  animation: light-flash-out 0.5s ease-in;
+.table-widget-cell.flash-out {
+  animation: flash-out 0.5s ease-in;
 }
 
-@keyframes light-flash-out {
+@keyframes flash-out {
   to {
-    background: #E8B671;
-  }
-}
-
-.theme-dark .table-widget-cell.flash-out {
-  animation: dark-flash-out 0.5s ease-in;
-}
-
-@keyframes dark-flash-out {
-  to {
-    background: #B28025;
+    background: var(--theme-contrast-background);
   }
 }
 
 /* Empty text and initial text */
 
 .table-widget-empty-text {
   display: none;
   text-align: center;