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 241077 d99483864a61044dc7694489298cdec3dd3bf2f6
parent 241076 38d12e852c4bbbd167401be9c52b397115fe2018
child 241078 709fd162929e2c0b9650f02e7a48f65d84095d28
push id4311
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 19:37:41 +0000
treeherdermozilla-beta@150c9fed433b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersvporof
bugs1102369
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;