fix: Respect user's preferred theme even when JavaScript isn't enabled (

#169)

assets/js/dark-mode.js

@@ -1,34 +1,13 @@
 // Back to Previous Mode & Respect System Preferences
-// `userPrefers`, `darkModeMediaQuery`, `lightModeMediaQuery` is defined in layouts/partials/head.html
-
-if (userPrefers === 'dark') {
-    changeMode('dark');
-} else if (userPrefers === 'light') {
-    changeMode('light');
-} else if (darkModeMediaQuery.matches) {
-    changeMode('dark');
-} else if (lightModeMediaQuery.matches) {
-    changeMode('light');
-}
+
+changeMode();
 
 // Reactive Dark Mode
 // https://web.dev/prefers-color-scheme/#reacting-on-dark-mode-changes
 // https://twitter.com/ChromeDevTools/status/1197175265643745282
 
-darkModeMediaQuery.addListener((e) => {
-    const darkModeOn = e.matches;
-    if (darkModeOn) {
-        changeModeMeta('dark');
-        changeMode('dark');
-    }
-});
-
-lightModeMediaQuery.addListener((e) => {
-    const lightModeOn = e.matches;
-    if (lightModeOn) {
-        changeModeMeta('light');
-        changeMode('light');
-    }
+window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
+    changeMode();
 });
 
 // Theme Switcher
@@ -39,15 +18,13 @@ const themeSwitcher = document.getElementById('theme-switcher');
 if (themeSwitcher) {
     themeSwitcher.addEventListener('click', (e) => {
         e.preventDefault();
-        if (document.documentElement.dataset.theme == "dark") {
+        if (getCurrentTheme() == "dark") {
             changeModeMeta('light');
-            changeMode('light');
-            storePrefers('light');
         } else {
             changeModeMeta('dark');
-            changeMode('dark');
-            storePrefers('dark');
         }
+        changeMode();
+        storePrefers();
     });
 }
 
@@ -57,17 +34,24 @@ if (themeSwitcher) {
 window.addEventListener('storage', function (event) {
     if (event.newValue === 'dark') {
         changeModeMeta('dark');
-        changeMode('dark');
     } else {
         changeModeMeta('light');
-        changeMode('light');
     }
+    changeMode();
 });
 
 // Functions
 
-function changeMode(theme) {
-    const isDark = theme === 'dark';
+function getCurrentTheme() {
+    return JSON.parse(window.getComputedStyle(document.documentElement, null).getPropertyValue("--theme-name"));
+}
+
+function changeMode() {
+    const isDark = getCurrentTheme() === 'dark';
+
+    // Change theme color meta
+    const themeColor = isDark ? '{{ .Site.Params.themeColorDark }}': '{{ .Site.Params.themeColor }}';
+    document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor);
 
     // Change Chroma Code Highlight Theme
     const oldChromaTheme = isDark ? 'chroma' : 'chroma-dark';
@@ -98,6 +82,6 @@ function changeMode(theme) {
     {{ end }}
 }
 
-function storePrefers(theme) {
-    window.localStorage.setItem('theme', theme);
+function storePrefers() {
+    window.localStorage.setItem('theme', getCurrentTheme());
 }

assets/scss/components/_dark-mode.scss

@@ -7,19 +7,6 @@
         color: var(--color-primary);
     }
 
-    .theme-icon-dark {
-        display: none;
-    }
-
-    [data-theme="dark"] & {
-        .theme-icon-light {
-            display: none;
-        }
-        .theme-icon-dark {
-            display: inline-block;
-        }
-    }
-
     .icon {
         margin-right: 0 !important;
     }

assets/scss/main.scss

@@ -156,6 +156,12 @@
     {{ end }}
 {{ end }}
 
+{{ if and .Site.Params.enableDarkMode (eq .Site.Params.defaultTheme "dark") }}
+    $defaultTheme: dark;
+{{ else }}
+    $defaultTheme: light;
+{{ end }}
+
 @import "themes/light";
 
 // Dark Mode

assets/scss/themes/_dark.scss

@@ -1,12 +1,37 @@
 // https://codyhouse.co/ds/globals/colors
 // https://github.com/dracula/dracula-theme/
 
-[data-theme="dark"] {
+@mixin dark-theme {
+    --theme-name: "dark";
     @include defineColorHSL(--color-primary, $primaryColorDarkH, $primaryColorDarkS, $primaryColorDarkL);
     @include defineColorHSL(--color-bg, 231, 14%, 10%); // 0%
     @include defineColorHSL(--color-contrast-lower, 230, 8%, 15%); // 8%
     @include defineColorHSL(--color-contrast-low, 240, 2%, 25%); // 25%
     @include defineColorHSL(--color-contrast-medium, 80, 1%, 50%); // 60%
     @include defineColorHSL(--color-contrast-high, 69, 4%, 68%); // 85%
     @include defineColorHSL(--color-contrast-higher, 60, 10%, 80%); // 100%
+    .theme-icon-light {
+        display: none;
+    }
+    .theme-icon-dark {
+        display: inline-block;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme])
+    {
+        @include dark-theme;
+    }
+}
+
+@if $defaultTheme == dark {
+    :root {
+        @include dark-theme;
+    }
+}
+@else {
+    :root[data-theme="dark"] {
+        @include dark-theme;
+    }
 }

assets/scss/themes/_light.scss

@@ -1,11 +1,36 @@
 // https://codyhouse.co/ds/globals/colors
 
-:root {
+@mixin light-theme {
+    --theme-name: "light";
     @include defineColorHSL(--color-primary, $primaryColorLightH, $primaryColorLightS, $primaryColorLightL);
     @include defineColorHSL(--color-bg, 0, 0%, 100%);
     @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%);
     @include defineColorHSL(--color-contrast-low, 240, 1%, 83%);
     @include defineColorHSL(--color-contrast-medium, 240, 1%, 48%);
     @include defineColorHSL(--color-contrast-high, 240, 4%, 20%);
     @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%);
+    .theme-icon-light {
+        display: inline-block;
+    }
+    .theme-icon-dark {
+        display: none;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root:not([data-theme])
+    {
+        @include light-theme;
+    }
+}
+
+@if $defaultTheme == light {
+    :root {
+        @include light-theme;
+    }
+}
+@else {
+    :root[data-theme="light"] {
+        @include light-theme;
+    }
 }

exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json

@@ -1 +1 @@
-{"Target":"css/meme.min.927661e0387b38c89693e1e88b77f76f95dbe58e5082bf462891be5a6d1898db.css","MediaType":"text/css","Data":{"Integrity":"sha256-knZh4Dh7OMiWk+Hoi3f3b5Xb5Y5Qgr9GKJG+Wm0YmNs="}}
+{"Target":"css/meme.min.d6acf9d8381fd38d6ee816dfceb3a5a0d7826360238525a707812d09d647082b.css","MediaType":"text/css","Data":{"Integrity":"sha256-1qz52Dgf041u6BbfzrOloNeCY2AjhSWnB4EtCdZHCCs="}}

layouts/_default/baseof.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ .Site.LanguageCode }}"{{ if .Site.Params.enableDarkMode }}{{ with .Site.Params.defaultTheme | default "light" }} data-theme="{{ . }}"{{ end }}{{ end }}>
+<html lang="{{ .Site.LanguageCode }}">
     {{ partial "head.html" . }}
     <body>
         <div class="container">

layouts/partials/head.html

@@ -15,27 +15,13 @@
     {{- if .Site.Params.enableDarkMode }}
         <script>
             const userPrefers = localStorage.getItem('theme');
-            const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            const lightModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
             if (userPrefers === 'dark') {
                 changeModeMeta('dark');
             } else if (userPrefers === 'light') {
                 changeModeMeta('light');
-            } else if (darkModeMediaQuery.matches) {
-                changeModeMeta('dark');
-            } else if (lightModeMediaQuery.matches) {
-                changeModeMeta('light');
             }
             function changeModeMeta(theme) {
                 document.documentElement.setAttribute('data-theme', theme);
-                if (theme === 'dark') {
-                    changeThemeColor('{{ .Site.Params.themeColorDark }}');
-                } else {
-                    changeThemeColor('{{ .Site.Params.themeColor }}');
-                }
-            }
-            function changeThemeColor(themeColor) {
-                document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor);
             }
         </script>
     {{- end }}