light theme! crt now disabled by default

public/script/config.js

@@ -1,42 +1,33 @@
-function toggle_config_setting(config, name) {
+const DEFAULT_CONFIG = {
-	if (config[name]) {
+    crt: false
-		delete config[name];
+};
-		update_config(config);
+const config = (() => {
-		return true;
+    let saved = localStorage.getItem("config");
-	}
+    if (saved) {
-	config[name] = true;
+        const config = JSON.parse(saved);
-	update_config(config);
+        setCRT(config.crt || DEFAULT_CONFIG.crt);
-	return true;
+        return config;
     }
 
-function set_config_setting(config, name, value) {
+    localStorage.setItem("config", JSON.stringify(DEFAULT_CONFIG));
-	config[name] = value;
+    return DEFAULT_CONFIG;
-	update_config(config);
+})();
-	return true;
-}
 
-function clear_config_setting(config, name) {
+function saveConfig() {
-	if (!config[name]) return false;
-	delete config[name];
-	update_config(config);
-	return true;
-}
-
-function update_config(config) {
     localStorage.setItem("config", JSON.stringify(config));
 }
 
-const config = JSON.parse(localStorage.getItem("config")) || {};
-if (config) {
-        if (config.disable_crt) {
-                document.querySelector('div#overlay').setAttribute("hidden", true);
-                document.body.style.textShadow = "none";
-                document.getElementById('toggle-crt').classList.add("disabled");
-        }
-}
-
 document.getElementById("toggle-crt").addEventListener("click", () => {
-        toggle_config_setting(config, "disable_crt");
+    config.crt = !config.crt;
-        document.querySelector('div#overlay').toggleAttribute("hidden");
+    setCRT(config.crt);
-        document.getElementById('toggle-crt').className = config.disable_crt ? "disabled" : "";
+    saveConfig();
 });
+
+function setCRT(/** @type boolean */ enabled) {
+    if (enabled) {
+        document.body.classList.add("crt");
+    } else {
+        document.body.classList.remove("crt");
+    }
+    document.getElementById('toggle-crt').className = enabled ? "" : "disabled";
+}

public/script/index.js

@@ -0,0 +1,16 @@
+const hexPrimary = document.getElementById("hex-primary");
+const hexSecondary = document.getElementById("hex-secondary");
+const hexTertiary = document.getElementById("hex-tertiary");
+
+function updateHexColours() {
+    const style = getComputedStyle(document.body);
+    hexPrimary.textContent = style.getPropertyValue('--primary');
+    hexSecondary.textContent = style.getPropertyValue('--secondary');
+    hexTertiary.textContent = style.getPropertyValue('--tertiary');
+}
+
+updateHexColours();
+
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+    updateHexColours();
+});

public/style/colours.css

@@ -1,10 +1,25 @@
 :root {
+    --background: #080808;
+    --on-background: #f0f0f0;
+
     --primary: #b7fd49;
     --secondary: #f8e05b;
     --tertiary: #f788fe;
     --links: #5eb2ff;
 }
 
+@media (prefers-color-scheme: light) {
+    :root {
+        --background: #ffffff;
+        --on-background: #101010;
+
+        --primary: #6d9e23;
+        --secondary: #a5911e;
+        --tertiary: #a92cb1;
+        --links: #3ba1ff;
+    }
+}
+
 .col-primary {
     color: var(--primary);
 }

public/style/header.css

@@ -3,9 +3,11 @@ header {
     top: 0;
     left: 0;
     width: 100vw;
-        border-bottom: 1px solid #888;
+    border-bottom: 1px solid #8888;
-        background-color: #080808;
+    background-color: var(--background);
     z-index: 1;
+
+    transition: color .2s, background-color .2s;
 }
 
 nav {

public/style/main.css

@@ -14,15 +14,17 @@
 body {
     margin: 0;
     padding: 0;
-    background: #080808;
+    background: var(--background);
-    color: #eee;
+    color: var(--on-background);
     font-family: "Monaspace Argon", monospace;
     font-size: 18px;
-    text-shadow: 0 0 3em;
     scroll-behavior: smooth;
+
+    transition: color .2s, background-color .2s;
 }
 
-main {
+body.crt #overlay {
+    display: block;
 }
 
 a {
@@ -118,6 +120,7 @@ a#backtotop:hover {
     left: 0;
     width: 100vw;
     height: 100vh;
+    display: none;
     background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
     background-size: 100vw .2em;
     background-repeat: repeat;
@@ -136,3 +139,27 @@ a#backtotop:hover {
     }
 }
 
