() => { document.documentElement.classList.toggle('dark'); }
Comparison shown below comparing switching theme via session prop (purple icon) and switching via the above.
Note: the purple switch is broken because I deleted the old dark theme, but it still demonstrates what was happening when it was there with the brief unstyled page.
Essentially, you need to define your default light-themed CSS variables and then override them within a .dark-scoped selector so the values change when dark mode is active with the js toggle
/* Default (light theme) */
:root {
--colour-pg-bg: hsl(214 30% 91%);
}
/* Dark theme override (triggered by class on <html>) */
html.dark {
--colour-pg-bg: hsl(216 14% 27%);
}
What I had to do also however was to include the IA "dark" theme under a different name within my theme (import it), however I edited the selectors within the css files by adding .dark to the front of each, e.g.
