支持自动深色模式

Author: hanxi

README.md

@@ -143,7 +143,7 @@ ENABLE_NO_AUTH=true LISTEN_PORT=58080 ./tiny-nav
 
 - [x] 支持只读模式：查看免登录，编辑需登录
 - [x] 数据有变化才拉取，避免重复加载
-- [ ] 自动深色模式
+- [x] 自动深色模式
 - [ ] 支持书签导入
 - [ ] 支持站内搜索
 
@@ -288,11 +288,10 @@ Access: <http://localhost:58080>
 
 - [x] Support read-only mode: view without login, edit requires login
 - [x] Pull data only on changes to avoid redundant loading
-- [ ] Automatic dark mode
+- [x] Automatic dark mode
 - [ ] Support bookmark import
 - [ ] Support in-site search
 
-
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=hanxi/tiny-nav&type=Date)](https://star-history.com/#hanxi/tiny-nav&Date)

front/src/components/NavHeader.vue

@@ -28,29 +28,26 @@
                 <button v-if="showEdit" @click="$emit('add')"
                     class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                     title="添加网站">
-                    <div class="i-mdi-plus-circle text-gray-400 dark:text-gray-300">
-                    </div>
+                    <div class="i-mdi-plus-circle text-gray-400 dark:text-gray-300"></div>
                 </button>
+
+                <!-- ✅ 改好的主题切换按钮 -->
                 <button @click="themeStore.toggleTheme"
                     class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
-                    :title="themeStore.isDarkTheme ? '浅色模式' : '深色模式'">
-                    <div
-                        :class="themeStore.isDarkTheme ? 'i-mdi-white-balance-sunny text-blue-500 dark:text-blue-300' : 'i-mdi-moon-waxing-crescent text-gray-400 dark:text-gray-300'">
-                    </div>
+                    :title="themeTitle">
+                    <div :class="themeIcon"></div>
                 </button>
 
                 <button v-if="showLogout" @click="handleLogout"
                     class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                     title="退出登录">
-                    <div class="i-mdi-logout text-gray-400 dark:text-gray-300">
-                    </div>
+                    <div class="i-mdi-logout text-gray-400 dark:text-gray-300"></div>
                 </button>
 
                 <button v-if="showLogin" @click="$emit('login')"
                     class="flex items-center gap-2 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
                     title="登录">
-                    <div class="i-mdi-login text-gray-400 dark:text-gray-300">
-                    </div>
+                    <div class="i-mdi-login text-gray-400 dark:text-gray-300"></div>
                 </button>
             </div>
         </div>
@@ -67,27 +64,25 @@
                 </button>
                 <button v-if="showEdit" @click="$emit('add')"
                     class="flex items-center gap-3 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
-                    <div class="i-mdi-plus-circle text-gray-400 dark:text-gray-300">
-                    </div>
+                    <div class="i-mdi-plus-circle text-gray-400 dark:text-gray-300"></div>
                     添加网站
                 </button>
+
+                <!-- ✅ 移动端的主题按钮 -->
                 <button @click="themeStore.toggleTheme"
                     class="flex items-center gap-3 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
-                    <div
-                        :class="themeStore.isDarkTheme ? 'i-mdi-white-balance-sunny text-blue-500 dark:text-blue-300' : 'i-mdi-moon-waxing-crescent text-gray-400 dark:text-gray-300'">
-                    </div>
-                    {{ themeStore.isDarkTheme ? '浅色模式' : '深色模式' }}
+                    <div :class="themeIcon"></div>
+                    {{ themeTitle }}
                 </button>
+
                 <button v-if="showLogout" @click="handleLogout"
                     class="flex items-center gap-3 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
-                    <div class="i-mdi-logout text-gray-400 dark:text-gray-300">
-                    </div>
+                    <div class="i-mdi-logout text-gray-400 dark:text-gray-300"></div>
                     登出
                 </button>
                 <button v-if="showLogin" @click="$emit('login')"
                     class="flex items-center gap-3 px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700">
-                    <div class="i-mdi-logout text-gray-400 dark:text-gray-300">
-                    </div>
+                    <div class="i-mdi-login text-gray-400 dark:text-gray-300"></div>
                     登录
                 </button>
             </div>
@@ -96,7 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useThemeStore } from '@/stores/themeStore'
 import { useMainStore } from '@/stores'
 
@@ -126,41 +121,49 @@ const toggleMobileMenu = () => {
     isMobileMenuOpen.value = !isMobileMenuOpen.value
 }
 
