feat: option to follow the system-wide light/dark mode (#71)

package.json

@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.5.9",
-    "@astrojs/sitemap": "^3.1.2",
     "@astrojs/rss": "^4.0.5",
+    "@astrojs/sitemap": "^3.1.2",
     "@astrojs/svelte": "^5.2.0",
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/jetbrains-mono": "^5.0.20",
@@ -47,6 +47,7 @@
     "@iconify-json/fa6-regular": "^1.1.18",
     "@iconify-json/fa6-solid": "^1.1.20",
     "@iconify-json/material-symbols": "^1.1.74",
+    "@iconify/svelte": "^3.1.6",
     "@rollup/plugin-yaml": "^4.1.2",
     "@tailwindcss/typography": "^0.5.10",
     "@types/markdown-it": "^14.0.0",

pnpm-lock.yaml

@@ -8,12 +8,12 @@ dependencies:
   '@astrojs/check':
     specifier: ^0.5.9
     version: 0.5.9(typescript@5.4.2)
-  '@astrojs/sitemap':
-    specifier: ^3.1.2
-    version: 3.1.2
   '@astrojs/rss':
     specifier: ^4.0.5
     version: 4.0.5
+  '@astrojs/sitemap':
+    specifier: ^3.1.2
+    version: 3.1.2
   '@astrojs/svelte':
     specifier: ^5.2.0
     version: 5.2.0(astro@4.4.15)(svelte@4.2.12)(typescript@5.4.2)(vite@5.1.6)
@@ -103,6 +103,9 @@ devDependencies:
   '@iconify-json/material-symbols':
     specifier: ^1.1.74
     version: 1.1.75
+  '@iconify/svelte':
+    specifier: ^3.1.6
+    version: 3.1.6(svelte@4.2.12)
   '@rollup/plugin-yaml':
     specifier: ^4.1.2
     version: 4.1.2(rollup@2.79.1)
@@ -134,7 +137,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
-    dev: false
 
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
@@ -231,12 +233,6 @@ packages:
       prismjs: 1.29.0
     dev: false
 
-  /@astrojs/sitemap@3.1.2:
-    resolution: {integrity: sha512-FxOJldIl5ltZ5CNjocQxHkAO9orwHBjqtaU28o4smobp9vowS0nbGp+I9CrPxkzWdl1crSDm9vjL9tnvG1DSug==}
-    dependencies:
-      sitemap: 7.1.1
-      zod: 3.22.4
-
   /@astrojs/rss@4.0.5:
     resolution: {integrity: sha512-IyJVL6z09AQtxbgLaAwebT3T5YKe4oTHDesqydJv1KLHw+zEzzMCFuuNsEyxjiqu7df9+DDCpDXLj/WRiEUXvw==}
     dependencies:
@@ -244,6 +240,13 @@ packages:
       kleur: 4.1.5
     dev: false
 
+  /@astrojs/sitemap@3.1.2:
+    resolution: {integrity: sha512-FxOJldIl5ltZ5CNjocQxHkAO9orwHBjqtaU28o4smobp9vowS0nbGp+I9CrPxkzWdl1crSDm9vjL9tnvG1DSug==}
+    dependencies:
+      sitemap: 7.1.1
+      zod: 3.22.4
+    dev: false
+
   /@astrojs/svelte@5.2.0(astro@4.4.15)(svelte@4.2.12)(typescript@5.4.2)(vite@5.1.6):
     resolution: {integrity: sha512-GmwbXks2WMkmAfl0rlPM/2gA1RtmZzjGV2mOceV3g7QNyjIsSYBPKrlEnSFnuR+YMvlAtWdbMFBsb3gtGxnTTg==}
     engines: {node: '>=18.14.1'}
@@ -1948,6 +1951,15 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify/svelte@3.1.6(svelte@4.2.12):
+    resolution: {integrity: sha512-yLSrlkOx5J6xXU5GDLPBV/MdVBVEZhd36onfqSbxQobp1XBoWQbMPLNZyCAmTKCPnmzXSowGy79agl8FQ3kj6A==}
+    peerDependencies:
+      svelte: '*'
+    dependencies:
+      '@iconify/types': 2.0.0
+      svelte: 4.2.12
+    dev: true
+
   /@iconify/tools@3.0.7:
     resolution: {integrity: sha512-DxfhFLMnooS34dHelpGUnnYrxLZHs0czC1CgrBhAbuL8ddVzBb2VEQm8kh9qGh7A34qeXAB5iSHH3A72rAaFrg==}
     dependencies:
@@ -2905,18 +2917,18 @@ packages:
       '@types/node': 20.11.28
     dev: false
 
-  /@types/sax@1.2.7:
-    resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
-    dependencies:
-      '@types/node': 20.11.28
-    dev: false
-
   /@types/sanitize-html@2.11.0:
     resolution: {integrity: sha512-7oxPGNQHXLHE48r/r/qjn7q0hlrs3kL7oZnGj0Wf/h9tj/6ibFyRkNbsDxaBBZ4XUZ0Dx5LGCyDJ04ytSofacQ==}
     dependencies:
       htmlparser2: 8.0.2
     dev: true
 
+  /@types/sax@1.2.7:
+    resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
+    dependencies:
+      '@types/node': 20.11.28
+    dev: false
+
   /@types/tar@6.1.11:
     resolution: {integrity: sha512-ThA1WD8aDdVU4VLuyq5NEqriwXErF5gEIJeyT6gHBWU7JtSmW2a5qjNv3/vR82O20mW+1vhmeZJfBQPT3HCugg==}
     dependencies:
@@ -3027,7 +3039,6 @@ packages:
     resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: false
 
   /ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
@@ -3096,7 +3107,6 @@ packages:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
       dequal: 2.0.3
-    dev: false
 
   /array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
@@ -3267,7 +3277,6 @@ packages:
     resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
     dependencies:
       dequal: 2.0.3
-    dev: false
 
   /b4a@1.6.6:
     resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
@@ -3687,7 +3696,6 @@ packages:
       acorn: 8.11.3
       estree-walker: 3.0.3
       periscopic: 3.1.0
-    dev: false
 
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
@@ -3860,7 +3868,6 @@ packages:
     dependencies:
       mdn-data: 2.0.30
       source-map-js: 1.0.2
-    dev: false
 
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
@@ -4024,7 +4031,6 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: false
 
   /detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
@@ -4337,7 +4343,6 @@ packages:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: false
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -5188,7 +5193,6 @@ packages:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: false
 
   /is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
@@ -5526,7 +5530,6 @@ packages:
 
   /locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
-    dev: false
 
   /locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
@@ -5614,7 +5617,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
 
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -5831,7 +5833,6 @@ packages:
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-    dev: false
 
   /mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
@@ -6641,7 +6642,6 @@ packages:
       '@types/estree': 1.0.5
       estree-walker: 3.0.3
       is-reference: 3.0.2
-    dev: false
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -8173,7 +8173,6 @@ packages:
       locate-character: 3.0.0
       magic-string: 0.30.8
       periscopic: 3.1.0
-    dev: false
 
   /svgo@2.8.0:
     resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}

