feat: add global theme

eslint.config.js

@@ -24,6 +24,19 @@ export default typescriptEslint.config(
       "vue/singleline-html-element-content-newline": "off",
       "vue/max-attributes-per-line": "off",
       "vue/multi-word-component-names": "off",
+      "vue/html-self-closing": [
+        "warn",
+        {
+          html: {
+            void: "always",
+            normal: "always",
+            component: "always",
+          },
+          svg: "always",
+          math: "always",
+        },
+      ],
+      "@typescript-eslint/no-unused-vars": "warn",
     },
   },
 );

src/components/button/ChangeThemeDropdownButton.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useGlobalThemeHook } from "@/hooks/globalThemeHook";
+
+const { changeGlobalTheme, curGlobalTheme, optionalThemes } =
+  useGlobalThemeHook();
+</script>
+
+<template>
+  <div>
+    <div class="dropdown mb-72">
+      <div tabindex="0" role="button" class="btn m-1">
+        主题
+        <svg
+          width="12px"
+          height="12px"
+          class="inline-block h-2 w-2 fill-current opacity-60"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 2048 2048"
+        >
+          <path
+            d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"
+          />
+        </svg>
+      </div>
+      <ul
+        tabindex="-1"
+        class="dropdown-content bg-base-300 rounded-box z-1 w-52 p-2 shadow-2xl max-h-84 overflow-auto"
+      >
+        <li v-for="optionalTheme in optionalThemes" :key="optionalTheme">
+          <input
+            type="radio"
+            name="theme-dropdown"
+            :class="[
+              'theme-controller',
+              'btn',
+              'btn-sm',
+              'btn-block',
+              optionalTheme === curGlobalTheme ? 'btn-primary' : 'btn-ghost',
+              'justify-start',
+            ]"
+            :aria-label="optionalTheme"
+            :value="optionalTheme"
+            :checked="optionalTheme === curGlobalTheme"
+            @change="changeGlobalTheme(optionalTheme)"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/hooks/globalThemeHook.ts

@@ -0,0 +1,51 @@
+enum GlobalTheme {
+  Light = "light",
+  Dark = "dark",
+  Cupcake = "cupcake",
+  Bumblebee = "bumblebee",
+  Emerald = "emerald",
+  Corporate = "corporate",
+  Synthwave = "synthwave",
+  Retro = "retro",
+  Cyberpunk = "cyberpunk",
+  Valentine = "valentine",
+  Halloween = "halloween",
+  Garden = "garden",
+  Forest = "forest",
+  Aqua = "aqua",
+  Lofi = "lofi",
+  Pastel = "pastel",
+  Fantasy = "fantasy",
+  Wireframe = "wireframe",
+  Black = "black",
+  Luxury = "luxury",
+  Dracula = "dracula",
+  Cmyk = "cmyk",
+  Autumn = "autumn",
+  Business = "business",
+  Acid = "acid",
+  Lemonade = "lemonade",
+  Night = "night",
+  Coffee = "coffee",
+  Winter = "winter",
+  Dim = "dim",
+  Nord = "nord",
+  Sunset = "sunset",
+  Caramellatte = "caramellatte",
+  Abyss = "abyss",
+  Silk = "silk",
+}
+
+const optionalThemes = Object.values(GlobalTheme);
+
+const curGlobalTheme = ref(GlobalTheme.Light);
+
+function changeGlobalTheme(theme: GlobalTheme) {
+  curGlobalTheme.value = theme;
+}
+
+export const useGlobalThemeHook = () => ({
+  optionalThemes,
+  curGlobalTheme,
+  changeGlobalTheme,
+});

src/pages/index.vue

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
-// Home page component
+import ChangeThemeDropdownButton from "@/components/button/ChangeThemeDropdownButton.vue";
+import { useGlobalThemeHook } from "@/hooks/globalThemeHook";
+
+const { curGlobalTheme } = useGlobalThemeHook();
 </script>
 
 <template>
-  <div class="hero min-h-screen bg-base-200">
+  <div class="hero min-h-screen" :data-theme="curGlobalTheme">
     <div class="hero-content text-center">
       <div class="max-w-md">
         <h1 class="text-5xl font-bold">Hucky</h1>
         <p class="py-6">自动路由系统已加载</p>
+        <ChangeThemeDropdownButton />
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-/* Component styles */
-</style>
+<style scoped></style>

src/style.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui" {
+  themes: all;
+};
 
 /* Custom Scrollbar Styles */
 ::-webkit-scrollbar {