still switching
Fixed the theme isolation by adding a .light class definition in globals.css that explicitly sets all light theme CSS variables. Now the ThemeWrapper simply applies the class to create a scoped theme context that overrides the parent theme. The button inside will always use the light theme variables regardless of the app's global theme.
add burron which is always dark
Added an "Always Dark Button" that stays in dark mode regardless of the app's theme. The ThemeWrapper component already supports both "light" and "dark" themes through its theme prop, so I just added another button wrapped with theme="dark". Now you have three buttons: one that follows the theme, one always light, and one always dark.
is there a way to avoid duplicate light class in .css? perhaps making a copy of root into a .light class instead of writing the values again?