feat: add setup color scheme support

settings.yaml

@@ -67,6 +67,26 @@ spec:
             - label: 隐藏
               value: false
 
+    - group: style
+      label: 样式
+      formSchema:
+        - $formkit: radio
+          name: color_scheme
+          label: 默认配色
+          value: system
+          options:
+            - label: 跟随系统
+              value: system
+            - label: 深色
+              value: dark
+            - label: 浅色
+              value: light
+
+        - $formkit: checkbox
+          name: enable_change_color_scheme
+          label: 允许访客切换配色
+          value: true
+
     - group: sidebar
       label: 侧边栏
       formSchema:

src/main.ts

@@ -42,3 +42,40 @@ export function openSearch() {
   }
   window.SearchWidget.open();
 }
+
+type ColorSchemeType = "system" | "dark" | "light";
+
+export let currentColorScheme: ColorSchemeType = "system";
+
+export function initColorScheme(defaultColorScheme: ColorSchemeType, enableChangeColorScheme: boolean) {
+  let colorScheme = defaultColorScheme;
+
+  if (enableChangeColorScheme) {
+    colorScheme = (localStorage.getItem("color-scheme") as ColorSchemeType) || defaultColorScheme;
+  }
+
+  currentColorScheme = colorScheme;
+
+  setColorScheme(colorScheme, false);
+}
+
+export function setColorScheme(colorScheme: ColorSchemeType, store: boolean) {
+  if (colorScheme === "system") {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    document.documentElement.classList.add(prefersDark ? "dark" : "light");
+    document.documentElement.classList.remove(prefersDark ? "light" : "dark");
+  } else {
+    document.documentElement.classList.add(colorScheme);
+    document.documentElement.classList.remove(colorScheme === "dark" ? "light" : "dark");
+  }
+  currentColorScheme = colorScheme;
+  if (store) {
+    localStorage.setItem("color-scheme", colorScheme);
+  }
+}
+
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function () {
+  if (currentColorScheme === "system") {
+    setColorScheme("system", false);
+  }
+});

templates/modules/header.html

@@ -81,10 +81,64 @@
                 <span data-icon="tabler:menu-2" class="iconify text-lg"> </span>
               </a>
             </li>
-            <li>
+            <li
+              x-data="{
+                show: false,
+                timer: undefined,
+                open: function() {
+                  if(this.timer) {
+                    clearTimeout(this.timer);
+                  }
+                  this.show = true
+                },
+                close: function() {
+                  this.timer = setTimeout(() => this.show = false, 300);
+                }
+              }"
+              class="relative cursor-pointer transition-all"
+              @mouseenter="open()"
+              @mouseleave="close()"
+            >
               <a href="#" class="text-gray-600 hover:text-blue-600 dark:text-slate-100">
                 <span data-icon="gg:dark-mode" class="iconify text-lg"></span>
               </a>
+              <ul
+                @mouseenter="open()"
+                @mouseleave="close()"
+                x-show="show"
+                x-transition:enter="transition ease-out duration-100"
+                x-transition:enter-start="transform opacity-0 scale-95"
+                x-transition:enter-end="transform opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-75"
+                x-transition:leave-start="transform opacity-100 scale-100"
+                x-transition:leave-end="transform opacity-0 scale-95"
+                class="absolute right-0 z-10 mt-2 w-40 divide-y divide-gray-50 overflow-hidden rounded bg-white shadow dark:divide-slate-600 dark:bg-slate-700"
+              >
+                <li class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600">
+                  <a
+                    href="javascript:main.setColorScheme('dark',true)"
+                    class="h-full w-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
+                  >
+                    暗色
+                  </a>
+                </li>
+                <li class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600">
+                  <a
+                    href="javascript:main.setColorScheme('light',true)"
+                    class="h-full w-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
+                  >
+                    亮色
+                  </a>
+                </li>
+                <li class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600">
+                  <a
+                    href="javascript:main.setColorScheme('system',true)"
+                    class="h-full w-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
+                  >
+                    跟随系统
+                  </a>
+                </li>
+              </ul>
             </li>
             <li>
               <a href="javascript:main.openSearch()" class="text-gray-600 hover:text-blue-600 dark:text-slate-100">

templates/modules/layout.html

@@ -11,6 +11,9 @@
     <th:block th:if="${head != null}">
       <th:block th:replace="${head}" />
     </th:block>
+    <script>
+      main.initColorScheme("[[${theme.config.style.color_scheme}]]",[[${theme.config.style.enable_change_color_scheme}]])
+    </script>
   </head>
   <body class="bg-slate-50 dark:bg-slate-900" x-data="{ overlayMenu: false }">
     <th:block th:if="${header != null}">