Skip to content

feat(ui): 深色模式与主题 token 及选中态修复#661

Merged
H-Chris233 merged 2 commits into
Open-Less:betafrom
HKLHaoBin:feat/dark-mode-to-beta
Jun 14, 2026
Merged

feat(ui): 深色模式与主题 token 及选中态修复#661
H-Chris233 merged 2 commits into
Open-Less:betafrom
HKLHaoBin:feat/dark-mode-to-beta

Conversation

@HKLHaoBin

@HKLHaoBin HKLHaoBin commented Jun 14, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Contributor

User description

摘要

  • 基于最新 upstream/beta（含 feat(android): 对齐移动端构建与发布流水线 #658 Android pipeline、feat(ui): 移动端竖屏 UI 适配 #659 mobile-portrait）单提交合入深色模式。
  • 通过 CSS token 与 data-ol-theme 实现全平台深色模式；设置 → 通用 → 外观 支持跟随系统 / 浅色 / 深色，并以 localStorage 启动缓存 + Rust UserPreferences.theme_mode 双写持久化。
  • 主界面 shell、设置页、风格页、桌面胶囊等迁移至主题 token；修复选中 chip、SelectLite 下拉、设置按钮在深色下的浅色背景回归。

测试计划

  • 设置 → 通用 → 外观：切换跟随系统 / 浅色 / 深色，重启后偏好应保留
  • 深色模式：ThemeSection 下拉、翻译目标语言 SelectLite、设置 mobile tab chip、历史页 filter chip 均为实色深底
  • 浅色模式：选中 chip 仍为深底浅字；胶囊为浅色毛玻璃 pill
  • Windows 桌面端标题栏随主题同步
  • CI 已通过（run 27496773051）

替代冲突中的 #660。

PR Type

Enhancement, Bug fix

Description

  • Implement dark mode via CSS tokens and data-ol-theme

  • Add ThemeSection and chipSelectedStyle for chip theming

  • Fix chip and SelectLite backgrounds in dark mode

  • Theme capsule and settings modal for system preference

Diagram Walkthrough

flowchart LR
  Pref["Theme Preference\n(System/Light/Dark)"] --> ThemeModule["themeMode.ts"]
  ThemeModule --> DataAttr["data-ol-theme attribute on <html>"]
  DataAttr --> CSSTokens[":root / [data-ol-theme='dark']\nCSS Variables"]
  CSSTokens --> Components["All Components\n(uses var(--ol-*))"]
  RustPref["Rust UserPreferences.theme_mode"] -- "sync on init" --> ThemeModule
  localStorage["localStorage boot cache"] -- "read/write" --> ThemeModule
Loading

File Walkthrough
Relevant files
Enhancement
15 files
index.html
Add color-scheme meta tag                                                               
+1/-0     
types.rs
Add ThemeMode enum and preference field                                   
+17/-0   
FloatingShell.tsx
Use theme tokens for shell background and panel                   
+13/-11 
WindowChrome.tsx
Replace hardcoded gradients with theme tokens                       
+2/-10   
themeMode.ts
Add theme mode manager with localStorage and Rust sync     
+114/-0 
types.ts
Add ThemeMode type declaration                                                     
+4/-0     
main.tsx
Initialize theme mode on app start                                             
+2/-0     
Overview.tsx
Replace hardcoded ink colors with tokens                                 
+2/-2     
Style.tsx
Apply theme tokens to style pack cards                                     
+11/-13 
_atoms.tsx
Theme Card, Pill and Btn with CSS variables                           
+10/-10 
ThemeSection.tsx
Add ThemeSection with SelectLite                                                 
+58/-0   
shared.tsx
Add shared chipSelectedStyle and btnGhostStyle                     
+31/-0   
tabs.tsx
Import ThemeSection in GeneralTab                                               
+4/-1     
global.css
Add global dark theme styles and utility classes                 
+58/-8   
tokens.css
Add dark theme tokens and capsule variables                           
+80/-6   
Bug fix
5 files
Capsule.tsx
Theme capsule pill and buttons with CSS variables               
+10/-16 
SettingsModal.tsx
Theme settings modal with token-based styles                         
+10/-10 
SelectLite.tsx
Use theme tokens for trigger and popover                                 
+5/-5     
History.tsx
Use chipSelectedStyle for filter chips                                     
+2/-3     
Translation.tsx
Remove hardcoded white background on SelectLite                   
+1/-1     
Additional files
17 files
aura-skin-contract.test.mjs +271/-26
style.css +20/-0   
Onboarding.tsx +4/-4     
SegSimple.tsx +4/-3     
en.ts +7/-0     
ja.ts +7/-0     
ko.ts +7/-0     
zh-CN.ts +7/-0     
zh-TW.ts +7/-0     
ipc.ts +1/-0     
platform.ts +17/-0   
stylePrefs.test.ts +1/-0     
AboutSection.tsx +8/-16   
CheckUpdateButton.tsx +3/-11   
MarketplaceSection.tsx +2/-2     
RecordingInputSection.tsx +4/-4     
HotkeySettingsContext.tsx +3/-0     

@HKLHaoBin @cursoragent
feat(ui): 深色模式与主题 token 及选中态修复
63040b2 
Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions

github-actions Bot commented Jun 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

PR Reviewer Guide 🔍

(Review updated until commit 6b13ee2)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅

660 - Fully compliant

Compliant requirements:

  • Implement full-platform dark mode via CSS tokens and data-ol-theme attribute
  • Settings → General → Appearance supports Follow system / Light / Dark
  • Dual persistence: localStorage boot cache + Rust UserPreferences.theme_mode
  • Migrate main shell, settings page, style page, desktop capsule to theme tokens
  • Capsule adapts to theme (light frosted glass / dark solid background)
  • Fix chip, SelectLite trigger/dropdown, and settings button that incorrectly used --ol-ink or hardcoded light backgrounds in dark mode
  • Add chipSelectedStyle() and strengthen aura-skin-contract
  • Sync Windows desktop title bar with theme
⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ No major issues detected

@HKLHaoBin HKLHaoBin mentioned this pull request Jun 14, 2026
Closed
6 tasks
@HKLHaoBin @cursoragent
fix(ui): restore viewport meta alongside color-scheme
6b13ee2 
Re-add width=device-width after dark-mode squash replaced it; keep color-scheme meta for native control hints.

Co-authored-by: Cursor <cursoragent@cursor.com>
@HKLHaoBin

HKLHaoBin commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

跟进修复

  • 6b13ee2 — 恢复 index.html 的 viewport meta（width=device-width, initial-scale=1.0），与 color-scheme meta 并存。
  • 原因：squash 合并时误将 viewport 替换为 color-scheme；移动端布局虽靠 OS 检测仍可工作，但恢复 meta 为标准配置、避免 WebView 默认 layout viewport 回归。

@github-actions

github-actions Bot commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

Persistent review updated to latest commit 6b13ee2

@H-Chris233 H-Chris233 merged commit 5c113b9 into Open-Less:beta Jun 14, 2026
5 checks passed
jiangmuran added a commit that referenced this pull request Jun 15, 2026
@jiangmuran
chore(release): 1.3.9 (stable / 正式版)
e05025a 
内存优化:webview 代码分割 + i18n 按需加载(index 440→285KB) + 胶囊录音帧节流 + qa/less-computer/glow 窗口懒创建(idle WebKit 进程 5→2)。含 #661 暗色模式。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Review effort 3/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@HKLHaoBin @H-Chris233