fix(ui): 统一卡片样式并修复深色模式可读性

[HKLHaoBin]

User description

摘要

Fixes #。

统一 OpenLess 前端卡片 UI 的圆角、悬浮层次和主题颜色，并修复深色模式下局部页面出现浅色背景配浅色文字的问题。重点覆盖设置页、风格页、胶囊控件和 Windows 标题栏等主题相关界面，确保深色、浅色、跟随系统三种模式下保持可读。

修复 / 新增 / 改进

• 修复深色模式下风格包卡片、输入框、胶囊按钮等控件的背景色与文字色对比不足问题。
• 统一卡片类 UI 的圆角、边框、阴影和悬浮样式，减少页面间视觉不一致。
• 新增 / 完善深色、浅色、跟随系统的主题切换入口，并让前端 token 驱动主要界面颜色。
• 修复 Windows 10/11 深色模式下标题栏仍保持浅色的问题。
• 补充 aura / skin 相关契约检查，防止风格页再次引入硬编码浅色卡片背景。

兼容

• 不包含：
  • 不修改后端接口协议。
  • 不修改用户数据结构或本地配置存储格式。
  • 不调整 Android / 移动端运行逻辑。
• 对现有用户 / 本地环境 / 构建流程的影响：
  • 现有用户无需迁移配置。
  • 前端主题显示会随用户选择或系统主题更新。
  • 构建流程不变，仍使用现有 npm / Vite / Tauri 流程。

测试计划

• 命令：git diff --check

• 结果：通过

• 证据路径：F:\编程\openless

• 命令：npm run check:aura-skin

• 结果：通过，输出 Aura skin contract OK

• 证据路径：F:\编程\openless\openless-all\app\scripts\aura-skin-contract.test.mjs

• 命令：npx tsc --noEmit

• 结果：通过

• 证据路径：F:\编程\openless\openless-all\app

• 命令：npm run build

• 结果：通过，仅保留 Vite 既有 chunk / dynamic import 警告

• 证据路径：F:\编程\openless\openless-all\app

• 命令：npm run dev -- --host 127.0.0.1 --port 5177

• 结果：前端静态页面可打开，深色模式下风格卡片背景和文字颜色正常

• 证据路径：http://127.0.0.1:5177/

---

PR Type

Bug fix, Enhancement

---

Description

• Unify card UI styles with CSS design tokens.

• Fix dark mode readability across pages and components.

• Add Windows native caption theme sync via Tauri command.

• Introduce theme switching (system/light/dark) in settings.

• Refactor segmented control, toggle, inputs to use tokens.

---

Diagram Walkthrough

flowchart LR
  tokens[Design Tokens] --> Components
  Components --> Display[Unified Card UI]
  Components --> DarkMode[Dark Mode Readability]
  Theme[Theme Switch] --> Caption[Windows Caption Sync]
  Caption --> Native[Native Title Bar]
  Theme --> Segmented[Segmented Control]

Loading

File Walkthrough

	Relevant files