src/components/GlobalStyles.astro

@@ -195,8 +195,8 @@ color_set({
     .float-panel {
         @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
     }
-    .float-panel.closed {
+    .float-panel-closed {
-        @apply top-[4.75rem] opacity-0 pointer-events-none
+        @apply -translate-y-1 opacity-0 pointer-events-none
     }
     .search-panel mark {
         @apply bg-transparent text-[var(--primary)]

src/components/LightDarkSwitch.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+
+import Icon from "@iconify/svelte"
+import {i18n} from '@i18n/translation'
+import I18nKey from '@i18n/i18nKey'
+import {LIGHT_MODE, DARK_MODE, AUTO_MODE, setTheme, getStoredTheme} from '../utils/setting-utils.ts'
+import {onMount} from "svelte";
+
+const seq = [LIGHT_MODE, DARK_MODE, AUTO_MODE]
+let mode = AUTO_MODE
+
+onMount(() => {
+    mode = getStoredTheme()
+})
+
+function switchScheme(newMode: string) {
+    mode = newMode
+    setTheme(newMode)
+}
+
+function toggleScheme() {
+    let i = 0
+    for (; i < seq.length; i++) {
+        if (seq[i] === mode) {
+            break
+        }
+    }
+    switchScheme(seq[(i + 1) % seq.length])
+}
+
+function showPanel() {
+    const panel = document.querySelector('#light-dark-panel')
+    panel.classList.remove('float-panel-closed')
+}
+
+function hidePanel() {
+    const panel = document.querySelector('#light-dark-panel')
+    panel.classList.add('float-panel-closed')
+}
+
+</script>
+
+<!-- z-50 make the panel higher than other float panels -->
+<div class="relative z-50" role="menu" tabindex="-1" on:mouseleave={hidePanel}>
+    <button aria-label="Light/Dark Mode" role="menuitem" class="relative btn-plain h-11 w-11 rounded-lg active:scale-90" id="scheme-switch" on:click={toggleScheme} on:mouseenter={showPanel}>
+        <div class="absolute" class:opacity-0={mode !== LIGHT_MODE}>
+            <Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem]"></Icon>
+        </div>
+        <div class="absolute" class:opacity-0={mode !== DARK_MODE}>
+            <Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem]"></Icon>
+        </div>
+        <div class="absolute" class:opacity-0={mode !== AUTO_MODE}>
+            <Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem]"></Icon>
+        </div>
+    </button>
+
+    <div id="light-dark-panel" class="hidden lg:block absolute transition float-panel-closed top-11 -right-2 pt-5" >
+        <div class="card-base float-panel p-2">
+            <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain h-9 rounded-lg px-3 font-medium active:scale-95 mb-0.5"
+                    class:current-setting={mode === LIGHT_MODE}
+                    on:click={() => switchScheme(LIGHT_MODE)}
+            >
+                <Icon icon="material-symbols:wb-sunny-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
+                {i18n(I18nKey.lightMode)}
+            </button>
+            <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain h-9 rounded-lg px-3 font-medium active:scale-95 mb-0.5"
+                    class:current-setting={mode === DARK_MODE}
+                    on:click={() => switchScheme(DARK_MODE)}
+            >
+                <Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem] mr-3"></Icon>
+                {i18n(I18nKey.darkMode)}
+            </button>
+            <button class="flex transition whitespace-nowrap items-center justify-start w-full btn-plain h-9 rounded-lg px-3 font-medium active:scale-95"
+                    class:current-setting={mode === AUTO_MODE}
+                    on:click={() => switchScheme(AUTO_MODE)}
+            >
+                <Icon icon="material-symbols:radio-button-partial-outline" class="text-[1.25rem] mr-3"></Icon>
+                {i18n(I18nKey.systemMode)}
+            </button>
+        </div>
+    </div>
+</div>
+
+<style lang="css">
+.current-setting {
+    background: var(--btn-plain-bg-hover);
+    color: var(--primary);
+}
+</style>

