Skip to content

fix: intro/onboarding screens respect selected theme#1

Closed
ryans-posthog wants to merge 1 commit intomainfrom
theme-onboarding-intro
Closed

fix: intro/onboarding screens respect selected theme#1
ryans-posthog wants to merge 1 commit intomainfrom
theme-onboarding-intro

Conversation

@ryans-posthog
Copy link
Copy Markdown
Owner

Summary

  • The onboarding welcome + steps (and other FullScreenLayout-wrapped screens — auth, invite code) rendered in light appearance regardless of the user's selected theme.
  • Root causes: apps/code/index.html hardcoded <html class="dark"> + bg-dark-bg text-dark-text on <body>; globals.css had .radix-themes in the light --color-background selector (matching every Radix Theme wrapper, including dark ones); the inner <Theme> in FullScreenLayout diverged from the outer ThemeWrapper props.
  • Fix: pre-paint inline script reads persisted theme from localStorage and toggles .dark on <html> before first paint (kept in sync post-hydration by syncDarkClass in themeStore.ts); scope the light --color-background to :root, .light, .light-theme; align FullScreenLayout's inner <Theme> (grayColor="slate", panelBackground="solid", scaling="105%").

Test plan

  • pnpm --filter code typecheck passes
  • pnpm --filter code test — only the unrelated pre-existing SessionService > watchCloudTask failure remains (also fails on main)
  • Fresh install (clear localStorage) with OS in light → onboarding renders light
  • Fresh install with OS in dark → onboarding renders dark
  • Set theme to Dark in Settings → General, log out → onboarding renders dark, no light flash on restart
  • Set theme to Light, log out → onboarding renders light, no dark flash on restart
  • During onboarding, toggle theme via command menu → background, wordmark, accent, and hog-tip panel all flip

The onboarding welcome + steps (and other FullScreenLayout-wrapped screens)
rendered in light appearance regardless of the user's selected theme.

- Drop the hardcoded `class=\"dark\"` on <html> and stale `bg-dark-bg
  text-dark-text` classes on <body> in `apps/code/index.html`, and replace
  them with a pre-paint inline script that reads the persisted theme from
  `localStorage` and toggles `.dark` on <html> before first paint. This
  prevents a flash of the wrong theme and lets themeStore keep the class
  in sync after hydration via `syncDarkClass`.
- Remove `.radix-themes` from the light-side `--color-background` selector
  in `globals.css` so Radix Theme wrappers derive the background from their
  own appearance, not from the bare `.radix-themes` class that matches every
  wrapper (including dark ones). Refresh the adjacent Lemon-button comment
  that referenced the former \"always-light\" assumption.
- Align `FullScreenLayout`'s inner <Theme> props with the outer `ThemeWrapper`
  (`grayColor=\"slate\"`, `panelBackground=\"solid\"`, `scaling=\"105%\"`) so
  the nested Theme doesn't silently diverge from the app's main appearance.

Generated-By: PostHog Code
Task-Id: f813985c-b866-4b44-88f6-7bda252418d3
Copy link
Copy Markdown
Owner Author

@ryans-posthog ryans-posthog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What implication are there for this change?

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant