feat(theme): 添加新主题并优化主题切换功能

- 新增商务模式、蜜蜂模式等主题 - 实现系统主题自动检测和切换 - 更新主题图标和名称 - 调整部分主题颜色
xkloveme · Nov 26, 2024 · 7577aec · 7577aec
1 parent e6034aa
commit 7577aec
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Black Tool</title>
+  <title>小康黑科技</title>
 </head>
 
 <body>

diff --git a/src/components/ThemeChanger.vue b/src/components/ThemeChanger.vue
@@ -7,8 +7,18 @@
       <svg v-else-if="currentTheme === 'light'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
         <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
       </svg>
-      <svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-        <path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4zm0 2h12v12H4V4zm2 3a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+      <svg v-else-if="currentTheme === 'corporate'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"></path>
+      </svg>
+      <svg v-else-if="currentTheme === 'bumblebee'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 3.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM3.5 10a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zm5.5 0a1 1 0 100 2h2a1 1 0 100-2H9zm-.75-3.5a1 1 0 100 2h3.5a1 1 0 100-2h-3.5z"></path>
+      </svg>
+      <svg v-else-if="currentTheme === 'cupcake'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
+        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
+      </svg>
+      <svg v-else-if="currentTheme === 'emerald'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z" clip-rule="evenodd"></path>
       </svg>
     </div>
     <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-lg bg-base-200 rounded-box w-52">
@@ -34,8 +44,10 @@ import { ref, onMounted } from 'vue'
 const themes = [
   { id: 'light', name: '明亮模式', color: '#ffffff' },
   { id: 'dark', name: '暗黑模式', color: '#1a1b1e' },
-  { id: 'cupcake', name: '清新主题', color: '#faf7f5' },
-  { id: 'emerald', name: '翠绿主题', color: '#059669' }
+  { id: 'corporate', name: '商务模式', color: '#f8fafc' },
+  { id: 'bumblebee', name: '蜜蜂模式', color: '#fef9c3' },
+  { id: 'cupcake', name: '清新模式', color: '#faf7f5' },
+  { id: 'emerald', name: '翠绿模式', color: '#059669' }
 ]
 
 const currentTheme = ref('light')
@@ -46,9 +58,31 @@ const changeTheme = (theme) => {
   localStorage.setItem('theme', theme)
 }
 
+// 检测系统主题
+const detectSystemTheme = () => {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark'
+  }
+  return 'light'
+}
+
+// 监听系统主题变化
+const watchSystemTheme = () => {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    const newTheme = e.matches ? 'dark' : 'light'
+    // 只有当前是明亮或暗黑模式时才自动切换
+    if (currentTheme.value === 'light' || currentTheme.value === 'dark') {
+      changeTheme(newTheme)
+    }
+  })
+}
+
 onMounted(() => {
-  const savedTheme = localStorage.getItem('theme') || 'light'
-  changeTheme(savedTheme)
+  // 优先使用保存的主题，如果没有则使用系统主题
+  const savedTheme = localStorage.getItem('theme')
+  const initialTheme = savedTheme || detectSystemTheme()
+  changeTheme(initialTheme)
+  watchSystemTheme()
 })
 </script>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -31,6 +31,24 @@ export default {
           "base-300": "#0c0d0e",
         },
       },
+      {
+        corporate: {
+          ...require("daisyui/src/theming/themes")["corporate"],
+          "primary": "#4b6bfb",
+          "base-100": "#f8fafc",
+          "base-200": "#f1f5f9",
+          "base-300": "#e2e8f0",
+        },
+      },
+      {
+        bumblebee: {
+          ...require("daisyui/src/theming/themes")["bumblebee"],
+          "primary": "#e0a82e",
+          "base-100": "#fef9c3",
+          "base-200": "#fef08a",
+          "base-300": "#fde047",
+        },
+      },
       {
         cupcake: {
           ...require("daisyui/src/theming/themes")["cupcake"],