From fcd823ade3b60ef497b712935c30e2a7f38a415b Mon Sep 17 00:00:00 2001 From: AdingApkgg Date: Thu, 27 Nov 2025 04:24:41 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E6=94=AF=E6=8C=81=E4=B8=8E=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=A0=B7=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`） +- 页面加载时自动应用到 ` - diff --git a/src/components/TopToolbar.vue b/src/components/TopToolbar.vue index 47309a8..2dfb463 100644 --- a/src/components/TopToolbar.vue +++ b/src/components/TopToolbar.vue @@ -192,11 +192,24 @@ async function saveBackgroundImage() { width: 40px; height: 40px; border-radius: 50%; - background: white; - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - border: 2px solid transparent; + + /* 液态玻璃效果 - 艳粉主题 */ + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.85) 0%, + rgba(255, 228, 242, 0.7) 100% + ); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + + /* 艳粉边框和阴影 */ + border: 1.5px solid rgba(255, 20, 147, 0.2); + box-shadow: + 0 8px 16px rgba(255, 20, 147, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.8) inset, + 0 1px 0 0 rgba(255, 255, 255, 1) inset; + + color: rgb(199, 21, 133); cursor: pointer; display: flex; align-items: center; @@ -221,19 +234,50 @@ async function saveBackgroundImage() { /* 暗色主题 */ .dark .toolbar-button { - background: rgba(31, 41, 55, 0.9); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + background: linear-gradient( + 135deg, + rgba(51, 65, 85, 0.85) 0%, + rgba(30, 41, 59, 0.75) 100% + ); + backdrop-filter: blur(20px) saturate(150%); + -webkit-backdrop-filter: blur(20px) saturate(150%); + + border: 1.5px solid rgba(255, 105, 180, 0.3); + box-shadow: + 0 8px 16px rgba(255, 105, 180, 0.2), + 0 0 0 1px rgba(255, 105, 180, 0.1) inset, + 0 1px 0 0 rgba(255, 255, 255, 0.1) inset; + + color: rgb(255, 179, 217); } .toolbar-button:hover { - transform: scale(1.05); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); - border-color: rgba(236, 72, 153, 0.5); + transform: scale(1.05) translateY(-2px); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 228, 242, 0.85) 100% + ); + box-shadow: + 0 12px 24px rgba(255, 20, 147, 0.25), + 0 0 0 1px rgba(255, 255, 255, 0.9) inset, + 0 1px 0 0 rgba(255, 255, 255, 1) inset, + 0 0 30px rgba(255, 105, 180, 0.2); + border-color: rgba(255, 20, 147, 0.35); } .dark .toolbar-button:hover { - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); - border-color: rgba(168, 85, 247, 0.5); + background: linear-gradient( + 135deg, + rgba(51, 65, 85, 0.95) 0%, + rgba(30, 41, 59, 0.85) 100% + ); + box-shadow: + 0 12px 24px rgba(255, 105, 180, 0.3), + 0 0 0 1px rgba(255, 105, 180, 0.2) inset, + 0 1px 0 0 rgba(255, 255, 255, 0.15) inset, + 0 0 35px rgba(255, 20, 147, 0.25); + border-color: rgba(255, 105, 180, 0.45); } .toolbar-button:active { @@ -242,41 +286,31 @@ async function saveBackgroundImage() { /* GitHub 按钮特殊样式 */ .github-button { - color: rgb(31, 41, 55); text-decoration: none; } -.dark .github-button { - color: rgb(226, 232, 240); -} - -.github-button:hover { - border-color: rgba(31, 41, 55, 0.5); -} - -.dark .github-button:hover { - border-color: rgba(226, 232, 240, 0.5); -} - -/* 主题按钮特殊样式 */ -.theme-button:hover { - border-color: rgba(245, 158, 11, 0.5); -} - -/* 保存成功状态 */ +/* 保存成功状态 - 艳粉渐变 */ .save-success { - background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105)) !important; + background: linear-gradient(135deg, rgb(236, 72, 153), rgb(219, 39, 119)) !important; color: white !important; + border-color: rgba(236, 72, 153, 0.5) !important; + box-shadow: + 0 8px 20px rgba(236, 72, 153, 0.4), + 0 0 30px rgba(236, 72, 153, 0.3) !important; } .save-success i { color: white !important; } -/* 分享已复制状态 */ +/* 分享已复制状态 - 艳粉渐变 */ .share-copied { - background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105)) !important; + background: linear-gradient(135deg, rgb(236, 72, 153), rgb(219, 39, 119)) !important; color: white !important; + border-color: rgba(236, 72, 153, 0.5) !important; + box-shadow: + 0 8px 20px rgba(236, 72, 153, 0.4), + 0 0 30px rgba(236, 72, 153, 0.3) !important; } .share-copied i { diff --git a/src/components/VndbPanel.vue b/src/components/VndbPanel.vue index 3d13ecf..9cba621 100644 --- a/src/components/VndbPanel.vue +++ b/src/components/VndbPanel.vue @@ -10,10 +10,10 @@ >
-
+

作品介绍