From: Robert Kaiser <kairo@kairo.at>
Date: Sun, 15 Mar 2015 22:24:38 +0000 (+0100)
Subject: third part of syncing LCARStrek with Firefox 36 windows theme changes (changeset... 
X-Git-Tag: EarlyBlue-2.33~3
X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=de5e780daa5242500976dde56483222a51ecdae5;p=themes.git

third part of syncing LCARStrek with Firefox 36 windows theme changes (changeset d99483864a61 up to including profiler)
---

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index 343f0bd6..af16fbdd 100644
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -2761,6 +2761,7 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
 
 .tabs-newtab-button {
   width: 28px;
+  /* width: calc(36px + @tabCurveWidth@); */
 }
 
 /* === END tabs.inc.css === */
diff --git a/LCARStrek/browser/devtools/canvasdebugger.css b/LCARStrek/browser/devtools/canvasdebugger.css
index 295f485a..ab9e9b06 100644
--- a/LCARStrek/browser/devtools/canvasdebugger.css
+++ b/LCARStrek/browser/devtools/canvasdebugger.css
@@ -7,9 +7,8 @@
 .notice-container {
   margin-top: -50vh;
   font-size: 120%;
-
-  background-color: #000000; /* Toolbars */
-  color: #FF9F00; /* Light foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
 }
 
 #empty-notice > button {
@@ -83,6 +82,11 @@
   font-size: 80%;
 }
 
+.snapshot-item-calls,
+.snapshot-item-save {
+  color: var(--theme-body-color);
+}
+
 .snapshot-item-save {
   padding-bottom: 2px;
   font-size: 90%;
@@ -237,9 +241,9 @@
 }
 
 .call-item-gutter {
-  background-color: #A09090;
-  color: #000000;
-  border-color: #000;
+  background-color: var(--theme-contrastsidebar-background);
+  color: var(--theme-contrastsidebar-color);
+  border-color: var(--theme-contrastsidebar-bordercolor);
 }
 
 .call-item-index {
@@ -247,11 +251,11 @@
 }
 
 .call-item-context {
-  color: #FFCF00; /* Highlight Orange */
+  color: var(--theme-highlight-lightorange);
 }
 
 .call-item-name {
-  color: #9C9CFF; /* Highlight Blue */
+  color: var(--theme-highlight-blue);
 }
 
 .call-item-location {
@@ -259,10 +263,11 @@
   -moz-padding-end: 6px;
   text-align: end;
   cursor: pointer;
+  color: var(--theme-highlight-bluegrey);
 }
 
 .call-item-location:hover {
-  color: #FFCF00; /* Highlight Blue */
+  color: var(--theme-highlight-blue);
 }
 
 .call-item-view:hover .call-item-location,
@@ -272,7 +277,6 @@
 
 .call-item-location {
   border-color: #A09090;
-  color: #9C9CFF; /* Highlight Blue-Grey */
 }
 
 .call-item-stack {
@@ -298,15 +302,15 @@
 }
 
 .call-item-stack-fn-name {
-  color: #A09090; /* Content (Text) - Light */
+  color: var(--theme-content-color2);
 }
 
 .theme-dark .call-item-stack-fn-location {
-  color: #FF9F00; /* Highlight Blue-Grey */
+  color: var(--theme-content-color1);
 }
 
 .theme-dark .call-item-stack-fn-location:hover {
-  color: #9C9CFF; /* Highlight Blue */
+  color: var(--theme-highlight-blue);
 }
 
 #calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
@@ -372,7 +376,7 @@
 
 #snapshot-filmstrip {
   border-top: 1px solid #000;
-  color: #FF9F00; /* Light foreground text */
+  color: var(--theme-body-color);
 }
 
 .filmstrip-thumbnail {
@@ -397,12 +401,12 @@
 }
 
 .filmstrip-thumbnail {
-  -moz-border-end: 1px solid #000;
+  -moz-border-end: 1px solid var(--theme--contrastsidebar-bordercolor)
 }
 
 #snapshot-filmstrip > .filmstrip-thumbnail:hover,
 #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
-  border: 1px solid #9C9CFF; /* Highlight Blue */
+  border: 1px solid var(--theme-highlight-blue);
   margin: 0 0 0 -1px;
   padding: 0;
   opacity: 0.66;
diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index 0a4151a2..7193fc78 100644
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -6,19 +6,59 @@
 /* According to:
  * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
  */