src/components/Navbar.astro

@@ -6,6 +6,7 @@ import {navBarConfig, siteConfig} from "../config";
 import NavMenuPanel from "./widget/NavMenuPanel.astro";
 import Search from "./Search.svelte";
 import {LinkPresets} from "../constants/link-presets";
+import LightDarkSwitch from "./LightDarkSwitch.svelte";
 const className = Astro.props.class;
 
 let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset): NavBarLink => {
@@ -48,10 +49,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
         <button aria-label="Display Settings" class="btn-plain h-11 w-11 rounded-lg active:scale-90" id="display-settings-switch">
             <Icon name="material-symbols:palette-outline" size={"1.25rem"}></Icon>
         </button>
-        <button aria-label="Light/Dark Mode" class="btn-plain h-11 w-11 rounded-lg active:scale-90" id="scheme-switch">
+        <LightDarkSwitch client:load></LightDarkSwitch>
-            <Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon>
-            <Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
-        </button>
         <button aria-label="Menu" name="Nav Menu" class="btn-plain w-11 h-11 rounded-lg active:scale-90 md:hidden" id="nav-menu-switch">
             <Icon name="material-symbols:menu-rounded" size={"1.25rem"}></Icon>
         </button>
@@ -86,13 +84,13 @@ function loadButtonScript() {
     let settingBtn = document.getElementById("display-settings-switch");
     settingBtn.addEventListener("click", function () {
         let settingPanel = document.getElementById("display-setting");
-        settingPanel.classList.toggle("closed");
+        settingPanel.classList.toggle("float-panel-closed");
     });
 
     let menuBtn = document.getElementById("nav-menu-switch");
     menuBtn.addEventListener("click", function () {
         let menuPanel = document.getElementById("nav-menu-panel");
-        menuPanel.classList.toggle("closed");
+        menuPanel.classList.toggle("float-panel-closed");
     });
 }
 

src/components/Search.svelte

@@ -26,7 +26,7 @@ onMount(() => {
             return
 
         if (!keyword && isDesktop) {
-            panel.classList.add("closed")
+            panel.classList.add("float-panel-closed")
             return
         }
 
@@ -43,12 +43,12 @@ onMount(() => {
         }
 
         if (!arr.length && isDesktop) {
-            panel.classList.add("closed")
+            panel.classList.add("float-panel-closed")
             return
         }
 
         if (isDesktop) {
-            panel.classList.remove("closed")
+            panel.classList.remove("float-panel-closed")
         }
         result = arr
     }
@@ -56,7 +56,7 @@ onMount(() => {
 
 const togglePanel = () => {
     let panel = document.getElementById('search-panel')
-    panel?.classList.toggle("closed")
+    panel?.classList.toggle("float-panel-closed")
 }
 
 $: search(keywordDesktop, true)
@@ -82,7 +82,7 @@ $: search(keywordMobile, false)
 </button>
 
 <!-- search panel -->
-<div id="search-panel" class="float-panel closed search-panel absolute md:w-[30rem]
+<div id="search-panel" class="float-panel float-panel-closed search-panel absolute md:w-[30rem]
 top-20 left-4 md:left-[unset] right-4 shadow-2xl rounded-2xl p-2">
 
     <!-- search bar inside panel for phone/tablet -->

src/components/widget/DisplaySettings.svelte

@@ -15,7 +15,7 @@ $: if (hue || hue === 0) {
 }
 </script>
 
-<div id="display-setting" class="float-panel closed absolute transition-all w-80 fixed right-4 px-4 py-4">
+<div id="display-setting" class="float-panel float-panel-closed absolute transition-all w-80 right-4 px-4 py-4">
     <div class="flex flex-row gap-2 mb-3 items-center justify-between">
         <div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
             before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]

src/components/widget/NavMenuPanel.astro

@@ -9,7 +9,7 @@ interface Props {
 
 const links = Astro.props.links;
 ---
-<div id="nav-menu-panel" class:list={["float-panel closed absolute transition-all fixed right-4 px-2 py-2"]}>
+<div id="nav-menu-panel" class:list={["float-panel float-panel-closed absolute transition-all fixed right-4 px-2 py-2"]}>
     {links.map((link) => (
         <a href={link.url} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
             hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition

src/i18n/i18nKey.ts

@@ -22,6 +22,10 @@ enum I18nKey {
 
   themeColor = 'themeColor',
 
+  lightMode =  'lightMode',
+  darkMode = 'darkMode',
+  systemMode = 'systemMode',
+
   more = 'more',
 
   author = 'author',

src/i18n/languages/en.ts

@@ -25,6 +25,10 @@ export const en: Translation = {
 
   [Key.themeColor]: 'Theme Color',
 
+  [Key.lightMode]: 'Light',
+  [Key.darkMode]: 'Dark',
+  [Key.systemMode]: 'System',
+
   [Key.more]: 'More',
 
   [Key.author]: 'Author',

src/i18n/languages/ja.ts

@@ -25,6 +25,10 @@ export const ja: Translation = {
 
   [Key.themeColor]: 'テーマカラー',
 
+  [Key.lightMode]: 'ライト',
+  [Key.darkMode]: 'ダーク',
+  [Key.systemMode]: 'システム',
+
   [Key.more]: 'もっと',
 
   [Key.author]: '作者',

src/i18n/languages/zh_CN.ts

@@ -25,6 +25,10 @@ export const zh_CN: Translation = {
 
   [Key.themeColor]: '主题色',
 
+  [Key.lightMode]: '亮色',
+  [Key.darkMode]: '暗色',
+  [Key.systemMode]: '跟随系统',
+
   [Key.more]: '更多',
 
   [Key.author]: '作者',

src/i18n/languages/zh_TW.ts

@@ -25,6 +25,10 @@ export const zh_TW: Translation = {
 
   [Key.themeColor]: '主題色',
 
+  [Key.lightMode]: '亮色',
+  [Key.darkMode]: '暗色',
+  [Key.systemMode]: '跟隨系統',
+
   [Key.more]: '更多',
 
   [Key.author]: '作者',

src/layouts/Layout.astro

@@ -69,7 +69,7 @@ const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon :
 ---
 
 <!DOCTYPE html>
-<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
+<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition dark text-[14px] md:text-[16px]">
 	<head>
 
 		<title>{pageTitle}</title>
@@ -148,7 +148,7 @@ import {
 	SizeObserverPlugin,
 	ClickScrollPlugin
 } from 'overlayscrollbars';
-import {getHue, setHue} from "../utils/setting-utils";
+import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
 
 	/* Preload fonts */
 // (async function() {
@@ -202,7 +202,7 @@ function setClickOutsideToClose(panel: string, ignores: string[]) {
 				return;
 			}
 		}
-		panelDom.classList.add("closed");
+		panelDom.classList.add("float-panel-closed");
 	});
 }
 setClickOutsideToClose("display-setting", ["display-setting", "display-settings-switch"])
@@ -211,14 +211,8 @@ setClickOutsideToClose("search-panel", ["search-panel", "search-bar", "search-sw
 
 
 function loadTheme() {
-	if (localStorage.theme === 'dark' || (!('theme' in localStorage) &&
+	const theme = getStoredTheme()
-		window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+	setTheme(theme)
-		document.documentElement.classList.add('dark');
-		localStorage.theme = 'dark';
-	} else {
-		document.documentElement.classList.remove('dark');
-		localStorage.theme = 'light';
-	}
 }
 
 function loadHue() {

src/utils/setting-utils.ts

@@ -17,3 +17,28 @@ export function setHue(hue: number): void {
   }
   r.style.setProperty('--hue', hue)
 }
+
+export const LIGHT_MODE = 'light', DARK_MODE = 'dark', AUTO_MODE = 'auto'
+
+export function setTheme(theme: string): void {
+  localStorage.setItem('theme', theme)
+  switch (theme) {
+    case LIGHT_MODE:
+      document.documentElement.classList.remove('dark');
+      break
+    case DARK_MODE:
+      document.documentElement.classList.add('dark');
+      break
+    case AUTO_MODE:
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+      break
+  }
+}
+
+export function getStoredTheme(): string {
+  return localStorage.getItem('theme') || AUTO_MODE
+}