Rework theme selection code

diff --git a/src/jvmMain/kotlin/info/mechyrdia/lore/views_prefs.kt b/src/jvmMain/kotlin/info/mechyrdia/lore/views_prefs.kt
index 30c63d781542cbe522b44a95b1a66ae349c5019e..0f37c19d24473dd8ebebc8ecb6034cff7224dba4 100644 (file)
--- a/src/jvmMain/kotlin/info/mechyrdia/lore/views_prefs.kt
+++ b/src/jvmMain/kotlin/info/mechyrdia/lore/views_prefs.kt
@@ -64,7 +64,7 @@ suspend fun ApplicationCall.clientSettingsPage(): HTML.() -> Unit {
                        h2 { +"Page Theme" }
                        label {
                                radioInput(name = "theme") {
-                                       value = "system"
+                                       value = "null"
                                        required = true
                                        checked = theme == PageTheme.SYSTEM
                                }

diff --git a/src/jvmMain/resources/static/init.js b/src/jvmMain/resources/static/init.js
index 4a6646048d5b42a7f288a167d2158570d10a0a11..33f4f3c924e51aa3a858ad7b2ded246e1fde3b49 100644 (file)
--- a/src/jvmMain/resources/static/init.js
+++ b/src/jvmMain/resources/static/init.js
@@ -1,4 +1,16 @@
 (function () {
+       (function () {
+               // Set theme attribute by color-scheme preference if not already present
+               // This must be done IMMEDIATELY!!! DON'T delay until after page load!!!
+
+               const html = document.documentElement;
+               const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+               html.setAttribute("data-fallback-theme", mediaQuery.matches ? "dark" : "light");
+               mediaQuery.addEventListener("change", e => {
+                       html.setAttribute("data-fallback-theme", e.matches ? "dark" : "light");
+               });
+       })();
+
        function delay(amount) {
                return new Promise(resolve => window.setTimeout(resolve, amount));
        }
@@ -168,7 +180,11 @@
                for (const themeChoice of themeChoices) {
                        themeChoice.addEventListener("click", e => {
                                const theme = e.currentTarget.value;
-                               document.documentElement.setAttribute("data-theme", theme);
+                               if (theme === "null") {
+                                       document.documentElement.removeAttribute("data-theme");
+                               } else {
+                                       document.documentElement.setAttribute("data-theme", theme);
+                               }
                                document.cookie = "FACTBOOK_THEME=" + theme + "; Secure; SameSite=Lax; Max-Age=" + (Math.pow(2, 31) - 1).toString();
                        });
                }

diff --git a/src/jvmMain/resources/static/style.css b/src/jvmMain/resources/static/style.css
index 7765665b7a095283a55482dbf1c751e3bb7bf932..d92e211b32bb2666cf6b96517825fc621ef581c4 100644 (file)
--- a/src/jvmMain/resources/static/style.css
+++ b/src/jvmMain/resources/static/style.css
@@ -111,7 +111,13 @@ html {
        --media-size-unit: 0.035vw;
 
        --aside-width: 40%;
+}
 
+/*
+[data-theme="light"] is duplicated to increase specificity,
+in order to maintain precedence over data-fallback-theme.
+ */
+html, html[data-theme="light"][data-theme="light"] {
        /***************
        * color params *
        ***************/
@@ -185,7 +191,7 @@ html {
        --extln: url("/static/images/external-link.png");
 }
 
-html[data-theme="dark"] {
+html[data-theme="dark"], html[data-fallback-theme="dark"] {
        /***************
        * color params *
        ***************/
@@ -259,156 +265,6 @@ html[data-theme="dark"] {
        --extln: url("/static/images/external-link-dark.png");
 }
 
-@media only screen and (prefers-color-scheme: dark) {
-       html[data-theme="light"] {
-               /***************
-               * color params *
-               ***************/
-
-               --text-color: #222;
-               --back-color: #eda;
-
-               --panel-stroke: #a82;
-               --panel-fill: rgba(255, 204, 51, 40%);
-
-               --selection-fg: #eee;
-               --selection-bg: rgba(170, 136, 34, 60%);
-
-               --h1-border: #862;
-               --h1-shadow: #431;
-               --h1-backgr: #c93;
-
-               --h2-border: #430;
-
-               --h3-unline: #652;
-
-               --list-a-fg: #541;
-               --list-a-h-fg: #feb;
-               --list-a-h-bg: #a82;
-
-               --a-fg: #36c;
-               --a-v-fg: #63c;
-
-               --tbl-border: #431;
-               --tbl-td-bgr: #feb;
-               --tbl-th-bgr: #862;
-
-               --input-bg: #ba7;
-               --input-ul: #444133;
-               --input-fg: #111;
-               --input-f-bg: #985;
-
-               --err-bg: #e77;
-               --err-fg: #422;
-               --err-ul: #211;
-
-               --btn-fg: #feb;
-               --btn-bg: #ca4;
-               --btn-h-bg: #a82;
-               --btn-a-bg: #860;
-
-               --evil-btn-fg: #fcc;
-               --evil-btn-bg: #c33;
-               --evil-btn-h-bg: #a22;
-               --evil-btn-a-bg: #811;
-
-               --btn-na-bg: #444;
-               --btn-na-fg: #bbb;
-
-               --iframe-border: #541;
-
-               --error-popup-border: #933;
-               --error-popup-backgr: #faa;
-               --error-popup-foregr: #622;
-
-               --comment-stroke: #541;
-               --comment-fill: #ec6;
-
-               --quote-bg: rgba(0, 0, 0, 10%);
-
-               /*************
-               * url params *
-               *************/
-
-               --bgimg: linear-gradient(to bottom, #feb, #cb8);
-               --extln: url("/static/images/external-link.png");
-       }
-
-       html {
-               /***************
-               * color params *
-               ***************/
-
-               --text-color: #ddd;
-               --back-color: #652;
-
-               --panel-stroke: #fd7;
-               --panel-fill: rgba(85, 68, 17, 40%);
-
-               --selection-fg: #111;
-               --selection-bg: rgba(255, 221, 119, 90%);
-
-               --h1-border: #862;
-               --h1-shadow: #c93;
-               --h1-backgr: #431;
-
-               --h2-border: #feb;
-
-               --h3-unline: #dc9;
-
-               --list-a-fg: #feb;
-               --list-a-h-fg: #541;
-               --list-a-h-bg: #fd7;
-
-               --a-fg: #69f;
-               --a-v-fg: #96f;
-
-               --tbl-border: #c93;
-               --tbl-td-bgr: #430;
-               --tbl-th-bgr: #a82;
-
-               --input-bg: #985;
-               --input-ul: #ccc399;
-               --input-fg: #eee;
-               --input-f-bg: #ba7;
-
-               --err-bg: #844;
-               --err-fg: #fcc;
-               --err-ul: #422;
-
-               --btn-fg: #111;
-               --btn-bg: #860;
-               --btn-h-bg: #a82;
-               --btn-a-bg: #ca4;
-
-               --evil-btn-fg: #411;
-               --evil-btn-bg: #d33;
-               --evil-btn-h-bg: #e66;
-               --evil-btn-a-bg: #f99;
-
-               --btn-na-bg: #bbb;
-               --btn-na-fg: #444;
-
-               --iframe-border: #feb;
-
-               --error-popup-border: #311;
-               --error-popup-backgr: #622;
-               --error-popup-foregr: #fcc;
-
-               --comment-stroke: #feb;
-               --comment-fill: #652;
-
-               --quote-bg: rgba(255, 255, 255, 10%);
-
-               /*************
-               * url params *
-               *************/
-
-               --bgimg: linear-gradient(to bottom, #763, #430);
-               --extln: url("/static/images/external-link-dark.png");
-       }
-}
-
 body {
        margin: 0;
 }