fix: dark mode

app.vue

@@ -7,43 +7,39 @@
 </template>
 
 <script setup lang="ts">
-import { zh_cn } from '@nuxt/ui/locale'
+  import { zh_cn } from '@nuxt/ui/locale'
 
-// const colorMode = useColorMode()
+  // TODO
-
+  useHead({
-// TODO
+    title: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具',
-useHead({
+    meta: [
-  title: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具',
+      {
-  meta: [
+        name: 'description',
-    { name: 'description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。' },
+        content:
-    { name: 'keywords', content: 'SiliconCloud, 数据分析, token 用量, API 分析, 控制台工具' },
+          'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。',
-    // Open Graph tags
+      },
-    { property: 'og:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
+      { name: 'keywords', content: 'SiliconCloud, 数据分析, token 用量, API 分析, 控制台工具' },
-    { property: 'og:description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。' },
+      // Open Graph tags
-    { property: 'og:type', content: 'website' },
+      { property: 'og:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
-    { property: 'og:image', content: '/images/readme-showcase-total.webp' },
+      {
-    // Twitter Card tags
+        property: 'og:description',
-    { name: 'twitter:card', content: 'summary_large_image' },
+        content:
-    { name: 'twitter:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
+          'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。通过输入 Cookie，可以拉取 SiliconCloud 控制台 API 来实现各种分析功能，如 token 用量分析等。',
-    { name: 'twitter:description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。' },
+      },
-    { name: 'twitter:image', content: '/images/readme-showcase-total.webp' },
+      { property: 'og:type', content: 'website' },
-  ],
+      { property: 'og:image', content: '/images/readme-showcase-total.webp' },
-  // script: [
+      // Twitter Card tags
-  //   {
+      { name: 'twitter:card', content: 'summary_large_image' },
-  //     defer: true,
+      { name: 'twitter:title', content: 'SiliconCloud Stats - SiliconCloud 平台使用情况分析工具' },
-  //     src: 'https://umami.ataw.top/script.js',
+      { name: 'twitter:description', content: 'SiliconCloud Stats 是一个用于分析 SiliconCloud 平台使用情况的工具。' },
-  //     'data-website-id': '6be07672-962f-42fe-85fc-92e96a5f30d6',
+      { name: 'twitter:image', content: '/images/readme-showcase-total.webp' },
-  //   },
+    ],
-  // ],
+    // script: [
-})
+    //   {
-
+    //     defer: true,
-// onMounted(() => {
+    //     src: 'https://umami.ataw.top/script.js',
-//   watchEffect(() => {
+    //     'data-website-id': '6be07672-962f-42fe-85fc-92e96a5f30d6',
-//     if (colorMode.value === 'dark') {
+    //   },
-//       document.documentElement.setAttribute('theme-mode', 'dark')
+    // ],
-//     } else {
+  })
-//       document.documentElement.removeAttribute('theme-mode')
-//     }
-//   })
-// })
 </script>

assets/css/main.css

@@ -1,9 +1,9 @@
 /* Don't do `@import "tailwindcss"`, do this instead: */
 @layer theme, base, components, utilities;
 
-@import "tailwindcss/theme" layer(theme) theme(static);
+@import 'tailwindcss/theme' layer(theme) theme(static);
-@import "tailwindcss/preflight" layer(base);
+@import 'tailwindcss/preflight' layer(base);
-@import "tailwindcss/utilities" layer(utilities);
+@import 'tailwindcss/utilities' layer(utilities);
 
 /* Then import "@nuxt/ui": */
-@import "@nuxt/ui";
+@import '@nuxt/ui';

components/ColorModeButton.vue

@@ -6,6 +6,7 @@
   const preference = computed(() => {
     // 默认为自动，会跟随用户的浏览器切换
     if (colorMode.preference === 'system') {
+      if (preferredColor.value === 'no-preference') return 'dark'
       return preferredColor.value
     }
     return colorMode.preference
@@ -18,14 +19,6 @@
 
 <template>
   <div>
-    <UButton
+    <UButton :icon="preference === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'" color="primary" @click="toggleColorMode" />
-      :icon="
-        preference === 'dark'
-          ? 'i-heroicons-sun-20-solid'
-          : 'i-heroicons-moon-20-solid'
-      "
-      color="primary"
-      @click="toggleColorMode"
-    />
   </div>
 </template>

nuxt.config.ts

@@ -1,9 +1,19 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
+    '@pinia/nuxt',
     '@nuxt/ui',
+    '@nuxtjs/color-mode',
     '@vueuse/nuxt',
   ],
+
+  colorMode: {
+    preference: 'system',
+    dataValue: 'theme',
+    classSuffix: '',
+    storage: 'cookie',
+  },
+
   css: ['~/assets/css/main.css'],
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },

package.json

@@ -16,6 +16,8 @@
     "@iconify-json/lucide": "^1.2.26",
     "@mendable/firecrawl-js": "^1.16.0",
     "@nuxt/ui": "3.0.0-alpha.12",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@pinia/nuxt": "^0.9.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tavily/core": "^0.0.3",
     "@types/lodash-es": "^4.17.12",

pnpm-lock.yaml

@@ -26,9 +26,15 @@ importers:
       '@nuxt/ui':
         specifier: 3.0.0-alpha.12
         version: 3.0.0-alpha.12(@babel/parser@7.26.8)(axios@1.7.9)(change-case@5.4.4)(db0@0.2.3)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.13(vue@3.5.13(typescript@5.7.3)))(rollup@4.34.6)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.38.1)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxtjs/color-mode':
+        specifier: ^3.5.2
+        version: 3.5.2(magicast@0.3.5)
+      '@pinia/nuxt':
+        specifier: ^0.9.0
+        version: 0.9.0(magicast@0.3.5)(pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))
       '@tailwindcss/typography':
         specifier: ^0.5.16
