From e41714e69ea93981a292680b30e4347ff8a84444 Mon Sep 17 00:00:00 2001
From: Aaron Rancsik <20153302+aaronrancsik@users.noreply.github.com>
Date: Fri, 1 Oct 2021 11:54:20 +0200
Subject: [PATCH 1/2] Add a new "auto" theme. This theme can adapt to system's
 light or dark theme variants.

---
 src/static/themes/auto/auto.css | 428 ++++++++++++++++++++++++++++++++
 1 file changed, 428 insertions(+)
 create mode 100644 src/static/themes/auto/auto.css

diff --git a/src/static/themes/auto/auto.css b/src/static/themes/auto/auto.css
new file mode 100644
index 00000000..8269c9d6
--- /dev/null
+++ b/src/static/themes/auto/auto.css
@@ -0,0 +1,428 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* {{{ photon-colours */
+
+        /* From https://github.com/overdodactyl/ShadowFox/blob/7dbe9343da87bde804e8fb88dd3b5eaaeb4817b2/css/common-files/color_variables.css */
+        --tridactyl-photon-colours-magenta-50: #ff1ad9;
+        --tridactyl-photon-colours-magenta-60: #ed00b5;
+        --tridactyl-photon-colours-magenta-70: #b5007f;
+        --tridactyl-photon-colours-magenta-80: #7d004f;
+        --tridactyl-photon-colours-magenta-90: #440027;
+        --tridactyl-photon-colours-purple-50: #9400ff;
+        --tridactyl-photon-colours-purple-60: #8000d7;
+        --tridactyl-photon-colours-purple-70: #6200a4;
+        --tridactyl-photon-colours-purple-80: #440071;
+        --tridactyl-photon-colours-purple-90: #25003e;
+        --tridactyl-photon-colours-blue-40: #45a1ff;
+        --tridactyl-photon-colours-blue-50: #0a84ff;
+        --tridactyl-photon-colours-blue-60: #0060df;
+        --tridactyl-photon-colours-blue-70: #003eaa;
+        --tridactyl-photon-colours-blue-80: #002275;
+        --tridactyl-photon-colours-blue-90: #000f40;
+        --tridactyl-photon-colours-teal-50: #00feff;
+        --tridactyl-photon-colours-teal-60: #00c8d7;
+        --tridactyl-photon-colours-teal-70: #008ea4;
+        --tridactyl-photon-colours-teal-80: #005a71;
+        --tridactyl-photon-colours-teal-90: #002d3e;
+        --tridactyl-photon-colours-green-50: #30e60b;
+        --tridactyl-photon-colours-green-60: #12bc00;
+        --tridactyl-photon-colours-green-70: #058b00;
+        --tridactyl-photon-colours-green-80: #006504;
+        --tridactyl-photon-colours-green-90: #003706;
+        --tridactyl-photon-colours-yellow-50: #ffe900;
+        --tridactyl-photon-colours-yellow-60: #d7b600;
+        --tridactyl-photon-colours-yellow-70: #a47f00;
+        --tridactyl-photon-colours-yellow-80: #715100;
+        --tridactyl-photon-colours-yellow-90: #3e2800;
+        --tridactyl-photon-colours-red-50: #ff0039;
+        --tridactyl-photon-colours-red-60: #d70022;
+        --tridactyl-photon-colours-red-70: #a4000f;
+        --tridactyl-photon-colours-red-80: #5a0002;
+        --tridactyl-photon-colours-red-90: #3e0200;
+        --tridactyl-photon-colours-orange-50: #ff9400;
+        --tridactyl-photon-colours-orange-60: #d76e00;
+        --tridactyl-photon-colours-orange-70: #a44900;
+        --tridactyl-photon-colours-orange-80: #712b00;
+        --tridactyl-photon-colours-orange-90: #3e1300;
+        --tridactyl-photon-colours-grey-10: #f9f9fa;
+        --tridactyl-photon-colours-grey-20: #ededf0;
+        --tridactyl-photon-colours-grey-30: #d7d7db;
+        --tridactyl-photon-colours-grey-40: #b1b1b3;
+        --tridactyl-photon-colours-grey-50: #737373;
+        --tridactyl-photon-colours-grey-60: #4a4a4f;
+        --tridactyl-photon-colours-grey-70: #38383d;
+        --tridactyl-photon-colours-grey-80: #2a2a2e;
+        --tridactyl-photon-colours-grey-90: #0c0c0d;
+        --tridactyl-photon-colours-code-green: #86de74 !important;
+        --tridactyl-photon-colours-warning-color: #fce19f;
+        --tridactyl-photon-colours-warning-background-color: #44391f;
+        --tridactyl-photon-colours-theme-highlight-green: #86de74;
+        --tridactyl-photon-colours-theme-highlight-blue: #75bfff;
+        --tridactyl-photon-colours-theme-highlight-purple: #b98eff;
+        --tridactyl-photon-colours-theme-highlight-red: #ff7de9;
+        --tridactyl-photon-colours-theme-highlight-yellow: #fff89e;
+        --tridactyl-photon-colours-theme-highlight-bluegrey: #5e88b0;
+        --tridactyl-photon-colours-theme-highlight-lightorange: #d99b28;
+        --tridactyl-photon-colours-theme-highlight-orange: #d96629;
+        --tridactyl-photon-colours-theme-highlight-pink: #df80ff;
+        --tridactyl-photon-colours-tone-1: var(--tridactyl-photon-colours-grey-10);
+        --tridactyl-photon-colours-tone-2: var(--tridactyl-photon-colours-grey-20);
+        --tridactyl-photon-colours-tone-3: var(--tridactyl-photon-colours-grey-30);
+        --tridactyl-photon-colours-tone-4: var(--tridactyl-photon-colours-grey-40);
+        --tridactyl-photon-colours-tone-5: var(--tridactyl-photon-colours-grey-50);
+        --tridactyl-photon-colours-tone-6: var(--tridactyl-photon-colours-grey-60);
+        --tridactyl-photon-colours-tone-7: var(--tridactyl-photon-colours-grey-70);
+        --tridactyl-photon-colours-tone-8: var(--tridactyl-photon-colours-grey-80);
+        --tridactyl-photon-colours-tone-9: var(--tridactyl-photon-colours-grey-90);
+        --tridactyl-photon-colours-accent-1: var(
+            --tridactyl-photon-colours-blue-40
+        );
+        --tridactyl-photon-colours-accent-2: var(
+            --tridactyl-photon-colours-blue-50
+        );
+        --tridactyl-photon-colours-accent-3: var(
+            --tridactyl-photon-colours-blue-60
+        );
+        --tridactyl-photon-colours-in-content-page-color: var(
+            --tridactyl-photon-colours-tone-4
+        ) !important;
+        --tridactyl-photon-colours-in-content-page-background: var(
+            --tridactyl-photon-colours-tone-7
+        ) !important;
+        --tridactyl-photon-colours-in-content-text-color: var(
+            --tridactyl-photon-colours-tone-3
+        ) !important;
+        --tridactyl-photon-colours-in-content-selected-text: var(
+            --tridactyl-photon-colours-tone-1
+        ) !important;
+        --tridactyl-photon-colours-in-content-box-background: var(
+            --tridactyl-photon-colours-tone-6
+        ) !important;
+        --tridactyl-photon-colours-in-content-box-background-odd: #f3f6fa;
+        --tridactyl-photon-colours-in-content-box-background-hover: var(
+            --tridactyl-photon-colours-tone-6
+        ) !important;
+        --tridactyl-photon-colours-in-content-box-background-active: var(
+            --tridactyl-photon-colours-tone-6
+        ) !important;
+        --tridactyl-photon-colours-in-content-box-border-color: var(
+            --tridactyl-photon-colours-tone-5
+        ) !important;
+        --tridactyl-photon-colours-in-content-item-hover: rgba(0, 149, 221, 0.25);
+        --tridactyl-photon-colours-in-content-item-selected: var(
+            --tridactyl-photon-colours-tone-8
+        ) !important;
+        --tridactyl-photon-colours-in-content-border-highlight: var(
+            --tridactyl-photon-colours-accent-1
+        ) !important;
+        --tridactyl-photon-colours-in-content-border-focus: var(
+            --tridactyl-photon-colours-accent-1
+        ) !important;
+        --tridactyl-photon-colours-in-content-border-color: var(
+            --tridactyl-photon-colours-tone-6
+        ) !important;
+        --tridactyl-photon-colours-in-content-category-outline-focus: 1px dotted
+            #0a84ff;
+        --tridactyl-photon-colours-in-content-category-text: var(
+            --tridactyl-photon-colours-tone-4
+        ) !important;
+        --tridactyl-photon-colours-in-content-category-text-active: #0c0c0d;
+        --tridactyl-photon-colours-in-content-category-text-selected: var(
+            --tridactyl-photon-colours-accent-1
+        ) !important;
+        --tridactyl-photon-colours-in-content-category-text-selected-active: #0060df;
+        --tridactyl-photon-colours-in-content-category-background-hover: rgba(
+            12,
+            12,
+            13,
+            0.1
+        );
+        --tridactyl-photon-colours-in-content-category-background-active: rgba(
+            12,
+            12,
+            13,
+            0.15
+        );
+        --tridactyl-photon-colours-in-content-category-background-selected-hover: rgba(
+            12,
+            12,
+            13,
+            0.15
+        );
+        --tridactyl-photon-colours-in-content-category-background-selected-active: rgba(
+            12,
+            12,
+            13,
+            0.2
+        );
+        --tridactyl-photon-colours-in-content-tab-color: #424f5a;
+        --tridactyl-photon-colours-in-content-link-color: var(
+            --tridactyl-photon-colours-accent-1
+        ) !important;
+        --tridactyl-photon-colours-in-content-link-color-hover: var(
+            --tridactyl-photon-colours-accent-2
+        ) !important;
+        --tridactyl-photon-colours-in-content-link-color-active: #003eaa;
+        --tridactyl-photon-colours-in-content-link-color-visited: #0a8dff;
+        --tridactyl-photon-colours-in-content-primary-button-background: var(
+            --tridactyl-photon-colours-accent-2
+        ) !important;
+        --tridactyl-photon-colours-in-content-primary-button-background-hover: var(
+            --tridactyl-photon-colours-accent-3
+        ) !important;
+        --tridactyl-photon-colours-in-content-primary-button-background-active: var(
+            --tridactyl-photon-colours-accent-3
+        ) !important;
+        --tridactyl-photon-colours-in-content-table-border-dark-color: var(
+            --tridactyl-photon-colours-tone-7
+        ) !important;
+        --tridactyl-photon-colours-in-content-table-header-background: var(
+            --tridactyl-photon-colours-accent-2
+        ) !important;
+        --tridactyl-photon-colours-theme-selection-background: var(
+            --tridactyl-photon-colours-accent-2
+        ) !important;
+        --tridactyl-photon-colours-theme-selection-background-hover: var(
+            --tridactyl-photon-colours-accent-1
+        ) !important;
+        --tridactyl-photon-colours-in-content-category-header-background: var(
+            --tridactyl-photon-colours-tone-8
+        ) !important;
+        --tridactyl-photon-colours-selected-icon-fill-color: var(
+            --tridactyl-photon-colours-tone-2
+        ) !important;
+        --tridactyl-photon-colours-in-content-dark-header-background: var(
+            --tridactyl-photon-colours-tone-9
+        ) !important;
+        --tridactyl-photon-colours-secure-connection-color: var(
+            --tridactyl-photon-colours-accent-1
+        );
+        --tridactyl-photon-colours-theme-sidebar-background: #1b1b1d !important;
+        --tridactyl-photon-colours-cm-background: var(
+            --tridactyl-photon-colours-tone-8
+        ) !important;
+        --tridactyl-photon-colours-cm-selection: #353b48 !important;
+        --tridactyl-photon-colours-cm-marker: #555 !important;
+        --tridactyl-photon-colours-cm-linenumber: #58575c !important;
+        --tridactyl-photon-colours-cm-cursor: #fff !important;
+        --tridactyl-photon-colours-cm-active-line-background: rgba(
+            185,
+            215,
+            253,
+            0.15
+        ) !important;
+        --tridactyl-photon-colours-cm-matching-bracket: rgba(
+            255,
+            255,
+            255,
+            0.25
+        ) !important;
+        --tridactyl-photon-colours-cm-search-background: rgba(
+            24,
+            29,
+            32,
+            1
+        ) !important;
+        --tridactyl-photon-colours-cm-red: #de7474 !important;
+        --tridactyl-photon-colours-start-indicator-for-updater-scripts: black;
+        --tridactyl-photon-colours-end-indicator-for-updater-scripts: black;
+        --tridactyl-photon-colours-dummy-variable-for-updater-scripys: black;
+
+        /* }}} */
+
+        --tridactyl-fg: var(--tridactyl-photon-colours-in-content-page-color);
+        --tridactyl-bg: var(--tridactyl-photon-colours-in-content-page-background);
+
+        --tridactyl-scrollbar-color: var(--tridactyl-photon-colours-tone-8)
+            var(--tridactyl-fg);
+
+        --tridactyl-cmdl-fg: var(--tridactyl-photon-colours-in-content-text-color);
+        --tridactyl-cmdl-bg: var(
+            --tridactyl-photon-colours-in-content-category-header-background
+        );
+
+        /* --tridactyl-header-first-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
+        /* --tridactyl-header-second-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
+        /* --tridactyl-header-third-bg: var(--tridactyl-header-first-bg); */
+
+        --tridactyl-header-first-bg: #333;
+        --tridactyl-header-second-bg: #222;
+        --tridactyl-header-third-bg: #111;
+
+        --tridactyl-cmplt-border-top: 1px solid
+            var(--tridactyl-photon-colours-in-content-category-header-background);
+
+        --tridactyl-url-fg: var(--tridactyl-photon-colours-code-green);
+        --tridactyl-url-bg: var(--tridactyl-bg);
+
+        --tridactyl-of-fg: var(--tridactyl-photon-colours-warning-color);
+        --tridactyl-of-bg: var(--tridactyl-photon-colours-warning-background-color);
+
+        /* Hints are not photon coloured. Feel free to experiment with that */
+
+        --tridactyl-hintspan-fg: white;
+        --tridactyl-hintspan-bg: #204e8a;
+
+        --tridactyl-hint-active-fg: #333;
+        --tridactyl-hint-active-bg: #88ff00;
+        --tridactyl-hint-active-outline: 1px solid #000;
+
+        --tridactyl-hint-bg: rgba(13, 31, 54, 0.25);
+        --tridactyl-hint-outline: 1px solid var(--tridactyl-hintspan-bg);
+
+        --tridactyl-highlight-box-bg: var(
+            --tridactyl-photon-colours-in-content-box-background
+        );
+        --tridactyl-highlight-box-fg: var(
+            --tridactyl-photon-colours-in-content-text-color
+        );
+    }
+
+    :root.TridactylOwnNamespace input[id^="spoiler"] ~ .spoiler {
+        border-color: var(--tridactyl-photon-colours-in-content-box-border-color);
+    }
+
+    :root.TridactylOwnNamespace {
+        scrollbar-color: var(--tridactyl-scrollbar-color);
+        scrollbar-width: thin;
+    }
+
+    :root.TridactylOwnNamespace a {
+        color: var(--tridactyl-photon-colours-accent-1);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        /* Generic */
+        --tridactyl-font-family: monospace;
+        --tridactyl-font-family-sans: sans-serif;
+        --tridactyl-font-size: 12pt;
+        --tridactyl-small-font-size: 12px;
+        --tridactyl-bg: white;
+        --tridactyl-fg: black;
+        --tridactyl-logo: url("moz-extension://__MSG_@@extension_id__/static/logo/Tridactyl_64px.png");
+        --tridactyl-scrollbar-color: auto;
+
+        /* Mode indicator */
+        --tridactyl-status-font-family: var(--tridactyl-font-family);
+        --tridactyl-status-font-size: var(--tridactyl-small-font-size);
+        --tridactyl-status-bg: var(--tridactyl-bg);
+        --tridactyl-status-fg: var(--tridactyl-fg);
+        --tridactyl-status-border: 1px lightgray solid;
+        --tridactyl-status-border-radius: 2px;
+
+        /* Search highlight */
+        --tridactyl-search-highlight-color: yellow;
+
+        /* Hinting */
+
+        /* Hint character tags */
+        --tridactyl-hintspan-font-family: var(--tridactyl-font-family-sans);
+        --tridactyl-hintspan-font-size: var(--tridactyl-small-font-size);
+        --tridactyl-hintspan-font-weight: bold;
+        --tridactyl-hintspan-fg: white;
+        --tridactyl-hintspan-bg: red;
+        --tridactyl-hintspan-border-color: ButtonShadow;
+        --tridactyl-hintspan-border-width: 0px;
+        --tridactyl-hintspan-border-style: solid;
+        --tridactyl-hintspan-js-background: hsla(0, 0%, 65%);
+
+        /* Element highlights */
+        --tridactyl-hint-active-fg: var(--tridactyl-fg);
+        --tridactyl-hint-active-bg: #88ff00;
+        --tridactyl-hint-active-outline: 1px solid #cc0000;
+
+        --tridactyl-hint-bg: rgba(255, 255, 0, 0.25);
+        --tridactyl-hint-outline: 1px solid #8f5902;
+
+        /* :viewsource */
+        --tridactyl-vs-bg: var(--tridactyl-bg);
+        --tridactyl-vs-fg: var(--tridactyl-fg);
+        --tridactyl-vs-font-family: var(--tridactyl-font-family);
+
+        /*commandline*/
+
+        --tridactyl-cmdl-bg: var(--tridactyl-bg);
+        --tridactyl-cmdl-fg: var(--tridactyl-fg);
+        --tridactyl-cmdl-line-height: 1.5;
+        --tridactyl-cmdl-font-family: monospace;
+        --tridactyl-cmdl-font-size: 9pt;
+
+        /*completions*/
+
+        --tridactyl-cmplt-option-height: 1.4em;
+        --tridactyl-cmplt-fg: var(--tridactyl-fg);
+        --tridactyl-cmplt-bg: var(--tridactyl-bg);
+        --tridactyl-cmplt-font-size: 10pt;
+        --tridactyl-cmplt-font-family: monospace;
+        /* i don't think 0.5px is redered */
+        --tridactyl-cmplt-border-top: 1px solid grey;
+
+        /* need a better way for naming variables 
+         *
+            - .Properties for .HistoryCompletionSource table
+            - .Properties for .BmarkCompletionSource table
+
+        */
+
+        /*sectionHeader*/
+
+        --tridactyl-header-first-bg: LightGray;
+        --tridactyl-header-second-bg: #ddd;
+        --tridactyl-header-third-bg: LightGray;
+        /* eg. What if I dont want liner-gradient as bg?
+         *
+         * :root .sectionHeader { background: blue; }
+         *
+         * ????
+         */
+
+        --tridactyl-header-font-size: inherit;
+        --tridactyl-header-font-weight: bold;
+        /* i don't think 0.5px is redered */
+        --tridactyl-header-border-bottom: 1px solid bottom;
+
+        /*url style*/
+
+        --tridactyl-url-text-decoration: none;
+        --tridactyl-url-fg: #1f9947;
+        --tridactyl-url-bg: var(--tridactyl-bg);
+        --tridactyl-url-cursor: pointer;
+
+        /*option focused*/
+
+        --tridactyl-of-fg: var(--tridactyl-fg);
+        --tridactyl-of-bg: #ffec8b;
+
+        /*new tab spoiler box*/
+        --tridactyl-highlight-box-bg: #eee;
+        --tridactyl-highlight-box-fg: var(--tridactyl-fg);
+
+        --tridactyl-private-window-icon-url: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
+
+        --tridactyl-container-fingerprint-url: url("resource://usercontext-content/fingerprint.svg");
+        --tridactyl-container-briefcase-url: url("resource://usercontext-content/briefcase.svg");
+        --tridactyl-container-dollar-url: url("resource://usercontext-content/dollar.svg");
+        --tridactyl-container-cart-url: url("resource://usercontext-content/cart.svg");
+        --tridactyl-container-circle-url: url("resource://usercontext-content/circle.svg");
+        --tridactyl-container-gift-url: url("resource://usercontext-content/gift.svg");
+        --tridactyl-container-vacation-url: url("resource://usercontext-content/vacation.svg");
+        --tridactyl-container-food-url: url("resource://usercontext-content/food.svg");
+        --tridactyl-container-fruit-url: url("resource://usercontext-content/fruit.svg");
+        --tridactyl-container-pet-url: url("resource://usercontext-content/pet.svg");
+        --tridactyl-container-tree-url: url("resource://usercontext-content/tree.svg");
+        --tridactyl-container-chill-url: url("resource://usercontext-content/chill.svg");
+
+        --tridactyl-container-color-blue: #37adff;
+        --tridactyl-container-color-turquoise: #00c79a;
+        --tridactyl-container-color-green: #51cd00;
+        --tridactyl-container-color-yellow: #ffcb00;
+        --tridactyl-container-color-orange: #ff9f00;
+        --tridactyl-container-color-red: #ff613d;
+        --tridactyl-container-color-pink: #ff4bda;
+        --tridactyl-container-color-purple: #af51f5;
+
+        --tridactyl-externaledit-bg: var(--tridactyl-logo) no-repeat center;
+    }
+}

From ab1e27665f76773ad976f8604895c91594beeb85 Mon Sep 17 00:00:00 2001
From: Aaron Rancsik <20153302+aaronrancsik@users.noreply.github.com>
Date: Fri, 1 Oct 2021 14:26:32 +0200
Subject: [PATCH 2/2] Use @import reference the dark and light themes. This
 will resolve the previous copy-pasta redundant mess.

---
 src/static/themes/auto/auto.css | 430 +-------------------------------
 1 file changed, 2 insertions(+), 428 deletions(-)

diff --git a/src/static/themes/auto/auto.css b/src/static/themes/auto/auto.css
index 8269c9d6..67f3e52e 100644
--- a/src/static/themes/auto/auto.css
+++ b/src/static/themes/auto/auto.css
@@ -1,428 +1,2 @@
-@media (prefers-color-scheme: dark) {
-    :root {
-        /* {{{ photon-colours */
-
-        /* From https://github.com/overdodactyl/ShadowFox/blob/7dbe9343da87bde804e8fb88dd3b5eaaeb4817b2/css/common-files/color_variables.css */
-        --tridactyl-photon-colours-magenta-50: #ff1ad9;
-        --tridactyl-photon-colours-magenta-60: #ed00b5;
-        --tridactyl-photon-colours-magenta-70: #b5007f;
-        --tridactyl-photon-colours-magenta-80: #7d004f;
-        --tridactyl-photon-colours-magenta-90: #440027;
-        --tridactyl-photon-colours-purple-50: #9400ff;
-        --tridactyl-photon-colours-purple-60: #8000d7;
-        --tridactyl-photon-colours-purple-70: #6200a4;
-        --tridactyl-photon-colours-purple-80: #440071;
-        --tridactyl-photon-colours-purple-90: #25003e;
-        --tridactyl-photon-colours-blue-40: #45a1ff;
-        --tridactyl-photon-colours-blue-50: #0a84ff;
-        --tridactyl-photon-colours-blue-60: #0060df;
-        --tridactyl-photon-colours-blue-70: #003eaa;
-        --tridactyl-photon-colours-blue-80: #002275;
-        --tridactyl-photon-colours-blue-90: #000f40;
-        --tridactyl-photon-colours-teal-50: #00feff;
-        --tridactyl-photon-colours-teal-60: #00c8d7;
-        --tridactyl-photon-colours-teal-70: #008ea4;
-        --tridactyl-photon-colours-teal-80: #005a71;
-        --tridactyl-photon-colours-teal-90: #002d3e;
-        --tridactyl-photon-colours-green-50: #30e60b;
-        --tridactyl-photon-colours-green-60: #12bc00;
-        --tridactyl-photon-colours-green-70: #058b00;
-        --tridactyl-photon-colours-green-80: #006504;
-        --tridactyl-photon-colours-green-90: #003706;
-        --tridactyl-photon-colours-yellow-50: #ffe900;
-        --tridactyl-photon-colours-yellow-60: #d7b600;
-        --tridactyl-photon-colours-yellow-70: #a47f00;
-        --tridactyl-photon-colours-yellow-80: #715100;
-        --tridactyl-photon-colours-yellow-90: #3e2800;
-        --tridactyl-photon-colours-red-50: #ff0039;
-        --tridactyl-photon-colours-red-60: #d70022;
-        --tridactyl-photon-colours-red-70: #a4000f;
-        --tridactyl-photon-colours-red-80: #5a0002;
-        --tridactyl-photon-colours-red-90: #3e0200;
-        --tridactyl-photon-colours-orange-50: #ff9400;
-        --tridactyl-photon-colours-orange-60: #d76e00;
-        --tridactyl-photon-colours-orange-70: #a44900;
-        --tridactyl-photon-colours-orange-80: #712b00;
-        --tridactyl-photon-colours-orange-90: #3e1300;
-        --tridactyl-photon-colours-grey-10: #f9f9fa;
-        --tridactyl-photon-colours-grey-20: #ededf0;
-        --tridactyl-photon-colours-grey-30: #d7d7db;
-        --tridactyl-photon-colours-grey-40: #b1b1b3;
-        --tridactyl-photon-colours-grey-50: #737373;
-        --tridactyl-photon-colours-grey-60: #4a4a4f;
-        --tridactyl-photon-colours-grey-70: #38383d;
-        --tridactyl-photon-colours-grey-80: #2a2a2e;
-        --tridactyl-photon-colours-grey-90: #0c0c0d;
-        --tridactyl-photon-colours-code-green: #86de74 !important;
-        --tridactyl-photon-colours-warning-color: #fce19f;
-        --tridactyl-photon-colours-warning-background-color: #44391f;
-        --tridactyl-photon-colours-theme-highlight-green: #86de74;
-        --tridactyl-photon-colours-theme-highlight-blue: #75bfff;
-        --tridactyl-photon-colours-theme-highlight-purple: #b98eff;
-        --tridactyl-photon-colours-theme-highlight-red: #ff7de9;
-        --tridactyl-photon-colours-theme-highlight-yellow: #fff89e;
-        --tridactyl-photon-colours-theme-highlight-bluegrey: #5e88b0;
-        --tridactyl-photon-colours-theme-highlight-lightorange: #d99b28;
-        --tridactyl-photon-colours-theme-highlight-orange: #d96629;
-        --tridactyl-photon-colours-theme-highlight-pink: #df80ff;
-        --tridactyl-photon-colours-tone-1: var(--tridactyl-photon-colours-grey-10);
-        --tridactyl-photon-colours-tone-2: var(--tridactyl-photon-colours-grey-20);
-        --tridactyl-photon-colours-tone-3: var(--tridactyl-photon-colours-grey-30);
-        --tridactyl-photon-colours-tone-4: var(--tridactyl-photon-colours-grey-40);
-        --tridactyl-photon-colours-tone-5: var(--tridactyl-photon-colours-grey-50);
-        --tridactyl-photon-colours-tone-6: var(--tridactyl-photon-colours-grey-60);
-        --tridactyl-photon-colours-tone-7: var(--tridactyl-photon-colours-grey-70);
-        --tridactyl-photon-colours-tone-8: var(--tridactyl-photon-colours-grey-80);
-        --tridactyl-photon-colours-tone-9: var(--tridactyl-photon-colours-grey-90);
-        --tridactyl-photon-colours-accent-1: var(
-            --tridactyl-photon-colours-blue-40
-        );
-        --tridactyl-photon-colours-accent-2: var(
-            --tridactyl-photon-colours-blue-50
-        );
-        --tridactyl-photon-colours-accent-3: var(
-            --tridactyl-photon-colours-blue-60
-        );
-        --tridactyl-photon-colours-in-content-page-color: var(
-            --tridactyl-photon-colours-tone-4
-        ) !important;
-        --tridactyl-photon-colours-in-content-page-background: var(
-            --tridactyl-photon-colours-tone-7
-        ) !important;
-        --tridactyl-photon-colours-in-content-text-color: var(
-            --tridactyl-photon-colours-tone-3
-        ) !important;
-        --tridactyl-photon-colours-in-content-selected-text: var(
-            --tridactyl-photon-colours-tone-1
-        ) !important;
-        --tridactyl-photon-colours-in-content-box-background: var(
-            --tridactyl-photon-colours-tone-6
-        ) !important;
-        --tridactyl-photon-colours-in-content-box-background-odd: #f3f6fa;
-        --tridactyl-photon-colours-in-content-box-background-hover: var(
-            --tridactyl-photon-colours-tone-6
-        ) !important;
-        --tridactyl-photon-colours-in-content-box-background-active: var(
-            --tridactyl-photon-colours-tone-6
-        ) !important;
-        --tridactyl-photon-colours-in-content-box-border-color: var(
-            --tridactyl-photon-colours-tone-5
-        ) !important;
-        --tridactyl-photon-colours-in-content-item-hover: rgba(0, 149, 221, 0.25);
-        --tridactyl-photon-colours-in-content-item-selected: var(
-            --tridactyl-photon-colours-tone-8
-        ) !important;
-        --tridactyl-photon-colours-in-content-border-highlight: var(
-            --tridactyl-photon-colours-accent-1
-        ) !important;
-        --tridactyl-photon-colours-in-content-border-focus: var(
-            --tridactyl-photon-colours-accent-1
-        ) !important;
-        --tridactyl-photon-colours-in-content-border-color: var(
-            --tridactyl-photon-colours-tone-6
-        ) !important;
-        --tridactyl-photon-colours-in-content-category-outline-focus: 1px dotted
-            #0a84ff;
-        --tridactyl-photon-colours-in-content-category-text: var(
-            --tridactyl-photon-colours-tone-4
-        ) !important;
-        --tridactyl-photon-colours-in-content-category-text-active: #0c0c0d;
-        --tridactyl-photon-colours-in-content-category-text-selected: var(
-            --tridactyl-photon-colours-accent-1
-        ) !important;
-        --tridactyl-photon-colours-in-content-category-text-selected-active: #0060df;
-        --tridactyl-photon-colours-in-content-category-background-hover: rgba(
-            12,
-            12,
-            13,
-            0.1
-        );
-        --tridactyl-photon-colours-in-content-category-background-active: rgba(
-            12,
-            12,
-            13,
-            0.15
-        );
-        --tridactyl-photon-colours-in-content-category-background-selected-hover: rgba(
-            12,
-            12,
-            13,
-            0.15
-        );
-        --tridactyl-photon-colours-in-content-category-background-selected-active: rgba(
-            12,
-            12,
-            13,
-            0.2
-        );
-        --tridactyl-photon-colours-in-content-tab-color: #424f5a;
-        --tridactyl-photon-colours-in-content-link-color: var(
-            --tridactyl-photon-colours-accent-1
-        ) !important;
-        --tridactyl-photon-colours-in-content-link-color-hover: var(
-            --tridactyl-photon-colours-accent-2
-        ) !important;
-        --tridactyl-photon-colours-in-content-link-color-active: #003eaa;
-        --tridactyl-photon-colours-in-content-link-color-visited: #0a8dff;
-        --tridactyl-photon-colours-in-content-primary-button-background: var(
-            --tridactyl-photon-colours-accent-2
-        ) !important;
-        --tridactyl-photon-colours-in-content-primary-button-background-hover: var(
-            --tridactyl-photon-colours-accent-3
-        ) !important;
-        --tridactyl-photon-colours-in-content-primary-button-background-active: var(
-            --tridactyl-photon-colours-accent-3
-        ) !important;
-        --tridactyl-photon-colours-in-content-table-border-dark-color: var(
-            --tridactyl-photon-colours-tone-7
-        ) !important;
-        --tridactyl-photon-colours-in-content-table-header-background: var(
-            --tridactyl-photon-colours-accent-2
-        ) !important;
-        --tridactyl-photon-colours-theme-selection-background: var(
-            --tridactyl-photon-colours-accent-2
-        ) !important;
-        --tridactyl-photon-colours-theme-selection-background-hover: var(
-            --tridactyl-photon-colours-accent-1
-        ) !important;
-        --tridactyl-photon-colours-in-content-category-header-background: var(
-            --tridactyl-photon-colours-tone-8
-        ) !important;
-        --tridactyl-photon-colours-selected-icon-fill-color: var(
-            --tridactyl-photon-colours-tone-2
-        ) !important;
-        --tridactyl-photon-colours-in-content-dark-header-background: var(
-            --tridactyl-photon-colours-tone-9
-        ) !important;
-        --tridactyl-photon-colours-secure-connection-color: var(
-            --tridactyl-photon-colours-accent-1
-        );
-        --tridactyl-photon-colours-theme-sidebar-background: #1b1b1d !important;
-        --tridactyl-photon-colours-cm-background: var(
-            --tridactyl-photon-colours-tone-8
-        ) !important;
-        --tridactyl-photon-colours-cm-selection: #353b48 !important;
-        --tridactyl-photon-colours-cm-marker: #555 !important;
-        --tridactyl-photon-colours-cm-linenumber: #58575c !important;
-        --tridactyl-photon-colours-cm-cursor: #fff !important;
-        --tridactyl-photon-colours-cm-active-line-background: rgba(
-            185,
-            215,
-            253,
-            0.15
-        ) !important;
-        --tridactyl-photon-colours-cm-matching-bracket: rgba(
-            255,
-            255,
-            255,
-            0.25
-        ) !important;
-        --tridactyl-photon-colours-cm-search-background: rgba(
-            24,
-            29,
-            32,
-            1
-        ) !important;
-        --tridactyl-photon-colours-cm-red: #de7474 !important;
-        --tridactyl-photon-colours-start-indicator-for-updater-scripts: black;
-        --tridactyl-photon-colours-end-indicator-for-updater-scripts: black;
-        --tridactyl-photon-colours-dummy-variable-for-updater-scripys: black;
-
-        /* }}} */
-
-        --tridactyl-fg: var(--tridactyl-photon-colours-in-content-page-color);
-        --tridactyl-bg: var(--tridactyl-photon-colours-in-content-page-background);
-
-        --tridactyl-scrollbar-color: var(--tridactyl-photon-colours-tone-8)
-            var(--tridactyl-fg);
-
-        --tridactyl-cmdl-fg: var(--tridactyl-photon-colours-in-content-text-color);
-        --tridactyl-cmdl-bg: var(
-            --tridactyl-photon-colours-in-content-category-header-background
-        );
-
-        /* --tridactyl-header-first-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
-        /* --tridactyl-header-second-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
-        /* --tridactyl-header-third-bg: var(--tridactyl-header-first-bg); */
-
-        --tridactyl-header-first-bg: #333;
-        --tridactyl-header-second-bg: #222;
-        --tridactyl-header-third-bg: #111;
-
-        --tridactyl-cmplt-border-top: 1px solid
-            var(--tridactyl-photon-colours-in-content-category-header-background);
-
-        --tridactyl-url-fg: var(--tridactyl-photon-colours-code-green);
-        --tridactyl-url-bg: var(--tridactyl-bg);
-
-        --tridactyl-of-fg: var(--tridactyl-photon-colours-warning-color);
-        --tridactyl-of-bg: var(--tridactyl-photon-colours-warning-background-color);
-
-        /* Hints are not photon coloured. Feel free to experiment with that */
-
-        --tridactyl-hintspan-fg: white;
-        --tridactyl-hintspan-bg: #204e8a;
-
-        --tridactyl-hint-active-fg: #333;
-        --tridactyl-hint-active-bg: #88ff00;
-        --tridactyl-hint-active-outline: 1px solid #000;
-
-        --tridactyl-hint-bg: rgba(13, 31, 54, 0.25);
-        --tridactyl-hint-outline: 1px solid var(--tridactyl-hintspan-bg);
-
-        --tridactyl-highlight-box-bg: var(
-            --tridactyl-photon-colours-in-content-box-background
-        );
-        --tridactyl-highlight-box-fg: var(
-            --tridactyl-photon-colours-in-content-text-color
-        );
-    }
-
-    :root.TridactylOwnNamespace input[id^="spoiler"] ~ .spoiler {
-        border-color: var(--tridactyl-photon-colours-in-content-box-border-color);
-    }
-
-    :root.TridactylOwnNamespace {
-        scrollbar-color: var(--tridactyl-scrollbar-color);
-        scrollbar-width: thin;
-    }
-
-    :root.TridactylOwnNamespace a {
-        color: var(--tridactyl-photon-colours-accent-1);
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        /* Generic */
-        --tridactyl-font-family: monospace;
-        --tridactyl-font-family-sans: sans-serif;
-        --tridactyl-font-size: 12pt;
-        --tridactyl-small-font-size: 12px;
-        --tridactyl-bg: white;
-        --tridactyl-fg: black;
-        --tridactyl-logo: url("moz-extension://__MSG_@@extension_id__/static/logo/Tridactyl_64px.png");
-        --tridactyl-scrollbar-color: auto;
-
-        /* Mode indicator */
-        --tridactyl-status-font-family: var(--tridactyl-font-family);
-        --tridactyl-status-font-size: var(--tridactyl-small-font-size);
-        --tridactyl-status-bg: var(--tridactyl-bg);
-        --tridactyl-status-fg: var(--tridactyl-fg);
-        --tridactyl-status-border: 1px lightgray solid;
-        --tridactyl-status-border-radius: 2px;
-
-        /* Search highlight */
-        --tridactyl-search-highlight-color: yellow;
-
-        /* Hinting */
-
-        /* Hint character tags */
-        --tridactyl-hintspan-font-family: var(--tridactyl-font-family-sans);
-        --tridactyl-hintspan-font-size: var(--tridactyl-small-font-size);
-        --tridactyl-hintspan-font-weight: bold;
-        --tridactyl-hintspan-fg: white;
-        --tridactyl-hintspan-bg: red;
-        --tridactyl-hintspan-border-color: ButtonShadow;
-        --tridactyl-hintspan-border-width: 0px;
-        --tridactyl-hintspan-border-style: solid;
-        --tridactyl-hintspan-js-background: hsla(0, 0%, 65%);
-
-        /* Element highlights */
-        --tridactyl-hint-active-fg: var(--tridactyl-fg);
-        --tridactyl-hint-active-bg: #88ff00;
-        --tridactyl-hint-active-outline: 1px solid #cc0000;
-
-        --tridactyl-hint-bg: rgba(255, 255, 0, 0.25);
-        --tridactyl-hint-outline: 1px solid #8f5902;
-
-        /* :viewsource */
-        --tridactyl-vs-bg: var(--tridactyl-bg);
-        --tridactyl-vs-fg: var(--tridactyl-fg);
-        --tridactyl-vs-font-family: var(--tridactyl-font-family);
-
-        /*commandline*/
-
-        --tridactyl-cmdl-bg: var(--tridactyl-bg);
-        --tridactyl-cmdl-fg: var(--tridactyl-fg);
-        --tridactyl-cmdl-line-height: 1.5;
-        --tridactyl-cmdl-font-family: monospace;
-        --tridactyl-cmdl-font-size: 9pt;
-
-        /*completions*/
-
-        --tridactyl-cmplt-option-height: 1.4em;
-        --tridactyl-cmplt-fg: var(--tridactyl-fg);
-        --tridactyl-cmplt-bg: var(--tridactyl-bg);
-        --tridactyl-cmplt-font-size: 10pt;
-        --tridactyl-cmplt-font-family: monospace;
-        /* i don't think 0.5px is redered */
-        --tridactyl-cmplt-border-top: 1px solid grey;
-
-        /* need a better way for naming variables 
-         *
-            - .Properties for .HistoryCompletionSource table
-            - .Properties for .BmarkCompletionSource table
-
-        */
-
-        /*sectionHeader*/
-
-        --tridactyl-header-first-bg: LightGray;
-        --tridactyl-header-second-bg: #ddd;
-        --tridactyl-header-third-bg: LightGray;
-        /* eg. What if I dont want liner-gradient as bg?
-         *
-         * :root .sectionHeader { background: blue; }
-         *
-         * ????
-         */
-
-        --tridactyl-header-font-size: inherit;
-        --tridactyl-header-font-weight: bold;
-        /* i don't think 0.5px is redered */
-        --tridactyl-header-border-bottom: 1px solid bottom;
-
-        /*url style*/
-
-        --tridactyl-url-text-decoration: none;
-        --tridactyl-url-fg: #1f9947;
-        --tridactyl-url-bg: var(--tridactyl-bg);
-        --tridactyl-url-cursor: pointer;
-
-        /*option focused*/
-
-        --tridactyl-of-fg: var(--tridactyl-fg);
-        --tridactyl-of-bg: #ffec8b;
-
-        /*new tab spoiler box*/
-        --tridactyl-highlight-box-bg: #eee;
-        --tridactyl-highlight-box-fg: var(--tridactyl-fg);
-
-        --tridactyl-private-window-icon-url: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
-
-        --tridactyl-container-fingerprint-url: url("resource://usercontext-content/fingerprint.svg");
-        --tridactyl-container-briefcase-url: url("resource://usercontext-content/briefcase.svg");
-        --tridactyl-container-dollar-url: url("resource://usercontext-content/dollar.svg");
-        --tridactyl-container-cart-url: url("resource://usercontext-content/cart.svg");
-        --tridactyl-container-circle-url: url("resource://usercontext-content/circle.svg");
-        --tridactyl-container-gift-url: url("resource://usercontext-content/gift.svg");
-        --tridactyl-container-vacation-url: url("resource://usercontext-content/vacation.svg");
-        --tridactyl-container-food-url: url("resource://usercontext-content/food.svg");
-        --tridactyl-container-fruit-url: url("resource://usercontext-content/fruit.svg");
-        --tridactyl-container-pet-url: url("resource://usercontext-content/pet.svg");
-        --tridactyl-container-tree-url: url("resource://usercontext-content/tree.svg");
-        --tridactyl-container-chill-url: url("resource://usercontext-content/chill.svg");
-
-        --tridactyl-container-color-blue: #37adff;
-        --tridactyl-container-color-turquoise: #00c79a;
-        --tridactyl-container-color-green: #51cd00;
-        --tridactyl-container-color-yellow: #ffcb00;
-        --tridactyl-container-color-orange: #ff9f00;
-        --tridactyl-container-color-red: #ff613d;
-        --tridactyl-container-color-pink: #ff4bda;
-        --tridactyl-container-color-purple: #af51f5;
-
-        --tridactyl-externaledit-bg: var(--tridactyl-logo) no-repeat center;
-    }
-}
+@import '../dark/dark.css' (prefers-color-scheme: dark);
+@import '../default/default.css' (prefers-color-scheme: light);