feat: introduce a theme-aware frosted-glass visual system for OpenLess frontend

[Ltdaaa]

User description

Summary

This PR delivers a focused visual refresh for the OpenLess frontend by introducing a theme-aware frosted-glass design language across the core shell and style-pack experience, while intentionally preserving the existing information architecture and interaction density.

Rather than redesigning product structure, this change upgrades the visual system itself: light/dark theme capability, tokenized color layering, frosted surfaces, refined chip states, and more cohesive visual hierarchy for cards, controls, and modal content.

Why

The previous frontend already had a strong functional structure, but the visual language was relatively fragmented across shell surfaces, cards, controls, and dark-mode states.

This update aims to solve three product-level issues:

1. Improve overall visual consistency across shell, settings, and style-related pages
2. Introduce a usable dark theme instead of a partial color inversion
3. Bring higher-end glassmorphism and state hierarchy into the UI without disrupting the current layout or reading flow

What Changed

1. Theme Infrastructure

• Added app-level light/dark theme support
• Introduced persistent theme state and theme application helpers
• Extended shared design tokens to support theme-aware surfaces, borders, shadows, and control states

2. Frosted-Glass Visual System

• Refined shell, floating panels, settings modal, and related surfaces into a more cohesive frosted-glass style
• Standardized blur, translucency, border softness, and shadow depth through tokens instead of isolated per-component styling
• Improved consistency between light and dark themes so visual weight feels intentional in both modes

3. Style Pack Experience Refresh

• Updated the style-pack page to use theme-responsive glass cards instead of flat or mismatched surfaces
• Improved active-card emphasis with clearer highlight, border glow, and state contrast
• Refined small chips/tags so they adapt with theme changes rather than staying visually static
• Preserved the existing compact card density and layout behavior rather than redesigning structure

4. Dark Mode Corrections

• Fixed dark-theme contrast issues where cards, labels, and supporting text previously felt washed out or disconnected from the surrounding shell
• Ensured small card backgrounds, icons, delete actions, and tag pills all respond properly to dark mode

Design Principles

This PR intentionally follows a restrained upgrade strategy:

• Keep the existing OpenLess layout and information architecture
• Avoid unnecessary component reshuffling
• Improve material quality, hierarchy, and polish instead of increasing visual noise
• Make light and dark mode feel like first-class themes, not afterthought variants

Impact

From a user experience perspective, this change makes the frontend feel:

• more premium
• more cohesive
• more theme-complete
• more visually legible in dark mode

From an engineering perspective, it also improves maintainability by moving more of the visual system into reusable tokens and shared UI atoms.

Validation

• npm run build passed successfully

Notes

This PR focuses on visual system refinement, not feature behavior changes.
No major workflow logic or page architecture was altered.

---

PR Type

Enhancement

---

Description

• Add persistent light/dark theme support

• Refresh shell, sidebar, and settings modal with frosted-glass tokens

• Update shared components: Card, Pill, Btn with new visual tokens

• Restyle style pack and overview pages with theme-aware glass cards

• Add theme switcher UI in About settings section

---

Diagram Walkthrough

flowchart LR
  appTheme["Theme persistence"] -->|applies| tokens["CSS tokens"]
  tokens -->|updates| Shell["FloatingShell / SettingsModal"]
  tokens -->|updates| Style["Style page"]
  tokens -->|updates| Overview["Overview page"]
  tokens -->|updates| Shared["Card, Pill, Btn"]

Loading

File Walkthrough

	Relevant files
Enhancement	20 files appTheme.ts Add theme persistence library                                                        +26/-0    tokens.css Add Aura light/dark CSS tokens                                                      +267/-13 global.css Add aura panel/card classes and background                              +19/-1    FloatingShell.tsx Apply aura sidebar and panel styling                                          +127/-66 SettingsModal.tsx Apply aura settings modal styling                                                +89/-32  _atoms.tsx Update Card, Pill, Btn with new tokens                                      +53/-25  Style.tsx Restyle style pack with glass cards                                            +101/-48 Overview.tsx Update overview page layout                                                            +13/-6    App.tsx Apply theme on mount and sync changes                                        +11/-0    main.tsx Apply theme before render                                                                +3/-0      AboutSection.tsx Add theme switcher row                                                                      +53/-6    WindowChrome.tsx Use theme-aware window background                                                +13/-15  shared.tsx Update toggle and input styles                                                      +3/-3      MarketplaceModal.tsx Apply aura styling                                                                              +13/-13  SegSimple.tsx Use segmented token variables                                                        +3/-3      en.ts Add theme translations                                                                      +4/-0      zh-CN.ts Add theme translations                                                                      +4/-0      zh-TW.ts Add theme translations                                                                      +4/-0      ko.ts Add theme translations                                                                      +4/-0      ja.ts Add theme translations                                                                      +4/-0
Additional files	6 files 2026-06-05-openless-aura-skin.md +541/-0  2026-06-05-openless-aura-skin-design.md +254/-0  package.json +1/-0      aura-skin-contract.test.mjs +68/-0    SwitchLite.tsx +2/-2      CheckUpdateButton.tsx +1/-1

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 24fb0bc)

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 Possible Issue The PR removes the per-platform check for Linux that previously skipped backdropFilter and used a solid background. Now the glass effect is applied unconditionally. On Linux environments where compositing is unavailable or unstable (e.g., WebKitGTK without window decorations), this can result in broken rendering, missing backgrounds, or performance degradation. The CSS may have a fallback for [data-ol-no-compositing], but the JavaScript no longer sets that attribute or avoids the filter. const background = 'var(--ol-window-bg)'; return ( <div className="ol-winchrome" style={{ '--ol-window-shell-radius': `${shellRadius}px`, '--ol-window-console-radius': `${consoleRadius}px`, '--ol-window-titlebar-height': `${titlebarHeight}px`, width: '100%', height, position: 'relative', borderRadius: 'var(--ol-window-shell-radius)', boxShadow: os === 'win' ? 'none' : 'var(--ol-shadow-xl)', overflow: 'hidden', display: 'flex', flexDirection: 'column', border: os === 'win' ? 'none' : os === 'mac' ? 'none' : '0.5px solid var(--ol-window-border)', background, backdropFilter: 'blur(var(--ol-glass-blur-strong)) saturate(190%)', WebkitBackdropFilter: 'blur(var(--ol-glass-blur-strong)) saturate(190%)', Potential Unintended Change The Btn component's default borderRadius changed from 8 to 999 (full pill shape) for all variants. This may be intentional for the visual refresh, but it applies globally and could unexpectedly alter button shapes in other parts of the UI that rely on the previous squarish shape (e.g., inside tables, forms, or compact toolbars). If not reviewed for all call sites, this may break layout or visual consistency outside the pages touched by this PR. borderRadius: 999,

[github-actions]

Persistent review updated to latest commit 24fb0bc