From fcd823ade3b60ef497b712935c30e2a7f38a415b Mon Sep 17 00:00:00 2001 From: AdingApkgg Date: Thu, 27 Nov 2025 04:24:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=B8=8E=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 移除旧的主题颜色变量，改为支持自定义 CSS 样式，提升用户界面的灵活性。 * 在 `App.vue` 中实现自定义 CSS 的加载与应用，确保用户设置的实时更新。 * 更新 `SettingsModal.vue`，允许用户输入自定义 CSS，增强个性化体验。 * 优化多个组件的样式，确保在不同主题下的视觉一致性。 * 删除不再使用的主题相关文件，简化代码结构。 --- THEME_SYSTEM.md | 127 ++++++++++++++++ index.html | 41 ++---- src/App.vue | 38 ++++- src/components/CommentsModal.vue | 1 + src/components/SearchHeader.vue | 2 +- src/components/SettingsModal.vue | 148 +++++++------------ src/components/TopToolbar.vue | 125 +--------------- src/main.ts | 3 - src/styles/base.css | 6 +- src/styles/theme.css | 241 ------------------------------- src/types/theme.ts | 89 ------------ src/utils/theme.ts | 83 ++++++----- src/utils/themeColors.ts | 72 --------- 13 files changed, 279 insertions(+), 697 deletions(-) create mode 100644 THEME_SYSTEM.md delete mode 100644 src/styles/theme.css delete mode 100644 src/types/theme.ts delete mode 100644 src/utils/themeColors.ts 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`） +- 页面加载时自动应用到 `