Enhancement	38 files lib.rs Add Windows caption theme command                                                +63/-19  FloatingShell.tsx Refactor inline styles to tokens                                                  +25/-251 Marketplace.tsx Use token border radii in marketplace                                        +17/-17  Vocab.tsx Update vocab pill radii to tokens                                                +12/-12  LessComputerPanel.tsx Tokenize LC panel shells and bubbles                                          +21/-22  Onboarding.tsx Unify onboarding component radii                                                  +17/-17  LocalAsr.tsx Replace hardcoded radii in ASR page                                            +11/-11  SettingsModal.tsx Add data-ol-mobile attribute                                                          +3/-70    History.tsx Use token radii for history items                                                +6/-6      _atoms.tsx Refactor Card, Btn, Collapsible tokens                                      +12/-11  Translation.tsx Tokenize translation page controls                                              +10/-10  MarketplaceModal.tsx Use glass background tokens                                                            +6/-6      ShortcutRecorder.tsx Unify recorder button radii                                                            +6/-6      Overview.tsx Tokenize provider card and dictation button                            +6/-6      GithubLoginModal.tsx Apply token radii to login modal                                                  +4/-4      SelectLite.tsx Tokenize dropdown trigger and dropdown menu                            +9/-9      RecordingInputSection.tsx Tokenize recording mode selector                                                  +5/-5      ProvidersSection.tsx Tokenize provider section buttons                                                +2/-2      SegSimple.tsx Refactor segmented control with tokens                                      +24/-15  AutoUpdate.tsx Tokenize update dialog progress bar                                            +2/-2      ShortcutsSection.tsx Tokenize shortcut section buttons                                                +5/-5      shared.tsx Tokenize toggle and input styles                                                  +8/-6      RemoteInputSection.tsx Tokenize remote input toggle                                                          +4/-4      themeMode.ts Add theme mode utilities                                                                  +52/-0    ThemeSection.tsx Add theme switching UI                                                                      +36/-0    tabs.tsx Update settings tabs to use tokens                                              +4/-2      SelectionAsk.tsx Minor style token updates                                                                +4/-4      AboutSection.tsx Tokenize about section                                                                      +3/-3      Modal.tsx Tokenize modal border radius                                                          +5/-5      SwitchLite.tsx Tokenize switch component                                                                +3/-3      MarketplaceSection.tsx Minor token updates                                                                            +3/-3      CheckUpdateButton.tsx Tokenize check update button                                                          +2/-2      platform.ts Add platform detection updates                                                      +18/-0    main.tsx Apply theme before first paint                                                      +5/-0      ClaudeConsoleSection.tsx Tokenize Claude console section                                                    +1/-1      tokens.css Add new design tokens for cards and dark mode                        +75/-15  global.css Update global styles with tokens                                                  +410/-11 style.css Update remote server styles                                                            +27/-18
Bug fix	3 files Style.tsx Replace hardcoded backgrounds with tokens                                +56/-54  QaPanel.tsx Tokenize QA panel borders and backgrounds                                +23/-22  Capsule.tsx Tokenize capsule button and pill styles                                    +12/-12
Documentation	5 files ja.ts Update Japanese translations                                                          +8/-0      zh-TW.ts Update Traditional Chinese translations                                    +8/-0      ko.ts Update Korean translations                                                              +8/-0      zh-CN.ts Update Simplified Chinese translations                                      +8/-0      en.ts Update English translations                                                            +8/-0
Tests	2 files aura-skin-contract.test.mjs Update contract test for new tokens                                            +421/-2  windows-ui-config.test.mjs Add test for Windows caption theme                                              +42/-13

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

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

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing CSS Animations and Class Definitions The diff removes the inline <style> block that defined @keyframes ol-prompt-pop, @keyframes ol-page-slide, and many CSS class rules (e.g., .ol-aura-sidebar, .ol-aura-sidebar-brand, .ol-aura-mobile-nav). The component still references these keyframes (e.g., animation: 'ol-prompt-pop 0.26s var(--ol-motion-spring)' at line 466) and uses those class names (e.g., className="ol-aura-mobile-nav" at line 392). If the removed styles were not ported to a global CSS file, the UI will lose the popup animations and sidebar/mobile navigation styling, resulting in broken appearance and lack of user-visible feedback. </main> </div> {mobileLayout && ( <nav className="ol-aura-mobile-nav" aria-label="OpenLess" style={{ '--ol-nav-count': NAV.length } as CSSProperties} > {NAV.map(n => { const active = !settingsOpen && currentTab === n.id; return ( <button key={n.id} type="button" onClick={() => setCurrentTab(n.id)} className={active ? 'ol-aura-mobile-nav-btn ol-aura-mobile-nav-btn-active' : 'ol-aura-mobile-nav-btn'} > <Icon name={n.icon} size={18} /> <span>{n.name}</span> </button> ); })} </nav> )} </div> {/* Settings modal — rendered inside this window */} {settingsOpen && <SettingsModal key={settingsInitialSection ?? 'default'} os={os} initialSettingsSection={settingsInitialSection} onClose={() => setSettingsOpen(false)} /> } {providerPromptOpen ? ( <ProviderSetupPrompt onLater={rememberProviderPrompt} onOpenSettings={openProviderSettings} /> ) : hotkeyModePromptOpen ? ( <HotkeyModeMigrationPrompt onLater={deferHotkeyModePrompt} onOpenSettings={openHotkeyRecordingSettings} /> ) : null} <AudioCueListener /> </div> ); } function ProviderSetupPrompt({ onLater, onOpenSettings }: { onLater: () => void; onOpenSettings: () => void }) { const { t } = useTranslation(); return ( <div style={{ position: 'absolute', inset: 0, zIndex: 70, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28, background: 'var(--ol-overlay-bg)', backdropFilter: 'blur(6px) saturate(140%)', WebkitBackdropFilter: 'blur(6px) saturate(140%)', animation: 'ol-prompt-fade 0.2s var(--ol-motion-soft)', }} > <div style={{ width: 360, borderRadius: 'var(--ol-r-lg)',