Skip to content

优化深色主题视觉#711

Open
NarwhalChen wants to merge 2 commits into
Open-Less:betafrom
NarwhalChen:ui/improve-dark-theme
Open

优化深色主题视觉#711
NarwhalChen wants to merge 2 commits into
Open-Less:betafrom
NarwhalChen:ui/improve-dark-theme

Conversation

@NarwhalChen

@NarwhalChen NarwhalChen commented Jun 18, 2026

Copy link
Copy Markdown

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

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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

@NarwhalChen NarwhalChen changed the title Improve dark theme polish 优化深色主题视觉 Jun 18, 2026
@github-actions github-actions Bot changed the title 优化深色主题视觉 Improve dark theme polish Jun 18, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Persistent review updated to latest commit 28f69ed

@NarwhalChen NarwhalChen marked this pull request as ready for review June 18, 2026 21:16
@github-actions

Copy link
Copy Markdown
Contributor

Persistent review updated to latest commit 28f69ed

@NarwhalChen NarwhalChen changed the title Improve dark theme polish 优化深色主题视觉 Jun 18, 2026
@NarwhalChen NarwhalChen marked this pull request as draft June 18, 2026 21:17
@NarwhalChen NarwhalChen marked this pull request as ready for review June 18, 2026 21:18
@github-actions

Copy link
Copy Markdown
Contributor

Persistent review updated to latest commit 28f69ed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant