Fun/SearcjGal-frontend

Fork 0

mirror of https://github.com/Moe-Sakura/frontend.git synced 2026-03-15 04:53:18 +08:00

Files

AdingApkgg 4d44d5b620 251127

2025-11-27 13:06:33 +08:00

2.9 KiB

Raw Blame History

主题系统说明

概述

本项目采用简化的主题系统，自动跟随操作系统主题设置。

自动跟随系统

工作原理

应用会自动检测并应用操作系统的主题偏好：

🌞 系统为浅色模式 → 应用显示浅色主题
🌙 系统为深色模式 → 应用显示深色主题
🔄 系统主题变化 → 应用自动切换

实现原理

使用 Tailwind CSS 的 dark: 变体来定义暗色模式样式：

/* 浅色模式样式 */
.bg-white { background: white; }

/* 深色模式样式 */
.dark .bg-white { background: rgb(15, 23, 42); }

当 <html> 元素添加 dark class 时，所有使用 dark: 前缀的样式会自动生效。

系统监听

使用 prefers-color-scheme 媒体查询监听系统主题变化：

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
mediaQuery.addEventListener('change', (e) => {
  applyTheme(e.matches ? 'dark' : 'light')
})

自定义样式

使用方法

用户可以在"设置"中添加自定义 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）
页面加载时自动应用到 <style id="custom-user-styles"> 标签中
支持完整的 CSS 语法和 Tailwind 暗色模式变体

技术实现

核心文件

src/utils/theme.ts - 主题管理工具
src/styles/base.css - 基础样式和暗色模式定义
src/components/SettingsModal.vue - 自定义CSS编辑器

API

// 获取系统主题
getSystemTheme(): 'light' | 'dark'

// 应用主题
applyTheme(theme: 'light' | 'dark'): void

// 监听系统主题变化
watchSystemTheme(callback): () => void

// 加载自定义CSS
loadCustomCSS(): string

// 应用自定义CSS
applyCustomCSS(css: string): void

// 保存自定义CSS
saveCustomCSS(css: string): void

背景图片

浅色模式：显示粉色纹理背景
深色模式：显示深色纹理背景，透明度允许背景图片显示
随机图片切换：每10秒自动切换一张随机动漫图片

如何更改系统主题

macOS

打开"系统设置"
点击"外观"
选择"浅色"、"深色"或"自动"

Windows 11

打开"设置"
点击"个性化" → "颜色"
选择"浅色"、"深色"或"自定义"

Linux (GNOME)

打开"设置"
点击"外观"
选择"浅色"或"深色"

最佳实践

使用 Tailwind 的 dark: 变体定义暗色样式
避免硬编码颜色，优先使用语义化的 Tailwind 类名
自定义CSS应该同时定义浅色和深色两种样式
测试两种模式下的显示效果，确保可读性

2.9 KiB Raw Blame History Unescape Escape