feat: theme toggle

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Contributes to #7702

Adds a one-click light/dark toggle to the top bar, behind the dark_mode_nav_toggle flag (created, default off).

• darkMode.ts becomes a small reactive theme store. With no stored choice the theme follows the OS (prefers-color-scheme, live); the first explicit choice pins it. Legacy dark_mode storage migrates.
• Already-open tabs update immediately via a storage listener.
• The onboarding ThemeToggle is promoted to components/ThemeToggle; onboarding reuses it. The Account Settings dark-mode switch shares the same store, so neither control goes stale.

Note on #7702's criteria: "system" here is the default behaviour rather than a selectable option (a deliberate simplification, one-click beats a menu). If a returnable "System" choice is required, the store supports adding it in Account Settings later. Flagging for the issue author to confirm before this closes #7702.

Behaviour change to be aware of: users who never chose a theme now follow their OS, so dark-OS users get dark mode on first load after this ships.

How did you test this code?

• tsc: 0 new errors vs main; eslint: clean.
• Storybook: ThemeToggle story (flips the canvas theme live).

Smoke test (enable dark_mode_nav_toggle for your identity in the Staging environment of Flagsmith Website, then hard-refresh; run the dev server from this branch):

• Toggle appears in the top bar; clicking flips the theme instantly
• Fresh profile (no stored theme) follows the OS appearance, live
• Account Settings dark-mode switch and the nav toggle stay in sync
• Second browser tab reflects a theme change made in the first
• Onboarding flow toggle still works (now the shared component)
• Flag off: top bar unchanged

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jul 27, 2026 8:50pm
flagsmith-frontend-staging	Ready	Preview, Comment	Jul 27, 2026 8:50pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jul 27, 2026 8:50pm

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: b864bb49-351e-42e7-85e0-7f653c7be51f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}