+
+@media (prefers-color-scheme: light) {
+    a.link-button:hover {
+        box-shadow: none;
+    }
+
+    @keyframes list-item-fadein {
+        from {
+            opacity: 1;
+            background: var(--links);
+        }
+
+        to {
+            opacity: 1;
+            background: transparent;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body.crt {
+        text-shadow: 0 0 3em;
+    }
+}

public/style/music-gateway.css

@@ -17,6 +17,10 @@ body {
     font-family: "Monaspace Argon", monospace;
 }
 
+header {
+    background-color: #111;
+}
+
 #background {
     position: fixed;
     top: 0;
@@ -258,7 +262,7 @@ div#info p {
 
 #title,
 #artist {
-    text-shadow: 0 .05em 2px #0004
+    text-shadow: 0 .05em 2px #0004;
 }
 
 #type {

public/style/music.css

@@ -15,7 +15,7 @@ div.music {
     display: flex;
     flex-direction: row;
     gap: 1.5em;
-        border: 1px solid #222;
+    border: 1px solid #8882;
     border-radius: 4px;
     background-color: #ffffff08;
     transition: background-color .1s;
@@ -38,15 +38,19 @@ div.music a {
 }
 
 .music-artwork img {
-        border: 1px solid #888;
+    border: 1px solid #8888;
 }
 
 .music-title {
     margin: 0;
-        color: #eee;
+    color: var(--on-background);
     font-size: 1.6em;
     line-height: 1.6em;
 }
+.music-title a {
+    color: inherit;
+    transition: color .2s;
+}
 
 .music-year {
     color: #888;
@@ -62,6 +66,7 @@ h3[class^=music-type] {
     margin: 0 0 1rem 0;
     font-size: .8em;
     color: #eee;
+    transition: color .2s;
 }
 
 h3.music-type-single {
@@ -95,28 +100,6 @@ h3.music-type-upcoming {
     list-style: none;
 }
 
-/*
-.music-links li a {
-        padding: .2em .5em;
-        border: 1px solid #65b4fd;
-        color: #65b4fd;
-        border-radius: 2px;
-        background-color: transparent;
-        transition-property: color, border-color, background-color;
-        transition-duration: .2s;
-        animation: list-item-fadein .2s forwards;
-        animation-delay: 0s;
-        opacity: 0;
-}
-
-.music-links li a:hover {
-        color: #eee;
-        border-color: #eee;
-        background-color: var(--links) !important;
-        text-decoration: none;
-}
-*/
-
 h2.question {
     margin: 1rem 0;
     padding: 1rem 1.5rem;

views/index.html

@@ -16,6 +16,8 @@
 
 <link rel="me" href="https://ice.arimelody.me/@ari">
 <link rel="me" href="https://wetdry.world/@ari">
+
+<script type="module" src="/script/index.js" defer> </script>
 {{end}}
 
 {{define "content"}}
@@ -66,9 +68,9 @@
     <strong>my colours 🌈</strong>
     </p>
     <ul>
-        <li>primary: <span class="col-primary">#b7fd49</span></li>
+        <li>primary: <span class="col-primary" id="hex-primary">#b7fd49</span></li>
-        <li>secondary: <span class="col-secondary">#f8e05b</span></li>
+        <li>secondary: <span class="col-secondary" id="hex-secondary">#f8e05b</span></li>
-        <li>tertiary: <span class="col-tertiary">#f788fe</span></li>
+        <li>tertiary: <span class="col-tertiary" id="hex-tertiary">#f788fe</span></li>
     </ul>
 
     <p>