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

Before & After QR Code Visibility

Before	After