Fix Theme Switching Issue & Two Factor QR Code for dark mode

[Manavsaliya]

Issue

The theme switcher didn’t update component appearances instantly when the theme changed. When using only appearance from useAppearance, components didn’t always receive the latest theme value from the hook.

Additionally, some components (like Stripe) don’t need the system theme value. For example, when i implementing a Stripe theme that matches the site’s light or dark mode colors, i had to manually handle system checks each time.

To simplify this, I introduced resolvedAppearance in the useAppearance hook, it always returns either light or dark, removing the need for extra logic.

Also cleaned up the useAppearance hook by removing duplicate code and making it more efficient.

Fix:

• Theme switching: Components now update immediately when theme changes
• QR codes: Now properly visible in dark mode

Also fixed for vue-starter-kit

Theme Switching Issue Demo

Screen.Recording.2025-10-07.222222.mp4

Before & After QR Code Visibility

Before	After

Update: 2025-10-21

• Replaced useState with useSyncExternalStore

[Manavsaliya]

@joetannenbaum should i use useSyncExternalStore insted of useState?

becasue when i use useSyncExternalStore it reduce re-renders to 75% which is absoluty good

and when we use useState, user uses appearance in may components and when user changes appearance it re-render that component but also it also call useState so many time so it think we need to use this useSyncExternalStore hook.

[joetannenbaum]

@Manavsaliya yes let's useSyncExternalStore and see how it looks.

[Manavsaliya]

@joetannenbaum Done👍, now we use useSyncExternalStore