优化深色主题视觉

[NarwhalChen]

User description

改动说明

这次主要调整 OpenLess 的深色主题观感，并顺手修掉概览页指标区一个多余的外层边框。

• 重做深色主题 token，让应用背景、面板、卡片、设置页、控件、胶囊和风格包页面的层级更清楚。
• 把部分写死的选中态、悬停态、开关颜色改成主题变量，避免深色模式里出现浅色主题残留。
• 移除「今日概览」四个指标卡外层多余的边框，只保留每张卡片自己的描边。

截图

浅色主题

深色主题

验证

• npm run build
• npm run check:macos-capsule-spaces
• npm run check:windows-startup-lifecycle
• git diff --check
• 手动检查桌面概览页、设置弹窗和移动宽度下的深色模式截图

说明：npm run build 仍会输出已有的 IPC circular chunk warning，涉及 getSettings / setSettings 的分块循环；这个 warning 不是本次视觉调整引入的。

---

PR Type

Enhancement

---

Description

• Rework dark theme tokens for clearer layering

• Replace hardcoded colors with theme variables

• Remove redundant border in overview metrics

• Update sidebar, settings, and capsule variables

---

File Walkthrough

	Relevant files
Enhancement	tokens.css Rework dark theme token variables                                                openless-all/app/src/styles/tokens.css Update all dark theme CSS variables for colors, backgrounds, shadows, and borders Adjust accent, panel, card, sidebar, settings, control, pill, segmented, toggle, capsule tokens Improve consistency and visual hierarchy +127/-130 FloatingShell.tsx Use theme variables in FloatingShell                                          openless-all/app/src/components/FloatingShell.tsx Replace hardcoded background and box-shadow with CSS variables for sidebar pill and segmented active shadow Use var(--ol-blue-soft) and add border for beta tag Use var(--ol-sidebar-settings-active-bg) and var(--ol-segmented-active-shadow) for settings button +6/-5      SettingsModal.tsx Use theme variables in SettingsModal                                          openless-all/app/src/components/SettingsModal.tsx Replace hardcoded background with var(--ol-settings-content-bg) Use var(--ol-segmented-active-shadow) for segmented pill Use var(--ol-settings-close-hover-bg) for close button hover +3/-3      shared.tsx Use theme variables for toggle colors                                        openless-all/app/src/pages/settings/shared.tsx Replace hardcoded toggle off background with var(--ol-toggle-off-bg) Replace hardcoded toggle knob background with var(--ol-toggle-knob) +2/-2
Bug fix	Overview.tsx Remove extra border from overview metrics                                openless-all/app/src/pages/Overview.tsx Remove outer wrapper class .ol-overview-hero from metric grid, eliminating redundant border +1/-1
Miscellaneous	global.css Remove deprecated overview hero class                                        openless-all/app/src/styles/global.css Remove .ol-overview-hero class definition since it's no longer used +0/-5

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 28f69ed)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No major issues detected

[github-actions]

Persistent review updated to latest commit 28f69ed

[github-actions]

Persistent review updated to latest commit 28f69ed

[github-actions]

Persistent review updated to latest commit 28f69ed

[HKLHaoBin]

这个厉害，交给你了。

[H-Chris233]

@appergb 你看看吧，这UI

[Felix201209]

深色主题这版改得很干净，通过 ✅

• 把写死的颜色 / 阴影（rgba(...)、#fff、0 1px 2px rgba(0,0,0,.05) 等）替换成 --ol-* 主题变量，符合 tokens.css 既有的 token 约定，避免深色模式里残留浅色值。
• 暗色调色板整体更统一：中性色带蓝调、高度阴影 / 描边层级更清楚。
• 移除 .ol-overview-hero 冗余外框，且与 Overview.tsx 里去掉 className 的改动配对一致，没有遗留死类名。

范围聚焦：139/146 行、纯前端 8 个文件，低风险；也附了浅色 / 深色前后截图。基于 diff 审查 + 截图核对，approve。

一点提醒：重型构建 CI（Linux / Windows / macOS checks）此前没被触发，只跑了 pr_agent_job；正式合并前最好让完整 CI 先跑过一次。感谢贡献 🙏