feat: theme toggle by talissoncosta · Pull Request #8128 · Flagsmith/flagsmith

talissoncosta · 2026-07-27T20:34:46Z

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 · 2026-07-27T20:34:53Z

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

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview	Aug 3, 2026 1:39pm
flagsmith-frontend-staging	Ready	Preview	Aug 3, 2026 1:39pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Aug 3, 2026 1:39pm

coderabbitai · 2026-07-27T20:34:55Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 0672f5d6-1305-45b3-8eb9-053eef80724c

📥 Commits

Reviewing files that changed from the base of the PR and between a7e78ba and 6b3a6dd.

📒 Files selected for processing (1)

frontend/web/project/darkMode.ts

📝 Walkthrough

Walkthrough

The change centralises dark-mode state in darkMode.ts with explicit persistence, system preference fallback, reactive updates, and cross-tab synchronisation. It adds a shared ThemeToggle component, updates existing theme controls, and enables the toggle in the top navigation behind a feature flag. The onboarding flow now imports the shared component. Storybook documentation covers the new component.

Estimated code review effort: 3 (Moderate) | ~20 minutes

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

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

coderabbitai

Actionable comments posted: 4

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: af7fdd78-7bf8-470b-8b44-c1b62131a8a1

📥 Commits

Reviewing files that changed from the base of the PR and between 4d5fff8 and a5dc874.

📒 Files selected for processing (8)

frontend/documentation/components/ThemeToggle.stories.tsx
frontend/web/components/DarkModeSwitch.tsx
frontend/web/components/ThemeToggle/ThemeToggle.tsx
frontend/web/components/ThemeToggle/index.ts
frontend/web/components/navigation/navbars/TopNavbar.tsx
frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
frontend/web/components/pages/onboarding/ThemeToggle/ThemeToggle.tsx
frontend/web/project/darkMode.ts

💤 Files with no reviewable changes (1)

frontend/web/components/pages/onboarding/ThemeToggle/ThemeToggle.tsx

darkMode.ts becomes a small reactive theme store: light/dark/system (system follows prefers-color-scheme), legacy dark_mode storage migrates, and a storage listener updates already-open tabs. The onboarding ThemeToggle is promoted to components/ThemeToggle and gains a labelled Light/Dark/System menu (the icon set has no system glyph, so a menu beats a blind three-state cycle). The account-settings switch shares the same store so neither control goes stale. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Drops the Light/Dark/System menu: the OS preference decides the theme until the user makes an explicit choice, and the nav control is a plain sun/moon flip like onboarding's. Deviates from #7702's second criterion as written (no selectable system option); flagged on the PR for the issue author. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…ear)

github-actions · 2026-07-31T16:32:08Z

Docker builds report

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-api-test:pr-8128`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-e2e:pr-8128`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-api:pr-8128`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith:pr-8128`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-private-cloud:pr-8128`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-frontend:pr-8128`	Finished ✅	Results ✅

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 6756fa97-636b-4bd8-82fe-84d3876752f9

📥 Commits

Reviewing files that changed from the base of the PR and between a5dc874 and a7e78ba.

📒 Files selected for processing (8)

frontend/documentation/components/ThemeToggle.stories.tsx
frontend/web/components/DarkModeSwitch.tsx
frontend/web/components/ThemeToggle/ThemeToggle.tsx
frontend/web/components/ThemeToggle/index.ts
frontend/web/components/navigation/navbars/TopNavbar.tsx
frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.tsx
frontend/web/components/pages/onboarding/ThemeToggle/ThemeToggle.tsx
frontend/web/project/darkMode.ts

💤 Files with no reviewable changes (1)

frontend/web/components/pages/onboarding/ThemeToggle/ThemeToggle.tsx

github-actions · 2026-07-31T16:38:22Z

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18954 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

1 passed

Details

1 test across 1 suite
1 minute, 8 seconds
6b3a6dd
🔄 Run: #18954 (attempt 1)

🗂️ Previous results

