live re-theme for auto

[lionellbriones]

Jira Link

Description

When uiConfig.mode is set to "auto", the Web3Auth modal now follows live OS color-scheme changes. Previously the theme was resolved once from the isDark prop, so switching the OS between light and dark mid-session left the open modal on the stale theme. The modal now re-themes instantly without needing to be closed and reopened.

Changes

• WidgetContext (packages/modal/src/ui/context/WidgetContext.tsx)
  • Renamed the incoming isDark prop to isDarkProp and derive the effective isDark from local state, seeded from prefers-color-scheme when mode === "auto" (falling back to the prop otherwise).
  • Added a matchMedia("(prefers-color-scheme: dark)") listener (active only in "auto" mode) that updates the React context value on OS theme changes.
  • Kept the CSS w3a--dark variant on #w3a-parent-container in sync with the context value so component styling and context state stay aligned.
  • Guarded all window/matchMedia access for SSR safety and cleaned up the listener on unmount / mode change.

How has this been tested?

Screenshots (if appropriate)

Screen.Recording.2026-07-21.at.11.26.18.PM.mov

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• My code follows the code style of this project. (run lint)
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

---

Note

Low Risk
Scoped UI/theming in WidgetContext with SSR guards; no auth, data, or API changes.

Overview
When uiConfig.mode is "auto", the modal no longer sticks to the theme resolved once from the parent isDark prop. WidgetProvider now keeps isDark in React state (initialized from prefers-color-scheme when possible) and subscribes to matchMedia("(prefers-color-scheme: dark)") so an open modal updates light/dark as the OS scheme changes.

On each scheme change it also toggles w3a--dark on #w3a-parent-container, aligning Tailwind’s dark variant with context (e.g. appLogo). window / matchMedia usage is guarded for SSR, and the listener is removed when mode is not auto or on unmount.

^{Reviewed by Cursor Bugbot for commit e66ad1d. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
web3auth-web	Ready	Preview, Comment	Jul 21, 2026 3:28pm