+:root {
+  --theme-body-background: #000000;
+  --theme-sidebar-background: #000000;
+  --theme-contrast-background: #402800;
+  --theme-contrast-border: #A09090;
+
+  --theme-tab-toolbar-background: #.252c33;
+  --theme-toolbar-background: #000000;
+  --theme-hover-background: #FFCF00;
+  --theme-hover-color: #000000;
+  --theme-selection-background: #008484;
+  --theme-selection-color: #000000;
+  --theme-selection-background2: #004242;
+  --theme-selection-color2: #FF9F00;
+  --theme-splitter-color: #9C9CFF;
+  --theme-comment: #A09090;
+
+  --theme-contrastsidebar-background: #A09090;
+  --theme-contrastsidebar-color: #000000;
+  --theme-contrastsidebar-bordercolor: #000000;
+
+  --theme-body-color: #FF9F00;
+  --theme-body-color-alt: #A09090;
+  --theme-content-color1: #FF9F00;
+  --theme-content-color2: #A09090;
+  --theme-content-color3: #FF9F00;
+  --theme-content-disabled: #8050B0;
+
+  --theme-text-blue: #3333FF;
+  --theme-highlight-green: #008484;
+  --theme-highlight-blue: #9C9CFF;
+  --theme-highlight-bluegrey: #A09090;
+  --theme-highlight-purple: #C09070;
+  --theme-highlight-darkpurple: #6000CF;
+  --theme-highlight-lightorange: #FFCF00;
+  --theme-highlight-orange: #FF9F00;
+  --theme-highlight-red: #FF0000;
+  --theme-highlight-pink: #E7ADE7;
+}
+
 .theme-body {
-  background: #000000;
-  color: #FF9F00;
+  background: var(--theme-body-background);
+  color: var(--theme-body-color);
 }
 
 .theme-sidebar {
-  background: #000000;
-  color: #FF9F00;
+  background: var(--theme-sidebar-background);
+  color: var(--theme-content-color1);
 }
 
 ::-moz-selection {
-  background-color: #008484;
-  color: #FFCF00;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .theme-bg-darker {
@@ -27,18 +67,18 @@
 
 .theme-selected,
 .CodeMirror-hint-active {
-  background: #004242;
-  color: #FF9F00; /* Light foreground text */
+  background-color: var(--theme-selection-background2);
+  color: var(--theme-selection-color2);
 }
 
 .theme-bg-contrast,
-.variable-or-property:not([overridden])[changed] { /* contrast bg color to attract attention on a container */
-  background: #402800; /* Background - Attention */
+.variable-or-property:not([overridden])[changed] {
+  background: var(--theme-contrast-background);
 }
 
 .theme-link,
 .cm-s-mozilla .cm-link { /* original: blue */
-  color: #3333FF;
+  color: var(--theme-text-blue);
 }
 
 /*
@@ -47,8 +87,8 @@
  */
 .theme-link:visited,
 .cm-s-mozilla .cm-link:visited,
-.CodeMirror-Tern-type { /* original: blue */
-  color: #3333FF;
+.CodeMirror-Tern-type {
+  color: var(--theme-text-blue);
 }
 
 .theme-comment,
@@ -56,17 +96,14 @@
 .cm-s-mozilla .cm-hr,
 .cm-s-mozilla .cm-comment,
 .variable-or-property .token-undefined,
-.variable-or-property .token-null { /* original: grey */
-  color: #A09090;
-}
-
+.variable-or-property .token-null,
 .CodeMirror-Tern-completion-unknown:before {
-  background-color: #A09090;
+  color: var(--theme-comment);
 }
 
 .theme-gutter {
   background-color: #000000;
-  color: #FF9F00;
+  color: var(--theme-content-color3);
   border-color: #9C9CFF;
 }
 
@@ -78,8 +115,8 @@
 .cm-s-mozilla .cm-number,
 .variable-or-property .token-number,
 .variable-or-property[return] > .title > .name,
-.variable-or-property[scope] > .title > .name { /* original: green */
-  color: #008484;
+.variable-or-property[scope] > .title > .name {
+  color: var(--theme-highlight-green);
 }
 
 .CodeMirror-Tern-completion-number:before {
@@ -92,8 +129,8 @@
 .cm-s-mozilla .cm-def,
 .cm-s-mozilla .cm-property,
 .cm-s-mozilla .cm-qualifier,
-.variables-view-variable > .title > .name { /* original: blue */
-  color: #9C9CFF;
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-blue);
 }
 
 .CodeMirror-Tern-completion-object:before {
@@ -102,7 +139,7 @@
 
 .cm-s-mozilla .cm-unused-line {
   text-decoration: line-through;
-  -moz-text-decoration-color: #8050B0;
+  text-decoration-color: #8050B0;
 }
 
 .cm-s-mozilla .cm-executed-line {
@@ -113,31 +150,31 @@
 .cm-s-mozilla .cm-builtin,
 .cm-s-mozilla .cm-tag,
 .cm-s-mozilla .cm-header,
+.cm-s-mozilla .cm-bracket,
 .variables-view-property > .title > .name,
-.variable-or-property[safe-getter] > .title > .name { /* original: pink/lavender */
-  color: #E7ADE7;
+.variable-or-property[safe-getter] > .title > .name {
+  color: var(--theme-highlight-pink);
 }
 
 .CodeMirror-Tern-completion-array:before {
-  background-color: #E7ADE7;
+  color: var(--theme-highlight-pink); /* var(--theme-highlight-bluegrey) */
 }
 
-.theme-fg-color4 { /* original: purple/violet */
-  color: #C09070;
+.theme-fg-color4 {
+  color: var(--theme-highlight-purple);
 }
 
 .theme-fg-color5,
-.cm-s-mozilla .cm-bracket,
-.cm-s-mozilla .cm-keyword { /* original: Yellow */
-  color: #FFCF00;
+.cm-s-mozilla .cm-keyword {
+  color: var(--theme-highlight-lightorange);
 }
 
 .theme-fg-color6,
 .cm-s-mozilla .cm-string,
 .cm-s-mozilla .cm-string-2,
 .variable-or-property .token-string,
-.CodeMirror-Tern-farg { /* original: Orange */
-  color: #E7ADE7;
+.CodeMirror-Tern-farg {
+  color: var(--theme-highlight-pink); /* -orange? */
 }
 
 .CodeMirror-Tern-completion-string:before,
@@ -151,8 +188,8 @@
 .cm-s-mozilla .cm-error,
 .variable-or-property .token-boolean,
 .variable-or-property .token-domnode,
-.variable-or-property[exception] > .title > .name { /* original: Red */
-  color: #FF0000;
+.variable-or-property[exception] > .title > .name {
+  color: var(--theme-highlight-red);
 }
 
 .CodeMirror-Tern-completion-bool:before {
@@ -167,6 +204,8 @@
 .devtools-toolbar,
 .devtools-sidebar-tabs > tabs,
 .CodeMirror-dialog { /* General toolbar styling */
+/*  color: var(--theme-body-color-alt);
+  background-color: var(--theme-toolbar-background);*/
 }
 
 
@@ -200,8 +239,8 @@
 .cm-s-mozilla .cm-variable-2,
 .cm-s-mozilla .cm-variable-3,
 .cm-s-mozilla .cm-operator,
-.cm-s-mozilla .cm-special { /* theme-body color */
-  color: #FF9F00;
+.cm-s-mozilla .cm-special {
+  color: var(--theme-content-color1);
 }
 
 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
@@ -251,12 +290,12 @@ div.CodeMirror span.eval-text {
 }
 
 .cm-s-mozilla .CodeMirror-linenumber { /* line number text */
-  color: #A09090;
+  color: var(--theme-content-color2);
 }
 
 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
-  border-right-color: #A09090;
-  background-color: #402800;
+  border-right-color: var(--theme-contrast-border);
+  background-color: var(--theme-contrast-background);
 }
 
 .cm-s-markup-view pre {
@@ -362,9 +401,12 @@ div.CodeMirror span.eval-text {
 }
 
 .devtools-horizontal-splitter {
+/*  border-bottom: 1px solid var(--theme-splitter-color); */
 }
 
 .devtools-side-splitter {
+/*  -moz-border-end: 1px solid var(--theme-splitter-color);
+  border-color: var(--theme-splitter-color); / Needed for responsive container at low width. */
 }
 
 .devtools-textinput,
@@ -380,7 +422,7 @@ div.CodeMirror span.eval-text {
 .CodeMirror-hints,
 .CodeMirror-Tern-tooltip {
   background-color: #000000;
-  color: #FF9F00;
+  color: var(--theme-body-color);
 }
 
 /* === BEGIN toolbars.inc.css === */
diff --git a/LCARStrek/browser/devtools/debugger.css b/LCARStrek/browser/devtools/debugger.css
index d953c9c3..c91b191f 100644
--- a/LCARStrek/browser/devtools/debugger.css
+++ b/LCARStrek/browser/devtools/debugger.css
@@ -15,7 +15,7 @@ window {
 }
 
 #sources-pane > tabs {
-  -moz-border-end: 1px solid #9C9CFF; /* Match the splitter color. */
+  -moz-border-end-color: var(--theme-splitter-color);
 }
 
 #sources-toolbar > .devtools-toolbarbutton,
@@ -190,7 +190,7 @@ window {
 /* Tracer dark+light theme */
 
 .trace-item {
-  color: #FF9F00; /* Light foreground text */
+  color: var(--theme-content-color1);
 }
 
 .trace-item.black-boxed {
@@ -206,24 +206,24 @@ window {
 }
 
 .trace-call {
-  color: #9C9CFF; /* highlight blue */
+  color: var(--theme-highlight-blue);
 }
 
 .trace-return,
 .trace-yield {
-  color: #008484; /* highlight green */
+  color: var(--theme-highlight-green);
 }
 
 .trace-throw {
-  color: #FF0000; /* highlight red */
+  color: var(--theme-highlight-red);
 }
 
 .trace-param {
-  color: #E7ADE7; /* Content text light  */
+  color: var(--theme-highlight-pink);
 }
 
 .trace-syntax {
-  color: #A09090; /* highlight grey */
+  color: var(--theme-content-color2);
 }
 
 /* Breadcrumbs stack frames view */
@@ -263,15 +263,15 @@ window {
 .dbg-classic-stackframe-details-url {
   max-width: 90%;
   text-align: end;
-  color: #3333FF;
+  color: var(--theme-text-blue);
 }
 
 .dbg-classic-stackframe-details-sep {
-  color: #A09090;
+  color: var(--theme-body-color-alt)
 }
 
 .dbg-classic-stackframe-details-line {
-  color: #9C9CFF;
+  color: var(--theme-highlight-blue);
 }
 
 #callstack-list .side-menu-widget-item.selected label {
@@ -371,8 +371,7 @@ window {
   background: none;
   text-decoration: underline;
   cursor: pointer;
-
-  color: #9C9CFF; /* Blue highlight color */
+  color: var(--theme-highlight-blue);
 }
 
 /* Event listeners view */
@@ -386,15 +385,15 @@ window {
 }
 
 .dbg-event-listener-separator {
-  color: #A09090;
+  color: var(--theme-body-color-alt);
 }
 
 .dbg-event-listener-targets {
-  color: #9C9CFF;
+  color: var(--theme-highlight-blue);
 }
 
 .dbg-event-listener-location {
-  color: #E7ADE7;
+  color: var(--theme-highlight-pink);
 }
 
 #event-listeners .side-menu-widget-item.selected {
@@ -463,18 +462,18 @@ window {
 
 .results-panel-item-label-before {
   -moz-margin-end: 5px !important;
-  color: #A09090;
+  color: var(--theme-content-color2);
   cursor: inherit;
 }
 
 .results-panel-item-label {
-  color: #9C9CFF;
+  color: var(--theme-highlight-blue);
   font-weight: 600;
   cursor: inherit;
 }
 
 .results-panel-item-label-below {
-  color: #FF9F00;
+  color: var(--theme-content-color3);
   cursor: inherit;
 }
 
@@ -508,17 +507,17 @@ window {
 
 .dbg-results-header-match-count {
   -moz-padding-start: 6px;
-  color: #8050B0;
+  color: var(--theme-content-disabled);
 }
 
 .dbg-results-line-number {
-  background: #000000;
+  background-color: var(--theme-toolbar-background);
   min-width: 40px;
   -moz-border-end: 1px solid #9C9CFF;
   -moz-padding-end: 4px;
   padding-top: 2px;
   text-align: end;
-  color: #FF9F00;
+  color: var(--theme-body-color);
 }
 
 .dbg-results-line-contents {
@@ -529,11 +528,12 @@ window {
 
 .dbg-results-line-contents-string {
   padding: 1px;
+/*  color: var(--theme-body-color-alt);*/
 }
 
 .dbg-results-line-contents-string[match=true] {
   background: #E7ADE7;
-  color: #000000;
+  color: var(--theme-selection-color);
   padding: 0;
   border: 1px solid #9C9CFF;
   border-radius: 4px;
diff --git a/LCARStrek/browser/devtools/highlighter.css b/LCARStrek/browser/devtools/highlighter.css
deleted file mode 100644
index 5e02dc8f..00000000
--- a/LCARStrek/browser/devtools/highlighter.css
+++ /dev/null
@@ -1,169 +0,0 @@
-/* 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/. */
-
-/*
-  The :-moz-native-anonymous selector prefix prevents the styles defined here
-  from impacting web content.
-  Indeed, this pseudo-class is only available to chrome code.
-  This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
-  pseudo-class is important.
-  Having bug 1086532 fixed would make it possible to load this stylesheet in a
-  <style scoped> node instead, directly in the native anonymous container
-  element.
-*/
-
-:-moz-native-anonymous .highlighter-container {
-  pointer-events: none;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-:-moz-native-anonymous .highlighter-container [hidden] {
-  display: none;
-}
-
-/* Box model highlighter */
-:-moz-native-anonymous .box-model-container {
-  opacity: 0.4;
-}
-
-:-moz-native-anonymous .box-model-content {
-  fill: #008484;
-}
-
-:-moz-native-anonymous .box-model-padding {
-  fill: #9C9CFF;
-}
-
-:-moz-native-anonymous .box-model-border {
-  fill: #FFCF00;
-}
-
-:-moz-native-anonymous .box-model-margin {
-  fill: #A09090;
-}
-
-:-moz-native-anonymous .box-model-content,
-:-moz-native-anonymous .box-model-padding,
-:-moz-native-anonymous .box-model-border,
-:-moz-native-anonymous .box-model-margin {
-  stroke: none;
-}
-
-:-moz-native-anonymous .box-model-guide-top,
-:-moz-native-anonymous .box-model-guide-right,
-:-moz-native-anonymous .box-model-guide-bottom,
-:-moz-native-anonymous .box-model-guide-left {
-  stroke: #E7ADE7;
-  stroke-dasharray: 5 3;
-  shape-rendering: crispEdges;
-}
-
-/* Highlighter - Node Infobar */
-
-:-moz-native-anonymous .box-model-nodeinfobar-container {
-  position: absolute;
-  max-width: 95%;
-
-  font: message-box;
-  font-size: 11px;
-}
-
-:-moz-native-anonymous .box-model-nodeinfobar {
-  position: relative;
-
-  /* Centering the nodeinfobar in the container */
-  left: -50%;
-
-  padding: 5px;
-  min-width: 75px;
-
-  border-radius: 3px;
-  background: #000000 no-repeat padding-box;
-
-  color: #FF9F00;
-}
-
-:-moz-native-anonymous .box-model-nodeinfobar-container[hide-arrow] > .box-model-nodeinfobar {
-  margin: 7px 0;
-}
-
-/* Arrows */
-
-:-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before {
-  content: "";
-  display: none;
-
-  position: absolute;
-  left: calc(50% - 14px);
-
-  height: 0;
-  width: 0;
-  border: 14px solid #008484;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-:-moz-native-anonymous .box-model-nodeinfobar-container[position="top"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
-  border-bottom: 0;
-  top: 100%;
-  display: block;
-}
-
-:-moz-native-anonymous .box-model-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
-  border-top: 0;
-  bottom: 100%;
-  display: block;
-}
-
-/* Text container */
-
-:-moz-native-anonymous .box-model-nodeinfobar-text {
-  overflow: hidden;
-  white-space: nowrap;
-  direction: ltr;
-  text-align: center;
-  padding-bottom: 1px;
-}
-
-:-moz-native-anonymous .highlighter-nodeinfobar-tagname {
-  color: #FFCF00;
-}
-
-:-moz-native-anonymous .highlighter-nodeinfobar-id {
-  color: #9C9CFF;
-}
-
-:-moz-native-anonymous .highlighter-nodeinfobar-classes,
-:-moz-native-anonymous .highlighter-nodeinfobar-pseudo-classes {
-  color: #FF9F00;
-}
-
-:-moz-native-anonymous .highlighter-nodeinfobar-dimensions {
-  color: #A09090;
-  -moz-border-start: 1px solid #9C9CFF;
-  -moz-margin-start: 6px;
-  -moz-padding-start: 6px;
-}
-
-/* Css transform highlighter */
-
-:-moz-native-anonymous .css-transform-transformed {
-  fill: #9C9CFF;
-  opacity: 0.8;
-}
-
-:-moz-native-anonymous .css-transform-untransformed {
-  fill: #A09090;
-  opacity: 0.8;
-}
-
-:-moz-native-anonymous .css-transform-transformed,
-:-moz-native-anonymous .css-transform-untransformed,
-:-moz-native-anonymous .css-transform-line {
-  stroke: #E7ADE7;
-  stroke-dasharray: 5 3;
-  stroke-width: 2;
-}
diff --git a/LCARStrek/browser/devtools/inspector.css b/LCARStrek/browser/devtools/inspector.css
index c86492b5..4a6c379b 100644
--- a/LCARStrek/browser/devtools/inspector.css
+++ b/LCARStrek/browser/devtools/inspector.css
@@ -354,11 +354,6 @@ window {
   margin-bottom: 0;
 }
 
-.event-tooltip-attributes-box {
-  background-color: #000000;
-  color: #9C9CFF;
-}
-
 .event-tooltip-attributes-container {
   display: flex;
   flex-shrink: 0;
@@ -373,6 +368,8 @@ window {
   border-radius: 3px;
   padding: 2px;
   -moz-margin-start: 5px;
+  background-color: var(--theme-sidebar-background);
+  color: var(--theme-highlight-blue);
 }
 
 .event-tooltip-attributes {
diff --git a/LCARStrek/browser/devtools/markup-view.css b/LCARStrek/browser/devtools/markup-view.css
index 64285d1d..f257ffca 100644
--- a/LCARStrek/browser/devtools/markup-view.css
+++ b/LCARStrek/browser/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: #000000; /* Light foreground text */
+  color: var(--theme-selection-color);
 }
 
 /* In case a node isn't displayed in the page, we fade the syntax highlighting */
@@ -51,11 +51,9 @@
   border-left: 1px solid;
   border-bottom: 1px solid;
   overflow: hidden;
-}
 
-#previewbar {
-  background: #000000; /* Tab Toolbar */
-  border-color: #9C9CFF; /* Splitters */
+  background: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
 }
 
 #preview {
@@ -92,9 +90,7 @@
   padding: 0px 2px;
   -moz-margin-start: 5px;
   -moz-user-select: none;
-}
-
-.markupview-events {
-  background-color: #A09090;
-  color: #000000;
+  
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
 }
diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css
index 07b4b415..d2fde02d 100644
--- a/LCARStrek/browser/devtools/netmonitor.css
+++ b/LCARStrek/browser/devtools/netmonitor.css
@@ -13,8 +13,6 @@ window {
   margin: 0;
   padding: 12px;
   font-size: 120%;
-
-  color: #FF9F00;
 }
 
 #notice-perf-message {
@@ -252,16 +250,16 @@ box.requests-menu-status[code^="5"] {
 }
 
 .requests-menu-timings-division[division-scale=millisecond] {
-  -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
+  -moz-border-start-color: var(--theme-body-color) !important;
 }
 
 .requests-menu-timings-division[division-scale=second] {
-  -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
+  -moz-border-start-color: var(--theme-body-color) !important;
   font-weight: 600;
 }
 
 .requests-menu-timings-division[division-scale=minute] {
-  -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
+  -moz-border-start-color: var(--theme-body-color) !important;
   font-weight: 600;
 }
 
@@ -384,8 +382,8 @@ box.requests-menu-status[code^="5"] {
 /* Network request details tabpanels */
 
 .tabpanel-content {
-  background-color: #000000;
-  color: #FF9F00;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
 }
 
 /* Summary tabpanel */
@@ -434,9 +432,8 @@ box.requests-menu-status[code^="5"] {
 #response-content-info-header {
   margin: 0;
   padding: 3px 8px;
-
-  background-color: #FF0000; /* Red highlight */
-  color: #000000; /* Light foreground text */
+  background-color: var(--theme-highlight-red);
+  color: var(--theme-selection-color);
 }
 
 #response-content-image-box {
@@ -500,6 +497,7 @@ box.requests-menu-status[code^="5"] {
 #requests-menu-footer {
   border-top: 1px solid #9C9CFF;
   padding-top: 3px;
+  background-color: var(--theme-toolbar-background);
 }
 
 .requests-menu-footer-button,
@@ -509,8 +507,7 @@ box.requests-menu-status[code^="5"] {
   -moz-margin-end: 3px;
   border: none;
   padding: 0px 1vw;
-
-/*  color: #fff;*/
+/*  color: var(--theme-body-color);*/
 }
 
 .requests-menu-footer-spacer {
@@ -574,8 +571,7 @@ box.requests-menu-status[code^="5"] {
 
 #network-statistics-charts {
   min-height: 1px;
-
-  background: #000000; /* Toolbars */
+  background-color: var(--theme-toolbar-background);
 }
 
 #network-statistics-charts .pie-chart-container {
@@ -589,43 +585,43 @@ box.requests-menu-status[code^="5"] {
 }
 
 .chart-colored-blob[name=html] {
-  fill: #A09090; /* Blue-Grey highlight */
-  background: #A09090;
+  fill: var(--theme-highlight-bluegrey);
+  background: var(--theme-highlight-bluegrey);
 }
 
 .chart-colored-blob[name=css] {
-  fill: #9C9CFF; /* Blue highlight */
-  background: #9C9CFF;
+  fill: var(--theme-highlight-blue);
+  background: var(--theme-highlight-blue);
 }
 
 .chart-colored-blob[name=js] {
-  fill: #FFCF00; /* Light Orange highlight */
-  background: #FFCF00;
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
 }
 
 .chart-colored-blob[name=xhr] {
-  fill: #FF9F00; /* Orange highlight */
-  background: #FF9F00;
+  fill: var(--theme-highlight-orange);
+  background: var(--theme-highlight-orange);
 }
 
 .chart-colored-blob[name=fonts] {
-  fill: #6000CF; /* Purple highlight */
-  background: #6000CF;
+  fill: var(--theme-highlight-darkpurple);
+  background: var(--theme-highlight-darkpurple);
 }
 
 .chart-colored-blob[name=images] {
-  fill: #E7ADE7; /* Pink highlight */
-  background: #E7ADE7;
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);
 }
 
 .chart-colored-blob[name=media] {
-  fill: #008484; /* Green highlight */
-  background: #008484;
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
 }
 
 .chart-colored-blob[name=flash] {
-  fill: #FF0000; /* Red highlight */
-  background: #FF0000;
+  fill: var(--theme-highlight-red);
+  background: var(--theme-highlight-red);
 }
 
 .table-chart-row-label[name=cached] {
diff --git a/LCARStrek/browser/devtools/profiler.css b/LCARStrek/browser/devtools/profiler.css
index dc29a1c6..85b363b7 100644
--- a/LCARStrek/browser/devtools/profiler.css
+++ b/LCARStrek/browser/devtools/profiler.css
@@ -13,11 +13,8 @@ window {
 .notice-container {
   margin-top: -50vh;
   font-size: 120%;
-}
-
-.notice-container {
-  background: #000000; /* Toolbars */
-  color: #FF9F00; /* Light foreground text */
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
 }
 
 #empty-notice button,
@@ -52,7 +49,7 @@ window {
 
 #recordings-pane > tabs,
 #recordings-pane .devtools-toolbar {
-  -moz-border-end-color: #9C9CFF; /* Splitters */
+  -moz-border-end-color: var(--theme-splitter-color);
 }
 
 #record-button {
@@ -89,7 +86,7 @@ window {
 
 .recording-item-duration,
 .recording-item-save {
-  color: #FF9F00; /* Foreground (Text) - Grey */
+  color: var(--theme-body-color-alt);
 }
 
 #recordings-list .selected label {
@@ -117,12 +114,8 @@ window {
   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]) {
@@ -136,17 +129,17 @@ window {
 
 #profile-content tab {
   -moz-appearance: none;
-  -moz-border-end: 1px solid #9C9CFF; /* Splitters */
+  -moz-border-end: 1px solid var(--theme-splitter-color);
 }
 
 #profile-content tab:hover {
-  background-color: #FFCF00;
-  color: #000000;
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
 }
 
 #profile-content tab[selected] {
-  background-color: #008484; /* Select Highlight Blue */
-  color: #000000; /* Light foreground text */
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 #profile-content tabpanel {
@@ -182,7 +175,7 @@ window {
 /* Profile call tree */
 
 .call-tree-headers-container {
-  border-top: 1px solid #A09090;
+  border-top: 1px solid var(--theme-splitter-color);
 }
 
 .call-tree-cells-container {
@@ -224,6 +217,7 @@ window {
   -moz-box-align: center;
   overflow: hidden;
   padding: 1px 4px;
+  color: var(--theme-body-color);
 }
 
 .call-tree-header:not(:last-child),
@@ -234,7 +228,6 @@ window {
 .call-tree-header,
 .call-tree-cell {
   -moz-border-end-color: #9C9CFF;
-  color: #FF9F00; /* Body Text */
 }
 
 .call-tree-header:not(:last-child) {
@@ -246,8 +239,8 @@ window {
 }
 
 .call-tree-header {
-  background-color: #A09090; /* Tab Toolbar */
-  color: #000000;
+  background-color: var(--theme-contrastsidebar-background);
+  color: var(--theme-contrastsidebar-color);
 }
 
 .call-tree-item:last-child:not(:focus) {
@@ -263,12 +256,12 @@ window {
 }
 
 .call-tree-item:focus {
-  background-color: #008484; /* Select Highlight Blue */
-  color: #000000;
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .call-tree-item:focus label {
-  color: #000000 !important; /* Light foreground text */
+  color: var(--theme-selection-color) !important;
 }
 
 .call-tree-item:focus .call-tree-cell {
@@ -292,11 +285,11 @@ window {
 }
 
 .call-tree-url {
-  color: #9C9CFF;
+  color: var(--theme-highlight-blue);
 }
 
 .call-tree-line {
-  color: #A09090;
+  color: var(--theme-content-color2);
 }
 
 .call-tree-host {
@@ -305,7 +298,7 @@ window {
 }
 
 .call-tree-host {
-  color: #E7ADE7;
+  color: var(--theme-highlight-pink);
 }
 
 .call-tree-url[value=""],
diff --git a/LCARStrek/browser/devtools/timeline.css b/LCARStrek/browser/devtools/timeline.css
index e38a69e6..64945fe5 100644
--- a/LCARStrek/browser/devtools/timeline.css
+++ b/LCARStrek/browser/devtools/timeline.css
@@ -92,9 +92,7 @@
 
 .waterfall-sidebar {
   -moz-border-end: 1px solid;
-}
 
-.waterfall-sidebar {
   -moz-border-end-color: #9C9CFF;
 }
 
diff --git a/LCARStrek/browser/devtools/widgets.css b/LCARStrek/browser/devtools/widgets.css
index 7e3c1807..4c0826dc 100644
--- a/LCARStrek/browser/devtools/widgets.css
+++ b/LCARStrek/browser/devtools/widgets.css
@@ -814,10 +814,6 @@
 
 /* Line graph widget */
 
-.line-graph-widget-canvas {
-  background: #000000;
-}
-
 .line-graph-widget-gutter {
   position: absolute;
   background: #000000;
@@ -833,7 +829,6 @@
   position: absolute;
   width: 100%;
   border-top: 1px solid;
-  transform: translateY(-1px);
 }
 
 .line-graph-widget-gutter-line[type=maximum] {
@@ -861,7 +856,7 @@
   pointer-events: none;
 }
 
-.line-graph-widget-tooltip::before {
+.line-graph-widget-tooltip[with-arrows=true]::before {
   content: "";
   position: absolute;
   border-top: 3px solid transparent;
@@ -869,26 +864,38 @@
   top: calc(50% - 3px);
 }
 
-.line-graph-widget-tooltip[arrow=start]::before {
+.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
   -moz-border-end: 3px solid #9C9CFF;
   left: -3px;
 }
 
-.line-graph-widget-tooltip[arrow=end]::before {
+.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
   -moz-border-start: 3px solid #9C9CFF;
   right: -3px;
 }
 
 .line-graph-widget-tooltip[type=maximum] {
-  left: calc(10px + 6px);
+  left: -1px;
 }
 
 .line-graph-widget-tooltip[type=minimum] {
-  left: calc(10px + 6px);
+  left: -1px;
 }
 
 .line-graph-widget-tooltip[type=average] {
-  right: 6px;
+  right: -1px;
+}
+
+.line-graph-widget-tooltip[type=maximum][with-arrows=true] {
+  left: 14px;
+}
+
+.line-graph-widget-tooltip[type=minimum][with-arrows=true] {
+  left: 14px;
+}
+
+.line-graph-widget-tooltip[type=average][with-arrows=true] {
+  right: 4px;
 }
 
 .line-graph-widget-tooltip > [text=info] {
diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css
index 2a718506..38c1351d 100644
--- a/LCARStrek/browser/preferences/in-content/preferences.css
+++ b/LCARStrek/browser/preferences/in-content/preferences.css
@@ -389,9 +389,15 @@ description > html|a {
   min-width: 66ch;
 }
 
-.titlebar {
+#dialogBox > .groupbox-title {
   -moz-margin-start: 0;
   -moz-margin-end: 0;
+/*  padding: 3.5px 0;
+  background-color: #F1F1F1; */
+}
+
+#dialogTitle {
+  text-align: center;
 }
 
 .close-icon {