✅ private-cloud · depot-ubuntu-latest-16 — run #18954 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

3 passed

Details

3 tests across 3 suites
32.8 seconds
6b3a6dd
🔄 Run: #18954 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #18954 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

1 passed

Details

1 test across 1 suite
40.4 seconds
6b3a6dd
🔄 Run: #18954 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #18954 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

1 passed

Details

1 test across 1 suite
40.1 seconds
6b3a6dd
🔄 Run: #18954 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18920 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

2 passed

Details

2 tests across 2 suites
1 minute, 2 seconds
a7e78ba
🔄 Run: #18920 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-16 — run #18920 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

5 passed

Details

5 tests across 4 suites
19 seconds
a7e78ba
🔄 Run: #18920 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #18920 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

1 passed

Details

1 test across 1 suite
41.7 seconds
a7e78ba
🔄 Run: #18920 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #18920 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

1 passed

Details

1 test across 1 suite
40.4 seconds
a7e78ba
🔄 Run: #18920 (attempt 1)

github-actions · 2026-07-31T16:39:58Z

Visual Regression

19 screenshots compared. See report for details.
View full report

vercel Bot deployed to Preview – flagsmith-frontend-staging July 27, 2026 20:35 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 27, 2026 20:35 View deployment

github-actions Bot added front-end Issue related to the React Front End Dashboard feature New feature or request labels Jul 27, 2026

vercel Bot deployed to Preview – flagsmith-frontend-preview July 27, 2026 20:42 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 27, 2026 20:42 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 27, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging July 27, 2026 20:49 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 27, 2026 20:50 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 27, 2026

talissoncosta changed the title ~~feat: Dark Mode isn't friendly to find~~ feat: theme toggle Jul 28, 2026

talissoncosta requested a review from kyle-ssg July 29, 2026 12:09

coderabbitai Bot reviewed Jul 29, 2026

View reviewed changes

Comment thread frontend/web/components/ThemeToggle/ThemeToggle.tsx

Comment thread frontend/web/project/darkMode.ts Outdated

Comment thread frontend/web/project/darkMode.ts

vercel Bot deployed to Preview – flagsmith-frontend-preview July 29, 2026 13:13 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 29, 2026 13:13 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 29, 2026

talissoncosta and others added 4 commits July 29, 2026 14:02

style: theme toggle sits left of Getting Started

c9684f4

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

fix: harden dark mode storage handling (blocked storage, cross-tab cl…

a7e78ba

…ear)

talissoncosta force-pushed the feat/theme-toggle-nav-7702 branch from 8bd312a to a7e78ba Compare July 29, 2026 17:08

vercel Bot deployed to Preview – flagsmith-frontend-staging July 29, 2026 17:09 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 29, 2026 17:09 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 29, 2026

talissoncosta marked this pull request as ready for review July 31, 2026 16:31

talissoncosta requested a review from a team as a code owner July 31, 2026 16:31

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 31, 2026

coderabbitai Bot reviewed Jul 31, 2026

View reviewed changes

Comment thread frontend/web/project/darkMode.ts

fix: clear in-memory theme choice on external storage removal

6b3a6dd

talissoncosta requested a review from Zaimwa9 August 3, 2026 13:38

flagsmith-engineering Bot assigned Zaimwa9 Aug 3, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging August 3, 2026 13:39 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview August 3, 2026 13:39 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Aug 3, 2026

Uh oh!

Conversation

talissoncosta commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

How did you test this code?

Uh oh!

vercel Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docker builds report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Uh oh!

github-actions Bot commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual Regression

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

talissoncosta commented Jul 27, 2026 •

edited

Loading

vercel Bot commented Jul 27, 2026 •

edited

Loading

coderabbitai Bot commented Jul 27, 2026 •

edited

Loading

github-actions Bot commented Jul 31, 2026 •

edited

Loading

github-actions Bot commented Jul 31, 2026 •

edited

Loading

github-actions Bot commented Jul 31, 2026 •

edited

Loading