Merge master

assets/icons/brightness.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brightness" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <circle cx="12" cy="12" r="9" />
+  <line x1="12" y1="3" x2="12" y2="21" />
+  <path d="M12 9l4.65 -4.65" />
+  <path d="M12 14.3l7.37 -7.37" />
+  <path d="M12 19.6l8.85 -8.85" />
+</svg>
+
+

assets/icons/toggle-left.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z"/>
-  <circle cx="8" cy="12" r="2" />
-  <rect x="2" y="6" width="20" height="12" rx="6" />
-</svg>
-
-

assets/icons/toggle-right.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z"/>
-  <circle cx="16" cy="12" r="2" />
-  <rect x="2" y="6" width="20" height="12" rx="6" />
-</svg>
-
-

assets/scss/partials/menu.scss

@@ -214,28 +214,28 @@
 }
 
 [data-scheme="dark"] {
-    #dark-mode-toggle {
+    #schemeSelectItem {
         color: var(--accent-color);
         font-weight: 700;
-
-        .icon-tabler-toggle-left {
-            display: none;
-        }
-
-        .icon-tabler-toggle-right {
-            display: unset;
-        }
     }
 }
 
-#dark-mode-toggle {
+#schemeSelectItem {
     margin-top: auto;
     color: var(--body-text-color);
     display: flex;
     align-items: center;
-    cursor: pointer;
+}
 
-    .icon-tabler-toggle-right {
+#schemeSelect {
-        display: none;
+    background: transparent;
+    border: 0;
+    color: var(--body-text-color);
+    padding: 0;
+    appearance: none;
+
+    option {
+        color: var(--card-text-color-main);
+        background-color: var(--card-background);
     }
 }

assets/ts/darkmode.ts

@@ -1,53 +1,64 @@
-export default () => {
+type colorScheme = 'light' | 'dark' | 'auto';
-    const toggleDarkMode = document.getElementById('dark-mode-toggle');
-    const darkModeKey = 'StackDarkMode';
-    const darkModeItem = localStorage.getItem(darkModeKey);
-    const darkModeEnabled = localStorage.getItem(darkModeKey) === 'true';
-    const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
-    const mql = window.matchMedia('(prefers-color-scheme: dark)');
 
-    let darkMode = false;
+const colorSchemeKey = 'StackColorScheme';
+const mql = window.matchMedia('(prefers-color-scheme: dark)');
+const schemeSelect = document.getElementById('schemeSelect') as HTMLSelectElement;
 
-    if (darkModeItem && darkModeEnabled || !darkModeItem && supportDarkMode) {
+const supportDarkMode = () => {
-        /**
+    return window.matchMedia('(prefers-color-scheme: dark)').matches === true;
-         * Enable dark mode if:
+}
-         * 1. If dark mode is set already (in local storage)
-         * 2. No color scheme preference is set in localstorage, and user's browser indicates preference for dark mode
-         */
-        darkMode = true;
-    }
 
-    const setBodyClass = () => {
+const saveScheme = (scheme: colorScheme) => {
-        if (darkMode) {
+    localStorage.setItem(colorSchemeKey, scheme);
+}
+
+const getScheme = () => {
+    return localStorage.getItem(colorSchemeKey) as colorScheme;
+};
+
+const setScheme = (scheme: colorScheme) => {
+    if (scheme === 'auto') {
+        if (supportDarkMode()) {
             document.body.dataset.scheme = 'dark';
         }
         else {
             document.body.dataset.scheme = 'light';
         }
     }
-
+    else {
-    const mediaQueryListener = (e) => {
+        document.body.dataset.scheme = scheme;
-        darkMode = e.matches;
-        setBodyClass();
-    }
-    
-    let listening = false;
-    if (!darkModeItem) {
-        /**
-         * If no dark mode preference is set in local storage, listen to browser color preference change
-         */
-        mql.addEventListener('change', mediaQueryListener);
-        listening = true;
     }
+}
 
+const mediaQueryListener = (e) => {
+    setScheme('auto');
+}
+
+export default () => {
     document.body.style.setProperty('transition', 'background-color .3s ease');
 
-    toggleDarkMode.addEventListener('click', (e) => {
+    if (!getScheme()) {
-        darkMode = !darkMode;
+        /// First time visiting
-        setBodyClass();
+        setScheme('auto');
-        localStorage.setItem(darkModeKey, darkMode.toString());
+        saveScheme('auto')
+        mql.addEventListener('change', mediaQueryListener);
+    }
+    else {
+        setScheme(getScheme());
+    }
 
-        if (listening) {
+    schemeSelect.value = getScheme();
+
+    schemeSelect.addEventListener('change', (e) => {
+        const value = schemeSelect.value as colorScheme;
+
+        setScheme(value);
+        saveScheme(value);
+
+        if (value === 'auto') {
+            mql.addEventListener('change', mediaQueryListener);
+        }
+        else {
             /**
              * Remove listener once user set color preference in website
              */

layouts/partials/sidebar/left.html

@@ -46,10 +46,14 @@
         </li>
         {{ end }}
 
-        <li id="dark-mode-toggle">
+        <li id="schemeSelectItem">
-            {{ (resources.Get "icons/toggle-left.svg").Content | safeHTML }}
+            {{ (resources.Get "icons/brightness.svg").Content | safeHTML }}
-            {{ (resources.Get "icons/toggle-right.svg").Content | safeHTML }}
+
-            <span>{{ T "darkMode.toggle" }}</span>
+            <select id="schemeSelect">
+                <option value="light">Light Theme</option>
+                <option value="dark">Dark Theme</option>
+                <option value="auto">Auto</option>
+            </select>
         </li>
     </ol>
 </aside>