add light and dark mode toggle to home page

[kruulik]

Ticket ENG-2727

Description Of Changes

Adds support for dark mode, scoped to the home page.

Code Changes

• Introduces ThemeModeProvider / useThemeMode in fidesui with localStorage persistence.
• Adds a dark Ant Design theme (darkAntTheme) and dark-mode CSS variable overrides.
• Updates Admin UI Home page layout to Ant components and adds an alphaDarkMode-gated toggle.

Steps to Confirm

1. Visit /settings/about/alpha and ensure the theme flag is turned on
2. Go to the home page, and switch the light/dark toggle on/off
3. You should see the banner text updating color, however the cards at the bottom of the page will look off. This is partly by design; those cards are all Chakra UI, and will be completely removed during the dashboard UI development.

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Feb 23, 2026 5:13pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Feb 23, 2026 5:13pm

[Copilot]

Pull request overview

Adds an (alpha) light/dark mode capability to the Admin UI Home page by introducing a theme-mode context in fidesui, a dark Ant Design theme variant, and wiring a dev-only toggle behind a feature flag.

Changes:

• Introduces ThemeModeProvider / useThemeMode in fidesui with localStorage persistence.
• Adds a dark Ant Design theme (darkAntTheme) and dark-mode CSS variable overrides.
• Updates Admin UI Home page layout to Ant components and adds an alphaDarkMode-gated toggle.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
clients/fidesui/src/index.ts	Re-exports new theme-mode APIs and dark theme helpers from the library entrypoint.
clients/fidesui/src/hooks/useThemeMode.tsx	Adds theme-mode context/provider + hook with persistence.
clients/fidesui/src/hooks/index.ts	Exposes theme-mode exports at the hooks barrel.
clients/fidesui/src/ant-theme/index.ts	Re-exports the new dark theme module.
clients/fidesui/src/ant-theme/global.scss	Adds dark-mode CSS variable overrides and additional global html/body styling.
clients/fidesui/src/ant-theme/dark-theme.ts	Implements darkAntTheme and a createDarkAntTheme factory.
clients/fidesui/src/FidesUIProvider.tsx	Makes Ant theme resolution explicit when antTheme isn’t provided.
clients/admin-ui/tailwind.config.js	Enables Tailwind dark: variants via a [data-theme="dark"] selector.
clients/admin-ui/src/home/HomeLayout.tsx	Migrates layout from Chakra Flex props to Ant Flex API.
clients/admin-ui/src/home/HomeContent.tsx	Migrates grid/layout to Ant Row/Col and spacing styles.
clients/admin-ui/src/home/HomeContainer.tsx	Wraps Home in ThemeModeProvider, selects Ant theme based on mode, and conditionally renders the toggle.
clients/admin-ui/src/home/HomeBanner.tsx	Updates banner typography components and adjusts background based on theme mode.
clients/admin-ui/src/flags.json	Adds alphaDarkMode feature flag configuration.
clients/admin-ui/src/features/common/ThemeModeToggle.tsx	Adds a segmented/button-based UI control for switching theme mode.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kruulik]

The theme will only ever be applied to the child contents of this wrapper. This is a pattern we could use elsewhere to start adding theming in sections, without being blocked by a global migration from Chakra to Ant.

[greptile-apps]

Greptile Summary

This PR implements dark mode support for the Admin UI Home page by introducing a theme mode system with localStorage persistence. The changes migrate the Home page from Chakra UI to Ant Design components and add a feature-flagged toggle for switching between light and dark themes.

Key changes:

• Created ThemeModeProvider and useThemeMode hook in fidesui with localStorage persistence
• Added darkAntTheme configuration using Ant's darkAlgorithm with Fides brand colors
• Added dark mode CSS variable overrides in global.scss for non-Ant components
• Migrated Home page components from Chakra to Ant (Flex, Row/Col, Title, Text)
• Added alphaDarkMode feature flag to gate the functionality in development

Issues found:

• HomeLayout.tsx uses invalid component prop on Ant Flex (line 18)
• HomeContainer.tsx has unnecessary div wrappers that should use Flex components per coding standards (lines 34-40, 45-47)

Confidence Score: 3/5

• PR is mostly safe but has syntax error that will cause runtime issues
• score reflects one syntax error (invalid component prop) that will likely cause warnings or errors, plus style violations with unnecessary div wrappers; dark mode implementation itself is well-structured with proper error handling
• Pay close attention to clients/admin-ui/src/home/HomeLayout.tsx (invalid prop) and clients/admin-ui/src/home/HomeContainer.tsx (div wrapper violations)

Important Files Changed

Filename	Overview
clients/admin-ui/src/home/HomeContainer.tsx	added dark mode support with theme provider and toggle, contains unnecessary div wrappers that should use Flex instead
clients/admin-ui/src/home/HomeLayout.tsx	migrated from Chakra to Ant Flex, but uses invalid component prop
clients/fidesui/src/hooks/useThemeMode.tsx	implemented theme mode context with localStorage persistence and lock support

_{Last reviewed commit: c1756c3}

[greptile-apps]

_{14 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[gilluminate]

Looking good! nice work. ship it!