# 主题系统说明 ## 概述本项目采用简化的主题系统，**自动跟随操作系统主题设置**。 ## 自动跟随系统 ### 工作原理应用会自动检测并应用操作系统的主题偏好： - 🌞 系统为浅色模式 → 应用显示浅色主题 - 🌙 系统为深色模式 → 应用显示深色主题 - 🔄 系统主题变化 → 应用自动切换 ### 实现原理使用 Tailwind CSS 的 `dark:` 变体来定义暗色模式样式： ```css /* 浅色模式样式 */ .bg-white { background: white; } /* 深色模式样式 */ .dark .bg-white { background: rgb(15, 23, 42); } ``` 当 `` 元素添加 `dark` class 时，所有使用 `dark:` 前缀的样式会自动生效。 ### 系统监听使用 `prefers-color-scheme` 媒体查询监听系统主题变化： ```javascript const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') mediaQuery.addEventListener('change', (e) => { applyTheme(e.matches ? 'dark' : 'light') }) ``` ## 自定义样式 ### 使用方法用户可以在"设置"中添加自定义 CSS 代码来个性化界面： ```css /* 自定义按钮样式 */ .my-custom-button { background: linear-gradient(to right, #ec4899, #8b5cf6); color: white; padding: 12px 24px; border-radius: 12px; } /* 深色模式下的样式 */ .dark .my-custom-button { background: linear-gradient(to right, #a855f7, #8b5cf6); } ``` ### 存储和应用 - 自定义 CSS 保存在 `localStorage` 中（key: `searchgal_custom_css`） - 页面加载时自动应用到 `