2 files changed, 177 insertions, 118 deletions
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 1ce7eb01..9fa324a0 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -1,111 +1,168 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title></title>
+    <link href="../styles.css" rel="stylesheet" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
-  <link href="../styles.css" rel="stylesheet">
-</head>
+  <body class="popup">
+    <header class="popup">
+      <div class="logo-container">
+        <img
+          src="../../assets/images/icon128.png"
+          alt="Privacy Redirect logo"
+        />
+        <h1>
+          <span data-localize="__MSG_privacy__" class="privacy">Privacy</span
+          ><br /><span data-localize="__MSG_redirect__">Redirect</span>
+        </h1>
+      </div>
+      <div class="version">
+        <span>Version:&nbsp;<span id="version"></span></span>
+      </div>
+    </header>
 
-<body class="popup">
-  <header>
-    <div class="logo-container">
-      <img src="../../assets/images/icon128.png" alt="Privacy Redirect logo">
-      <h1><span data-localize="__MSG_privacy__" class="privacy">Privacy</span><br><span
-          data-localize="__MSG_redirect__">Redirect</span></h1>
-    </div>
-    <div class="version">
-      <span>Version:&nbsp;<span id="version"></span></span>
-    </div>
-  </header>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Nitter redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-nitter"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-nitter" class="checkbox-label"></label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
 
-  <section class="settings-block">
-    <table class="option" aria-label="Toggle Nitter redirects">
-      <tbody>
-        <tr>
-          <td>
-            <h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
-          </td>
-          <td>
-            <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
-            <label for="disable-nitter" class="checkbox-label"></label>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Invidious redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableInvidious__">
+                Invidious Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-invidious"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-invidious" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
 
-  <section class="settings-block">
-    <table class="option" aria-label="Toggle Invidious redirects">
-      <tbody>
-        <tr>
-          <td>
-            <h1 data-localize="__MSG_disableInvidious__">Invidious Redirects</h1>
-          </td>
-          <td>
-            <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
-            <label for="disable-invidious" class="checkbox-label">
-            </label>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle Bibliogram redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableBibliogram__">
+                Bibliogram Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-bibliogram"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-bibliogram" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
 
-  <section class="settings-block">
-    <table class="option" aria-label="Toggle Bibliogram redirects">
-      <tbody>
-        <tr>
-          <td>
-            <h1 data-localize="__MSG_disableBibliogram__">Bibliogram Redirects</h1>
-          </td>
-          <td>
-            <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
-            <label for="disable-bibliogram" class="checkbox-label">
-            </label>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+    <section class="settings-block">
+      <table class="option" aria-label="Toggle OpenStreetMap redirects">
+        <tbody>
+          <tr>
+            <td>
+              <h1 data-localize="__MSG_disableOsm__">
+                OpenStreetMap Redirects
+              </h1>
+            </td>
+            <td>
+              <input
+                aria-hidden="true"
+                id="disable-osm"
+                type="checkbox"
+                checked
+              />&nbsp;
+              <label for="disable-osm" class="checkbox-label"> </label>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
 
-  <section class="settings-block">
-    <table class="option" aria-label="Toggle OpenStreetMap redirects">
-      <tbody>
-        <tr>
-          <td>
-            <h1 data-localize="__MSG_disableOsm__">OpenStreetMap Redirects</h1>
-          </td>
-          <td>
-            <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
-            <label for="disable-osm" class="checkbox-label">
-            </label>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
+    <section class="settings-block"></section>
 
-  <section class="settings-block">
-  </section>
+    <footer>
+      <a class="button" id="more-options">
+        <span data-localize="__MSG_moreOptions__">More Options&nbsp;</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="512"
+          height="512"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+          <polyline
+            points="336 64 448 64 448 176"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+          <line
+            x1="224"
+            y1="288"
+            x2="440"
+            y2="72"
+            style="
+              fill: none;
+              stroke: inherit;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-width: 32px;
+            "
+          />
+        </svg>
+      </a>
+    </footer>
 
-  <footer>
-    <a class="button" id="more-options">
-      <span data-localize="__MSG_moreOptions__">More Options&nbsp;</span>
-      <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
-        <path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48'
-          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-        <polyline points='336 64 448 64 448 176'
-          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-        <line x1='224' y1='288' x2='440' y2='72'
-          style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-      </svg>
-    </a>
-  </footer>
-
-  <script src="./popup.js"></script>
-  <script src="../../assets/javascript/localise.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <script src="./popup.js"></script>
+    <script src="../../assets/javascript/localise.js"></script>
+  </body>
+</html>
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 2e8ec491..ece04384 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -1,21 +1,23 @@
-'use strict';
+"use strict";
 
-let disableNitter = document.querySelector('#disable-nitter');
-let disableInvidious = document.querySelector('#disable-invidious');
-let disableBibliogram = document.querySelector('#disable-bibliogram');
-let disableOsm = document.querySelector('#disable-osm');
-let version = document.querySelector('#version');
+let disableNitter = document.querySelector("#disable-nitter");
+let disableInvidious = document.querySelector("#disable-invidious");
+let disableBibliogram = document.querySelector("#disable-bibliogram");
+let disableOsm = document.querySelector("#disable-osm");
+let version = document.querySelector("#version");
 
 window.browser = window.browser || window.chrome;
 
 browser.storage.sync.get(
   [
-    'disableNitter',
-    'disableInvidious',
-    'disableBibliogram',
-    'disableOsm'
+    "disableNitter",
+    "disableInvidious",
+    "disableBibliogram",
+    "disableOsm",
+    "theme",
   ],
-  result => {
+  (result) => {
+    document.body.classList.add(result.theme);
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
@@ -25,22 +27,22 @@ browser.storage.sync.get(
 
 version.textContent = browser.runtime.getManifest().version;
 
-disableNitter.addEventListener('change', event => {
+disableNitter.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
 });
 
-disableInvidious.addEventListener('change', event => {
+disableInvidious.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableInvidious: !event.target.checked });
 });
 
-disableBibliogram.addEventListener('change', event => {
+disableBibliogram.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableBibliogram: !event.target.checked });
 });
 
-disableOsm.addEventListener('change', event => {
+disableOsm.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
 
-document.querySelector('#more-options').addEventListener('click', () => {
+document.querySelector("#more-options").addEventListener("click", () => {
   browser.runtime.openOptionsPage();
 });