diff --git a/THEME_SYSTEM.md b/THEME_SYSTEM.md new file mode 100644 index 0000000..ca2514b --- /dev/null +++ b/THEME_SYSTEM.md @@ -0,0 +1,127 @@ +# 主题系统说明 + +## 概述 + +本项目采用简化的主题系统，**自动跟随操作系统主题设置**。 + +## 自动跟随系统 + +### 工作原理 + +应用会自动检测并应用操作系统的主题偏好： +- 🌞 系统为浅色模式 → 应用显示浅色主题 +- 🌙 系统为深色模式 → 应用显示深色主题 +- 🔄 系统主题变化 → 应用自动切换 + +### 实现原理 + +使用 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`） +- 页面加载时自动应用到 `