feat(theme): unlock light/dark with animated theme toggler - #323
Draft
zjy365 wants to merge 3 commits into
Draft
Conversation
Unlock the next-themes provider (light+dark, default dark, persisted), port magicui's AnimatedThemeToggler into @workspace/ui as a controlled component (View Transitions circular reveal + motion icon crossfade, graceful fallback without VT), and mount it in the app sidebar footer above the account row. Shell color literals are paired so dark resolves pixel-identical: neutral-50/400 become the semantic foreground/muted-foreground (exact dark matches), blues get light values with dark: originals. The project-chrome-surface base moved into .dark with a light value in :root. Canvas surfaces and registry previews keep their intentional dark appearance. Refs: labring/sealos-private#138 #139
Drop the hard-coded `dark` wrappers from DataBrowserPane and the main action surface frame so the DB Access experience follows the theme. Pair the dark-only component tokens so dark resolves pixel-identical while light gets readable values: - --db-access-sticky-header-surface / new --db-access-row-selector- surface: navy originals moved to .dark, light uses --muted. - --main-action-surface-bg / --main-action-surface-glow-color: the overlay paints the canvas navy + blue glow in dark, a plain sheet with no glow in light. - White-overlay chips and zinc text in export/backup dialogs get light semantic bases with dark: originals. Test contract updated: the surface no longer carries a literal bg-neutral-950 class (background is token-driven now). Refs: labring/sealos-private#138 #140
The Billing tab shell / cost drawer / plan-change dialog use the canvas-glow material; it now shares the theme-paired --main-action-surface-bg / --main-action-surface-glow-color tokens (light sheet, no glow; dark keeps the canvas navy + blue glow pixel-identical). - Drop the forced `dark` class from the checkout prorated-charge tooltip (it followed the page theme in dark anyway). - Pair white-overlay skeletons/rows and blue-400 accents across billing surfaces (light: bg-muted / blue-600; dark: originals). - Cost-chart legend dots fill with the paired surface token so the ring reads correctly in both themes. Refs: labring/sealos-private#138 #141
zjy365
marked this pull request as draft
September 8, 2026 03:59
Collaborator
Author
|
先搁置，已改为 Draft。暂不推进合并，后续恢复时再处理与 main 的冲突并重新验证。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Parent spec / tickets
What
forcedTheme.AnimatedThemeTogglerinto@workspace/ui(controlled via next-themes; View Transitions circular reveal + motion Sun/Moon crossfade; graceful direct-switch fallback without VT).neutral-50/400→ semanticforeground/muted-foreground; blues getblue-600 dark:blue-400).darkwrappers;--db-access-sticky-header-surface/ new--db-access-row-selector-surface/--main-action-surface-bg+ glow tokens paired (light sheet, dark canvas navy pixel-identical)..canvas-surfacetokens) and registry previews keep their intentional dark appearance (untouched; chart palette theme-invariant).Evidence
packages/uicomponent tests: 147 pass / 0 fail (7 new toggler tests).bun typecheck6/6 green;bun checkgreen.lab(2.75381 0 0)= neutral-950; sidebar textlab(98.26 0 0)= neutral-50; DB Access sticky#161e33; row selector#0c1120; chrome base#080a11; billing glowlab(36.9089 …)= blue-700 — all pixel-identical to pre-change values.#49aefftheme-invariant.localStoragepersistence +colorScheme; VT lifecycle verified (scoped attrs set/cleared, re-entrancy guarded).origin/mainbaseline (pre-existing, none introduced).Screenshot evidence (#142)
18 Playwright captures (branch dark/light + origin/main dark baseline, dev-mock fixtures) with pixelmatch diff: every page differs by 59–72 px, all inside the sidebar footer = the new theme-toggle row's sun glyph. No other dark pixel changed. Gist: https://gist.github.com/zjy365/9d322a1c39513f6cd14beea9d68e72b3
Fixed during verification
TooltipTrigger renderinjects its ownonClickinto the toggle button; the toggler now composes calleronClickinstead of being silenced by it.🤖 Generated with ZCode