-const showLogin = ref(false);
-const showLogout = ref(false);
-const showEdit = ref(false);
+const showLogin = ref(false)
+const showLogout = ref(false)
+const showEdit = ref(false)
 
 async function updateAuthenticationStates() {
-    // Check if no authentication is needed
     if (store.config.enableNoAuth) {
-        showLogin.value = false;
-        showLogout.value = false;
-        showEdit.value = true;
+        showLogin.value = false
+        showLogout.value = false
+        showEdit.value = true
     } else {
-        // Perform async token validation
         try {
-            const isValid = await store.validateToken();
-            showLogin.value = !isValid;
-            showLogout.value = isValid;
-            showEdit.value = isValid;
+            const isValid = await store.validateToken()
+            showLogin.value = !isValid
+            showLogout.value = isValid
+            showEdit.value = isValid
         } catch (error) {
-            console.error('Error validating token:', error);
-            showLogin.value = true;
-            showLogout.value = false;
-            showEdit.value = false;
+            console.error('Error validating token:', error)
+            showLogin.value = true
+            showLogout.value = false
+            showEdit.value = false
         }
     }
 }
 
-// Call the function on component mount
 onMounted(() => {
     updateAuthenticationStates()
 })
 
 const handleLogout = () => {
-    // Emit logout event
     emit('logout')
     updateAuthenticationStates()
 }
 
+/* ====== 新增：主题模式按钮显示逻辑 ====== */
+const themeIcon = computed(() => {
+    if (themeStore.mode === 'system') return 'i-mdi-monitor text-blue-400'
+    return themeStore.isDarkTheme
+        ? 'i-mdi-moon-waxing-crescent text-gray-300'
+        : 'i-mdi-white-balance-sunny text-yellow-500'
+})
+
+const themeTitle = computed(() => {
+    if (themeStore.mode === 'system') return '跟随系统'
+    return themeStore.isDarkTheme ? '深色模式' : '浅色模式'
+})
 </script>

front/src/stores/themeStore.ts

@@ -1,29 +1,54 @@
 import { defineStore } from 'pinia'
-import { ref, onMounted } from 'vue'
+import { ref, watch } from 'vue'
+
+type ThemeMode = 'system' | 'light' | 'dark'
 
 export const useThemeStore = defineStore('theme', () => {
+  // 当前主题模式
+  const mode = ref<ThemeMode>('system')
+  // 实际是否为深色（根据系统 + 模式计算出来）
   const isDarkTheme = ref(false)
 
-  const toggleTheme = () => {
-    isDarkTheme.value = !isDarkTheme.value
-    document.documentElement.classList.toggle('dark', isDarkTheme.value)
-  }
-
+  // 应用主题
   const applyTheme = () => {
+    if (mode.value === 'system') {
+      isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches
+    } else {
+      isDarkTheme.value = mode.value === 'dark'
+    }
     document.documentElement.classList.toggle('dark', isDarkTheme.value)
   }
 
-  // Check the saved theme when the store is created
-  onMounted(() => {
+  // 切换主题模式（system → light → dark → system）
+  const toggleTheme = () => {
+    if (mode.value === 'system') {
+      mode.value = 'light'
+    } else if (mode.value === 'light') {
+      mode.value = 'dark'
+    } else {
+      mode.value = 'system'
+    }
     applyTheme()
+  }
+
+  // 监听系统主题变化
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+  mediaQuery.addEventListener('change', () => {
+    if (mode.value === 'system') {
+      applyTheme()
+    }
   })
 
+  // 每次 mode 改变都应用
+  watch(mode, () => applyTheme(), { immediate: true })
+
   return {
+    mode,
     isDarkTheme,
     toggleTheme,
-    applyTheme
+    applyTheme,
   }
 }, {
-  persist: true
+  persist: true, // 依旧支持持久化
 })
 

front/src/views/Login.vue

@@ -9,11 +9,12 @@
                         class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600">
                         <div class="i-mdi-arrow-left"></div>
                     </button>
+
+                    <!-- ✅ 改好的主题切换按钮 -->
                     <button @click="themeStore.toggleTheme"
-                        class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600">
-                        <div
-                            :class="themeStore.isDarkTheme ? 'i-mdi-white-balance-sunny' : 'i-mdi-moon-waxing-crescent'">
-                        </div>
+                        class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600"
+                        :title="themeTitle">
+                        <div :class="themeIcon"></div>
                     </button>
                 </div>
             </div>
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useMainStore } from '@/stores'
 import { useThemeStore } from '@/stores/themeStore'
@@ -51,7 +52,7 @@ const loading = ref(false)
 
 const form = reactive({
     username: '',
-    password: ''
+    password: '',
 })
 
 const goBack = () => {
@@ -60,7 +61,6 @@ const goBack = () => {
 
 const handleLogin = async () => {
     if (loading.value) return
-
     loading.value = true
     try {
         const token = await api.login(form)
@@ -74,4 +74,16 @@ const handleLogin = async () => {
     }
 }
 
+/* ====== 新增：主题模式按钮显示逻辑 ====== */
+const themeIcon = computed(() => {
+    if (themeStore.mode === 'system') return 'i-mdi-monitor text-blue-400'
+    return themeStore.isDarkTheme
+        ? 'i-mdi-moon-waxing-crescent text-gray-300'
+        : 'i-mdi-white-balance-sunny text-yellow-500'
+})
+
+const themeTitle = computed(() => {
+    if (themeStore.mode === 'system') return '跟随系统'
+    return themeStore.isDarkTheme ? '深色模式' : '浅色模式'
+})
 </script>