From 4f2caf1907e21c16631244dbdf9cf0b91765c174 Mon Sep 17 00:00:00 2001 From: Lanius Trolling Date: Sat, 6 Apr 2024 08:27:15 -0400 Subject: [PATCH] Rework theme selection code --- .../kotlin/info/mechyrdia/lore/views_prefs.kt | 2 +- src/jvmMain/resources/static/init.js | 18 +- src/jvmMain/resources/static/style.css | 158 +----------------- 3 files changed, 25 insertions(+), 153 deletions(-) diff --git a/src/jvmMain/kotlin/info/mechyrdia/lore/views_prefs.kt b/src/jvmMain/kotlin/info/mechyrdia/lore/views_prefs.kt index 30c63d7..0f37c19 100644 --- 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 4a66460..33f4f3c 100644 --- 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 7765665..d92e211 100644 --- 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; } -- 2.25.1