feat: 增加暗色模式#394
Open
MgAlNa3PO4 wants to merge 1 commit into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
改动概述
为前端添加完整的暗色模式支持，默认启用暗色主题，并提供明/暗切换按钮。
为什么
当前前端只有亮色模式，长时间使用对眼睛不友好，暗色模式是现代应用的基本需求。项目已安装
next-themes且index.css中已定义.darkCSS 变量，但从未接入使用，大量组件使用硬编码颜色导致暗色模式无法生效。做了什么
基础设施
ThemeProvider.tsx：封装next-themes，defaultTheme="dark"+attribute="class"ThemeToggle.tsx：太阳/月亮图标切换按钮，集成到 HomeLayout 和 SettingLayout headerindex.html：<html>预设class="dark"防止首屏白闪RootLayout.tsx：接入 ThemeProvider，bg-neutral-100→bg-backgroundCSS 修复
.dark中--border: #e6f7ff（亮蓝色）→oklch(1 0 0 / 12%)--primary-foreground暗色模式下文字不可读 → 改为oklch(0.985 0 0).dark ::-webkit-scrollbar-*）#f7f7f7→var(--muted)颜色语义化（35+ 文件）
将所有硬编码颜色统一替换为 shadcn/ui 语义变量：
bg-whitebg-cardbg-neutral-100/bg-gray-100bg-mutedtext-gray-700/800/text-neutral-900text-foregroundtext-gray-400~600/text-neutral-400~500text-muted-foregroundborder-neutral-200/border-gray-300border-borderhover:bg-neutral-100/hover:bg-gray-200hover:bg-accentbg-[#F0F0F0]bg-mutedbg-[#FEF0F0]/text-[#303133]bg-destructive/10/text-foreground有意保留的颜色：
text-white（对比色）、bg-blue-*（品牌色）、text-green/red-*（状态色）、bg-gray-900（终端面板背景）测试方式
npm run build通过（19456 modules，24.66s，零错误）npm run dev启动开发服务器回归风险
dark:变量，替换后与原有行为一致var(--background)，导出的 SVG 文件背景将跟随当前主题；PNG 导出保持白色背景不变Checklist
feature/*）develop）type(scope): subject格式：feat(frontend): 添加暗色模式支持，默认启用暗色主题README.md/CHANGELOG.md/CLAUDE.md/ 模块 README，如适用）.env/ 大型二进制