From 94b0d4767d58a0fc46410b5efc6e0b88cb6add4a Mon Sep 17 00:00:00 2001
From: Brian Grinstead <bgrinstead@mozilla.com>
Date: Thu, 20 Nov 2014 12:10:32 -0800
Subject: [PATCH] Bug 1102369 - Convert existing devtools colors to CSS
 variables - part 2;r=vporof

---
 .../devtools/styleinspector/computed-view.js  |   5 +-
 .../shared/devtools/canvasdebugger.inc.css    | 114 +++------
 .../themes/shared/devtools/debugger.inc.css   | 178 ++++----------
 browser/themes/shared/devtools/inspector.css  |  12 +-
 .../themes/shared/devtools/markup-view.css    |  24 +-
 .../themes/shared/devtools/netmonitor.inc.css | 140 ++++-------
 .../themes/shared/devtools/profiler.inc.css   | 115 +++------
 browser/themes/shared/devtools/ruleview.css   |  20 +-
 .../shared/devtools/shadereditor.inc.css      |  37 +--
 browser/themes/shared/devtools/splitview.css  |   2 +-
 .../themes/shared/devtools/styleeditor.css    |  51 ++--
 .../themes/shared/devtools/toolbars.inc.css   |  55 ++---
 .../shared/devtools/webaudioeditor.inc.css    |  43 +---
 .../themes/shared/devtools/webconsole.inc.css |  50 ++--
 .../themes/shared/devtools/widgets.inc.css    | 224 ++++++------------
 15 files changed, 309 insertions(+), 761 deletions(-)

diff --git a/browser/devtools/styleinspector/computed-view.js b/browser/devtools/styleinspector/computed-view.js
index eb270562b37..79618310bef 100644
--- a/browser/devtools/styleinspector/computed-view.js
+++ b/browser/devtools/styleinspector/computed-view.js
@@ -574,7 +574,10 @@ CssHtmlTree.prototype = {
     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);
diff --git a/browser/themes/shared/devtools/canvasdebugger.inc.css b/browser/themes/shared/devtools/canvasdebugger.inc.css
index 745b0d6547c..3ccfa64854e 100644
--- a/browser/themes/shared/devtools/canvasdebugger.inc.css
+++ b/browser/themes/shared/devtools/canvasdebugger.inc.css
@@ -15,16 +15,8 @@
 .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 {
@@ -112,14 +104,9 @@
   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 {
@@ -282,36 +269,22 @@
   }
 }
 