-        version: 0.5.16(tailwindcss@4.0.5)
+        version: 0.5.16(tailwindcss@4.0.6)
       '@tavily/core':
         specifier: ^0.0.3
         version: 0.0.3
@@ -58,7 +64,7 @@ importers:
         version: 6.2.0
       tailwindcss:
         specifier: ^4.0.5
-        version: 4.0.5
+        version: 4.0.6
       vue:
         specifier: latest
         version: 3.5.13(typescript@5.7.3)
@@ -701,6 +707,11 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
+  '@pinia/nuxt@0.9.0':
+    resolution: {integrity: sha512-2yeRo7LeyCF68AbNeL3xu2h6uw0617RkcsYxmA8DJM0R0PMdz5wQHnc44KeENQxR/Mrq8T910XVT6buosqsjBQ==}
+    peerDependencies:
+      pinia: ^2.3.0
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -892,8 +903,8 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@tailwindcss/node@4.0.5':
+  '@tailwindcss/node@4.0.4':
-    resolution: {integrity: sha512-ffTz4DX1cgr4XPuqjhm32YV6Lyx58R1CxAAnSFTamg6wXwfk3oWdb6exgAbGesPzvUgicTO0gwUdQGSsg4nNog==}
+    resolution: {integrity: sha512-VLFq80IyoV1hsHPcCm1mmlyPyUT6NlovQLoO2y7PGm84mW94ZrNJ7ax5H6K4M7Aj/fdMfem5IX7Ka+LXWZpDGg==}
 
   '@tailwindcss/oxide-android-arm64@4.0.5':
     resolution: {integrity: sha512-kK/ik8aIAKWDIEYDZGUCJcnU1qU5sPoMBlVzPvtsUqiV6cSHcnVRUdkcLwKqTeUowzZtjjRiamELLd9Gb0x5BQ==}
@@ -2865,6 +2876,15 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  pinia@2.3.1:
+    resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -3428,8 +3448,11 @@ packages:
   tailwindcss@4.0.0:
     resolution: {integrity: sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==}
 
-  tailwindcss@4.0.5:
+  tailwindcss@4.0.4:
-    resolution: {integrity: sha512-DZZIKX3tA23LGTjHdnwlJOTxfICD1cPeykLLsYF1RQBI9QsCR3i0szohJfJDVjr6aNRAIio5WVO7FGB77fRHwg==}
+    resolution: {integrity: sha512-/ezDLEkOLf1lXkr9F2iI5BHJbexJpty5zkV2B8bGHCqAdbc9vk85Jgdkq+ZOvNkNPa3yAaqJ8DjRt584Bc84kw==}
+
+  tailwindcss@4.0.6:
+    resolution: {integrity: sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw==}
 
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -4927,6 +4950,14 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.5.1
       '@parcel/watcher-win32-x64': 2.5.1
 
+  '@pinia/nuxt@0.9.0(magicast@0.3.5)(pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)))':
+    dependencies:
+      '@nuxt/kit': 3.15.4(magicast@0.3.5)
+      pinia: 2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -5081,11 +5112,11 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/node@4.0.5':
+  '@tailwindcss/node@4.0.4':
     dependencies:
       enhanced-resolve: 5.18.1
       jiti: 2.4.2
-      tailwindcss: 4.0.5
+      tailwindcss: 4.0.4
 
   '@tailwindcss/oxide-android-arm64@4.0.5':
     optional: true
@@ -5137,23 +5168,23 @@ snapshots:
   '@tailwindcss/postcss@4.0.0':
     dependencies:
       '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.0.5
+      '@tailwindcss/node': 4.0.4
       '@tailwindcss/oxide': 4.0.5
       lightningcss: 1.29.1
       postcss: 8.5.1
       tailwindcss: 4.0.0
 
-  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.5)':
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.6)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 4.0.5
+      tailwindcss: 4.0.6
 
   '@tailwindcss/vite@4.0.0(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.38.1)(yaml@2.7.0))':
     dependencies:
-      '@tailwindcss/node': 4.0.5
+      '@tailwindcss/node': 4.0.4
       '@tailwindcss/oxide': 4.0.5
       lightningcss: 1.29.1
       tailwindcss: 4.0.0
@@ -7253,6 +7284,16 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.7.3)
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.7.3))
+    optionalDependencies:
+      typescript: 5.7.3
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -7850,7 +7891,9 @@ snapshots:
 
   tailwindcss@4.0.0: {}
 
-  tailwindcss@4.0.5: {}
+  tailwindcss@4.0.4: {}
+
+  tailwindcss@4.0.6: {}
 
   tapable@2.2.1: {}