feat: initial support for darkmode toggle

assets/icons/toggle-left.svg

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,7 @@
+<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

@@ -128,6 +128,7 @@
     flex-direction: column;
     margin-top: 25px;
     overflow-y: auto;
+    flex-grow: 1;
 
     @media (min-width: $on-desktop-large) {
         margin-top: 30px;
@@ -205,3 +206,30 @@
         }
     }
 }
+
+.theme-dark {
+    #dark-mode-toggle {
+        color: var(--accent-color);
+        font-weight: 700;
+
+        .icon-tabler-toggle-left {
+            display: none;
+        }
+
+        .icon-tabler-toggle-right {
+            display: unset;
+        }
+    }
+}
+
+#dark-mode-toggle {
+    margin-top: auto;
+    color: var(--body-text-color);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .icon-tabler-toggle-right {
+        display: none;
+    }
+}

assets/scss/partials/sidebar.scss

@@ -26,7 +26,7 @@
         width: 25%;
         margin-right: 1%;
         padding: var(--main-top-padding) 15px;
-        max-height: 100vh;
+        height: 100vh;
     }
 
     @media (min-width: $on-desktop) {

assets/scss/variables.scss

@@ -20,7 +20,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --section-separation: 40px;
 
-    @media (prefers-color-scheme: dark) {
+    .theme-dark {
         --body-background: #303030;
         --accent-color: #ecf0f1;
         --accent-color-darker: #bdc3c7;
@@ -64,7 +64,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --small-card-padding: 25px;
 
-    @media (prefers-color-scheme: dark) {
+    .theme-dark {
         --card-background: #424242;
         --card-background-selected: rgba(255, 255, 255, 0.16);
         --card-text-color-main: rgba(255, 255, 255, 0.9);
@@ -108,7 +108,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --table-border-color: #dadada;
     --tr-even-background-color: #efefee;
 
-    @media (prefers-color-scheme: dark) {
+    .theme-dark {
         --code-background-color: #272822;
         --code-text-color: rgba(255, 255, 255, 0.9);
 
@@ -129,4 +129,4 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
     --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
         0px 0px 1px rgba(0, 0, 0, 0.04);
-}
+}

assets/ts/darkmode.ts

@@ -0,0 +1,29 @@
+export default () => {
+    const toggleDarkMode = document.getElementById('dark-mode-toggle');
+    const darkModeKey = 'StackDarkMode';
+    const darkModeEnabled = localStorage.getItem(darkModeKey) === 'true';
+
+    let darkMode = false;
+
+    if (darkModeEnabled) {
+        darkMode = true;
+    }
+    else {
+        darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+    }
+
+    document.body.style.setProperty('transition', 'background-color .3s ease');
+
+    toggleDarkMode.addEventListener('click', (e) => {
+        darkMode = !darkMode;
+
+        if (darkMode) {
+            document.body.classList.add('theme-dark');
+        }
+        else {
+            document.body.classList.remove('theme-dark');
+        }
+
+        localStorage.setItem(darkModeKey, darkMode.toString());
+    })
+}

assets/ts/main.ts

@@ -9,9 +9,12 @@
 import { createGallery } from "./gallery"
 import { getColor } from './color';
 import menu from './menu';
+import darkmode from "./darkmode";
 
 let Stack = {
     init: () => {
+        darkmode();
+        
         /**
          * Bind menu event
          */

i18n/en.toml

@@ -20,4 +20,7 @@
     other = "Not Found"
 
 [notFoundSubtitle]
-    other = "This page does not exist."
+    other = "This page does not exist."
+
+[darkModeToggle]
+    other = "Dark Mode"

i18n/zh-CN.toml

@@ -20,4 +20,7 @@
     other = "404 错误"
 
 [notFoundSubtitle]
-    other = "页面不存在"
+    other = "页面不存在"
+
+[darkModeToggle]
+    other = "暗色模式"

layouts/_default/baseof.html

@@ -2,6 +2,19 @@
 <html lang="{{ .Site.LanguageCode }}">
     {{- partial "head/head.html" . -}}
     <body class="{{ block `body-class` . }}{{ end }}">
+        <script>
+            (function() {
+                const darkModeKey = 'StackDarkMode';
+                const darkModeItem = localStorage.getItem(darkModeKey);
+                const darkModeEnabled = localStorage.getItem(darkModeKey) === 'true';
+                const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+
+                if(darkModeItem && darkModeEnabled || !darkModeItem && supportDarkMode){
+                    document.body.classList.add('theme-dark');
+                }
+            })();
+        </script>
+
         <div class="container extended flex on-phone--column align-items--flex-start {{ block `container-class` . }}{{end}}">
             {{ partial "sidebar/left.html" . }}
             <main class="main full-width">

layouts/partials/sidebar/left.html

@@ -39,5 +39,11 @@
             </a>
         </li>
         {{ end }}
+
+        <li id="dark-mode-toggle">
+            {{ (resources.Get "icons/toggle-left.svg").Content | safeHTML }}
+            {{ (resources.Get "icons/toggle-right.svg").Content | safeHTML }}
+            <span>{{ T "darkModeToggle" }}</span>
+        </li>
     </ol>
 </aside>