-.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 {
@@ -319,14 +292,11 @@
   -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,
@@ -336,12 +306,10 @@
 
 .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 {
@@ -370,28 +338,16 @@
   text-decoration: underline;
 }
 
-.theme-dark .call-item-stack-fn-name {
-  color: #a9bacb; /* Content (Text) - Light */
+.call-item-stack-fn-name {
+  color: var(--theme-content-color3);
 }
 
-.theme-light .call-item-stack-fn-name {
-  color: #667380; /* Content (Text) - Dark Grey */
+.call-item-stack-fn-location {
+  color: var(--theme-highlight-bluegrey);
 }
 
-.theme-dark .call-item-stack-fn-location {
-  color: #5e88b0; /* Highlight Blue-Grey */
-}
-
-.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) {
@@ -465,12 +421,12 @@
 
 .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 {
@@ -498,25 +454,13 @@
   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 */
-  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 */
+#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;
diff --git a/browser/themes/shared/devtools/debugger.inc.css b/browser/themes/shared/devtools/debugger.inc.css
index 6dc3dd7e9f4..9c7ccff6667 100644
--- a/browser/themes/shared/devtools/debugger.inc.css
+++ b/browser/themes/shared/devtools/debugger.inc.css
@@ -18,14 +18,9 @@
   -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 */
@@ -189,28 +184,16 @@
   text-align: end;
 }
 
-.theme-dark .dbg-classic-stackframe-details-url {
-  color: #a9bacb; /* Light content text */
+.dbg-classic-stackframe-details-url {
+  color: var(--theme-content-color1);
 }
 
-.theme-light .dbg-classic-stackframe-details-url {
-  color: #667380; /* Dark grey content text */
+.dbg-classic-stackframe-details-sep {
+  color: var(--theme-body-color-alt)
 }
 
-.theme-dark .dbg-classic-stackframe-details-sep {
-  color: #b6babf; /* Grey foreground text */
-}
-
-.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 {
@@ -252,7 +235,7 @@
 /* Tracer dark theme */
 
 .theme-dark .trace-item {
-  color: #f5f7fa; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 .theme-dark .trace-item.black-boxed {
@@ -267,31 +250,30 @@
   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 {
@@ -306,27 +288,6 @@
   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;
@@ -371,12 +332,8 @@
   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 */
@@ -385,28 +342,16 @@
   font-weight: 600;
 }
 
-.theme-dark .dbg-event-listener-location {
-  color: #a9bacb; /* Light content text */
+.dbg-event-listener-location {
+  color: var(--theme-content-color1);
 }
 
-.theme-light .dbg-event-listener-location {
-  color: #667380; /* Dark grey content text */
+.dbg-event-listener-separator {
+  color: var(--theme-body-color-alt);
 }
 
-.theme-dark .dbg-event-listener-separator {
-  color: #b6babf; /* Grey foreground text */
-}
-
-.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 {
@@ -475,27 +420,19 @@
 }
 
 .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 */
+  color: var(--theme-body-color);
 }
 
-.theme-dark .results-panel-item-label-before {
-  color: #5e88b0; /* Highlight blue grey */
+.results-panel-item-label-before {
+  color: var(--theme-highlight-bluegrey);
 }
 
-.theme-light .results-panel-item-label-before {
-  color: #5f88b0; /* Highlight blue grey */
-}
-
-.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 {
@@ -551,22 +488,20 @@
   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 {
@@ -577,38 +512,25 @@
   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 */
+.dbg-results-header-match-count {
+  color: var(--theme-content-color3);
 }
 
-.theme-light .dbg-results-header-match-count {
-  color: #667380; /* Dark grey content text */
+.dbg-results-line-number {
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-body-color-alt);
 }
 
-.theme-dark .dbg-results-line-number {
-  background-color: #252c33; /* Tab toolbars */
-  color: #b6babf; /* Grey foreground text */
-}
-
-.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 */
diff --git a/browser/themes/shared/devtools/inspector.css b/browser/themes/shared/devtools/inspector.css
index 89333cb5307..b72b7b34361 100644
--- a/browser/themes/shared/devtools/inspector.css
+++ b/browser/themes/shared/devtools/inspector.css
@@ -105,11 +105,6 @@
   margin-bottom: 0;
 }
 
-.theme-dark .event-tooltip-attributes-box {
-  background-color: #B6BABF;
-  color: #343C45;
-}
-
 .event-tooltip-attributes-container {
   display: flex;
   flex-shrink: 0;
@@ -124,6 +119,8 @@
   border-radius: 3px;
   padding: 2px;
   -moz-margin-start: 5px;
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-toolbar-background);
 }
 
 .event-tooltip-attributes {
@@ -131,8 +128,3 @@
   font-size: 9px;
   padding-top: 2px;
 }
-
-.theme-light .event-tooltip-attributes-box {
-  background-color: #585959;
-  color: #F0F1F2;
-}
diff --git a/browser/themes/shared/devtools/markup-view.css b/browser/themes/shared/devtools/markup-view.css
index f28bcd57334..e1912d863f9 100644
--- a/browser/themes/shared/devtools/markup-view.css
+++ b/browser/themes/shared/devtools/markup-view.css
@@ -27,7 +27,7 @@
 .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 */
@@ -53,14 +53,9 @@
   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 {
@@ -99,12 +94,7 @@
   -moz-user-select: none;
 }
 
-.theme-dark .markupview-events {
-  background-color: #b6babf;
-  color: #14171a;
-}
-
-.theme-light .markupview-events {
-  background-color: #585959;
-  color: #fcfcfc;
+.markupview-events {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
 }
diff --git a/browser/themes/shared/devtools/netmonitor.inc.css b/browser/themes/shared/devtools/netmonitor.inc.css
index 50bb3c2ea7d..9908e082086 100644
--- a/browser/themes/shared/devtools/netmonitor.inc.css
+++ b/browser/themes/shared/devtools/netmonitor.inc.css
@@ -9,14 +9,6 @@
   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;
 }
@@ -288,30 +280,30 @@ label.requests-menu-status-code {
 }
 
 .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;
 }
 
@@ -449,8 +441,8 @@ label.requests-menu-status-code {
 /* 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 */
@@ -499,16 +491,8 @@ label.requests-menu-status-code {
 #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 {
@@ -572,13 +556,13 @@ label.requests-menu-status-code {
 .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,
@@ -591,12 +575,12 @@ label.requests-menu-status-code {
 
 .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 {
@@ -696,12 +680,8 @@ label.requests-menu-status-code {
   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 {
@@ -714,84 +694,44 @@ label.requests-menu-status-code {
   -moz-margin-end: 3vw;
 }
 
-.theme-dark .chart-colored-blob[name=html] {
-  fill: #5e88b0; /* Blue-Grey highlight */
-  background: #5e88b0;
+.chart-colored-blob[name=html] {
+  fill: var(--theme-highlight-bluegrey);
+  background: var(--theme-highlight-bluegrey);
 }
 
-.theme-light .chart-colored-blob[name=html] {
-  fill: #5f88b0; /* Blue-Grey highlight */
-  background: #5f88b0;
+.chart-colored-blob[name=css] {
+  fill: var(--theme-highlight-blue);
+  background: var(--theme-highlight-blue);
 }
 
-.theme-dark .chart-colored-blob[name=css] {
-  fill: #46afe3; /* Blue highlight */
-  background: #46afe3;
+.chart-colored-blob[name=js] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
 }
 
-.theme-light .chart-colored-blob[name=css] {
-  fill: #0088cc; /* Blue highlight */
-  background: #0088cc;
+.chart-colored-blob[name=xhr] {
+  fill: var(--theme-highlight-orange);
+  background: var(--theme-highlight-orange);
 }
 
-.theme-dark .chart-colored-blob[name=js] {
-  fill: #d99b28; /* Light Orange highlight */
-  background: #d99b28;
+.chart-colored-blob[name=fonts] {
+  fill: var(--theme-highlight-purple);
+  background: var(--theme-highlight-purple);
 }
 
-.theme-light .chart-colored-blob[name=js] {
-  fill: #d97e00; /* Light Orange highlight */
-  background: #d97e00;
+.chart-colored-blob[name=images] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);
 }
 
-.theme-dark .chart-colored-blob[name=xhr] {
-  fill: #d96629; /* Orange highlight */
-  background: #d96629;
+.chart-colored-blob[name=media] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
 }
 
-.theme-light .chart-colored-blob[name=xhr] {
-  fill: #f13c00; /* Orange highlight */
-  background: #f13c00;
-}
-
-.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;
-}
-
-.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;
-}
-
-.theme-light .chart-colored-blob[name=media] {
-  fill: #2cbb0f; /* Green highlight */
-  background: #2cbb0f;
-}
-
-.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] {
diff --git a/browser/themes/shared/devtools/profiler.inc.css b/browser/themes/shared/devtools/profiler.inc.css
index 4d55553a53b..3393c3dfb19 100644
--- a/browser/themes/shared/devtools/profiler.inc.css
+++ b/browser/themes/shared/devtools/profiler.inc.css
@@ -8,16 +8,8 @@
 .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,
@@ -55,14 +47,9 @@
   -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 {
@@ -97,14 +84,9 @@
   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 {
@@ -132,12 +114,8 @@
   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]) {
@@ -149,14 +127,9 @@
   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 {
@@ -167,14 +140,9 @@
   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 {
@@ -229,12 +197,8 @@
 
 /* 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 {
@@ -276,6 +240,7 @@
   -moz-box-align: center;
   overflow: hidden;
   padding: 1px 4px;
+  color: var(--theme-body-color);
 }
 
 .call-tree-header:not(:last-child),
@@ -286,13 +251,11 @@
 .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) {
@@ -303,12 +266,8 @@
   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) {
@@ -335,16 +294,12 @@
   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 {
@@ -371,33 +326,19 @@
   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=""],
diff --git a/browser/themes/shared/devtools/ruleview.css b/browser/themes/shared/devtools/ruleview.css
index 10d9f447dcc..b0ade0f76e8 100644
--- a/browser/themes/shared/devtools/ruleview.css
+++ b/browser/themes/shared/devtools/ruleview.css
@@ -51,12 +51,8 @@
 }
 
 /* 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 {
@@ -64,7 +60,7 @@
 }
 
 .ruleview-rule[uneditable=true] .theme-link {
-  color: #5f88b0; /* Blue - Grey */
+  color: var(--theme-highlight-bluegrey);
 }
 
 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
@@ -198,7 +194,7 @@
 }
 
 .theme-light .ruleview-overridden {
-  text-decoration-color: #667380; /*  Content (Text) - Dark Grey */
+  text-decoration-color: var(--theme-content-color3);
 }
 
 .styleinspector-propertyeditor {
@@ -215,12 +211,8 @@
   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,
diff --git a/browser/themes/shared/devtools/shadereditor.inc.css b/browser/themes/shared/devtools/shadereditor.inc.css
index 94b9ab025cd..199bfab5210 100644
--- a/browser/themes/shared/devtools/shadereditor.inc.css
+++ b/browser/themes/shared/devtools/shadereditor.inc.css
@@ -6,16 +6,8 @@
 
 .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 {
@@ -99,26 +91,15 @@
   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 */
diff --git a/browser/themes/shared/devtools/splitview.css b/browser/themes/shared/devtools/splitview.css
index e9c36fb23d9..77f4de74887 100644
--- a/browser/themes/shared/devtools/splitview.css
+++ b/browser/themes/shared/devtools/splitview.css
@@ -18,7 +18,7 @@
 }
 
 .theme-dark .splitview-nav-container {
-  background-color: #343c45; /* Toolbars */
+  background-color: var(--theme-toolbar-background);
 }
 
 .splitview-nav {
diff --git a/browser/themes/shared/devtools/styleeditor.css b/browser/themes/shared/devtools/styleeditor.css
index c69d36a8428..788d4aa156e 100644
--- a/browser/themes/shared/devtools/styleeditor.css
+++ b/browser/themes/shared/devtools/styleeditor.css
@@ -14,24 +14,24 @@
 
 .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 {
@@ -44,7 +44,7 @@
 .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 {
@@ -205,12 +205,8 @@ h3 {
   }
 }
 
-.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 {
@@ -274,34 +270,19 @@ h3 {
   -moz-border-start: none;
 }
 
-.theme-dark .chart-colored-blob[name="Used Preload"] {
-  fill: #df80ff; /* Pink highlight */
-  background: #df80ff;
+.chart-colored-blob[name="Used Preload"] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);;
 }
 
-.theme-light .chart-colored-blob[name="Used Preload"] {
-  fill: #b82ee5; /* Pink highlight */
-  background: #b82ee5;
+.chart-colored-blob[name=Used] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
 }
 
-.theme-dark .chart-colored-blob[name=Used] {
-  fill: #70bf53; /* Green highlight */
-  background: #70bf53;
-}
-
-.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 */
diff --git a/browser/themes/shared/devtools/toolbars.inc.css b/browser/themes/shared/devtools/toolbars.inc.css
index 6d7321f0868..ebef2f5aecb 100644
--- a/browser/themes/shared/devtools/toolbars.inc.css
+++ b/browser/themes/shared/devtools/toolbars.inc.css
@@ -57,6 +57,8 @@
   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,
@@ -141,14 +143,10 @@
 
 .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 */
 }
 
@@ -189,7 +187,7 @@
 .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],
@@ -203,7 +201,7 @@
 .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],
@@ -259,16 +257,7 @@
   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 {
@@ -310,7 +299,7 @@
 }
 
 .devtools-no-search-result {
-  border-color: #eb5368 !important;
+  border-color: var(--theme-highlight-red) !important;
 }
 
 /* Close button */
@@ -349,7 +338,6 @@
 }
 
 /* In-tools sidebar */
-
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;
@@ -363,8 +351,8 @@
 }
 
 .theme-light .devtools-sidebar-tabs > tabpanels {
-  background: #f7f7f7;
-  color: #18191a;
+  background: var(--theme-sidebar-background);
+  color: var(--theme-body-color);
 }
 
 .devtools-sidebar-tabs > tabs {
@@ -434,7 +422,7 @@
 
 .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;
 }
@@ -464,7 +452,7 @@
 
 .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@;
 }
@@ -663,18 +651,16 @@
   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 {
@@ -697,13 +683,13 @@
 }
 
 .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 {
@@ -717,7 +703,7 @@
 
 .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 {
@@ -755,17 +741,18 @@
   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;
diff --git a/browser/themes/shared/devtools/webaudioeditor.inc.css b/browser/themes/shared/devtools/webaudioeditor.inc.css
index 9e33f2b8e6e..274c41d9d24 100644
--- a/browser/themes/shared/devtools/webaudioeditor.inc.css
+++ b/browser/themes/shared/devtools/webaudioeditor.inc.css
@@ -5,16 +5,8 @@
 /* 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 {
@@ -75,7 +67,7 @@ g.edgePath.param-connection {
   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 */
@@ -87,22 +79,13 @@ g.edgePath.param-connection {
   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 */
@@ -113,14 +96,12 @@ text {
   font-size: 14px;
 }
 
-.theme-dark text {
-  fill: #b6babf; /* Grey foreground text */
-}
-.theme-light text {
-  fill: #585959; /* Grey foreground text */
+text {
+  fill: var(--theme-body-color-alt);
 }
+
 .theme-light g.selected text {
-  fill: #f0f1f2; /* Toolbars */
+  fill: var(--theme-toolbar-background);
 }
 
 .nodes text {
diff --git a/browser/themes/shared/devtools/webconsole.inc.css b/browser/themes/shared/devtools/webconsole.inc.css
index 6ce4ce24b9c..98b74be6f50 100644
--- a/browser/themes/shared/devtools/webconsole.inc.css
+++ b/browser/themes/shared/devtools/webconsole.inc.css
@@ -160,12 +160,8 @@ a {
   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,
@@ -219,12 +215,8 @@ a {
   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,
@@ -499,22 +491,21 @@ a {
   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 {
@@ -526,20 +517,13 @@ a {
 }
 
 .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 {
diff --git a/browser/themes/shared/devtools/widgets.inc.css b/browser/themes/shared/devtools/widgets.inc.css
index 5b9e6722c39..4e5dd137314 100644
--- a/browser/themes/shared/devtools/widgets.inc.css
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -122,14 +122,14 @@
 .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],
@@ -161,24 +161,14 @@
   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
@@ -231,12 +221,8 @@
   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 {
@@ -270,39 +256,27 @@
 .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 */
+.breadcrumbs-widget-item-id {
+  color: var(--theme-body-color-alt);
 }
 
-.theme-light .breadcrumbs-widget-item-id {
-  color: #585959; /* Foreground (Text) - Grey */
+.breadcrumbs-widget-item-classes {
+  color: var(--theme-content-color1);
 }
 
-.theme-dark .breadcrumbs-widget-item-classes {
-  color: #a9bacb; /* Content (Text) - Light */
-}
-
-.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 {
@@ -320,14 +294,9 @@
   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 {
@@ -343,14 +312,9 @@
   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 */
@@ -364,12 +328,8 @@
   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 */
@@ -381,11 +341,6 @@
 
 /* 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@;
@@ -420,16 +375,15 @@
 
 .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 */
@@ -444,7 +398,7 @@
 .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 {
@@ -454,21 +408,16 @@
 .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 {
@@ -542,22 +491,17 @@
 
 .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 */
@@ -574,20 +518,15 @@
 
 /* SideMenuWidget misc */
 
+.theme-dark .side-menu-widget-container,
+.theme-dark .side-menu-widget-empty-text {
+  background-color: var(--theme-toolbar-background);
+}
+
 .side-menu-widget-empty-text {
   padding: 4px 8px;
 }
 
-.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 */
-}
-
 /* VariablesView */
 
 .variables-view-container {
@@ -599,24 +538,14 @@
   padding: 2px;
 }
 
-.theme-dark .variables-view-empty-notice {
-  color: #b6babf; /* Foreground (Text) - Grey */
+.variables-view-empty-notice {
+  color: var(--theme-body-color-alt);
 }
 
-.theme-light .variables-view-empty-notice {
-  color: #585959; /* Grey foreground text */
-}
-
-.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 {
@@ -1106,21 +1035,16 @@
 }
 
 .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 */
@@ -1218,12 +1142,8 @@
   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 {
@@ -1232,11 +1152,11 @@
 }
 
 .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 */
@@ -1252,12 +1172,12 @@
 }
 
 .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) {
@@ -1347,7 +1267,7 @@
 .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),
@@ -1365,7 +1285,7 @@
 }
 
 .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),
@@ -1377,23 +1297,13 @@
   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);
   }
 }