New dark theme. Updated CSS and graphics. Most theming is CSS

although JS theming is required for the base of the popup. A
listener is installed to update the sidebar on default -> dark changes.

addon/manifest.json.tmpl

@@ -60,6 +60,7 @@
       "contextMenus",
       "webRequest",
       "webRequestBlocking",
-      "bookmarks"
+      "bookmarks",
+      "management"
     ]
   }

addon/popup.css

@@ -4,6 +4,14 @@ html {
   overflow: hidden;
 }
 
+:root {
+  --dark-theme-background-color: #4a4a4f;
+  --dark-theme-highlight-color: #6d6d6f;
+  --dark-theme-superhighlight-color: hsla(0, 0%, 80%, 0.45);
+  --dark-theme-color: #fff;
+  --dark-theme-links: #45a1ff;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -183,6 +191,31 @@ supply a favicon */
   justify-content: center;
 }
 
+/* Dark theme */
+
+#panel.dark-theme,
+#panel.dark-theme .tab {
+  background: var(--dark-theme-background-color);
+  color: var(--dark-theme-color);
+}
+
+#panel.dark-theme .tab:hover,
+#panel.dark-theme .tab:focus,
+#panel.dark-theme .separator {
+  background: var(--dark-theme-highlight-color);
+}
+
+#panel.dark-theme .feedback-button,
+#panel.dark-theme .mobile-toggle {
+  background-color: var(--dark-theme-superhighlight-color);
+  color: var(--dark-theme-color);
+}
+
+#panel.dark-theme .feedback-button:hover,
+#panel.dark-theme .mobile-toggle:hover {
+  background-color: hsla(0, 0%, 80%, 0.6);
+}
+
 #recent-tabs[style$="none;"] + #open-tabs {
   margin-top: 6px;
 }

addon/popup.js

@@ -169,6 +169,25 @@ function cacheRecentTabs(value) {
   localStorage.setItem("recentTabs", JSON.stringify(value));
 }
 
+function applyDarkTheme() {
+  document.body.style.background = "#4a4a4f";
+  document.body.style.color = "#fff";
+  document.querySelector("#panel").classList.add("dark-theme");
+}
+
+async function checkForDark() {
+  browser.management.getAll().then((extensions) => {
+    for (let extension of extensions) {
+    // The user has the default dark theme enabled
+    if (extension.id ===
+      "[email protected]@personas.mozilla.org"
+      && extension.enabled) {
+        applyDarkTheme();
+      }
+    }
+  });
+}
+
 async function init() {
   document.addEventListener("contextmenu", event => event.preventDefault());
 
@@ -199,6 +218,8 @@ async function init() {
     element("#private-warning").style.display = "";
   }
   updateHome();
+
+  checkForDark();
 }
 
 init();

addon/sidebar.css

@@ -6,6 +6,13 @@ html {
   color: rgb(12, 12, 13);
 }
 
+:root {
+  --dark-theme-background-color: #4a4a4f;
+  --dark-theme-highlight-color: #6d6d6f;
+  --dark-theme-color: #fff;
+  --dark-theme-links: #45a1ff;
+}
+
 * {
   box-sizing: border-box;
   text-align: center;
@@ -147,3 +154,27 @@ body {
   color: rgb(0, 96, 223);
   text-decoration: underline;
 }
+
+/* Dark theme */
+
+.page.dark-theme {
+  color: var(--dark-theme-color);
+  background: var(--dark-theme-background-color);
+}
+
+.page.dark-theme button:hover,
+.page.dark-theme button:focus,
+.page.dark-theme .graphic__shadow {
+  background: var(--dark-theme-highlight-color);
+  background-color: transparent;
+}
+
+.page.dark-theme .default-link,
+.page.dark-theme .default-link:hover,
+.page.dark-theme .default-link:focus {
+  color: var(--dark-theme-links);
+}
+
+.page.dark-theme .graphic__clouds {
+  background: url(images/in-content-clouds-dark.png);
+}

addon/sidebar.js

@@ -2,6 +2,23 @@ function element(selector) {
   return document.querySelector(selector);
 }
 
+function applyDarkTheme() {
+  document.querySelector(".page").classList.add("dark-theme");
+}
+
+async function checkForDark() {
+  browser.management.getAll().then((extensions) => {
+    for (let extension of extensions) {
+    // The user has the default dark theme enabled
+    if (extension.id ===
+      "[email protected]@personas.mozilla.org"
+      && extension.enabled) {
+        applyDarkTheme();
+      }
+    }
+  });
+}
+
 async function init() {
   await browser.runtime.sendMessage({
     type: "sidebarOpened",
@@ -20,6 +37,11 @@ async function init() {
   if (browser.sideview !== undefined) {
     await browser.sideview.increaseSidebarMaxWidth();
   }
+
+  checkForDark();
+  browser.management.onEnabled.addListener((info) => {
+    checkForDark();
+  });
 }
 
 init();