Light theme
We need to have a way to switch to light theme.
Light theme is built into Tabler, and can be switched on by removing the .theme-dark
class from <body>
. Some of our own compoments can however use hardcoded dark colours (notably, our CodeMirror editor setup). We'll want to make them use light colours either by pure CSS (i. e. define both .cm-something
and .theme-dark .cm-something
selectors) or by JS (i. e. just pass a different theme to CodeMorror depending on the theme selected). CSS solution is preferable.
Let's store selected theme in localStorage
-backed Svelte store, similar to how we store the auth token now.
For changing that, for now let's add a switch to the user avatar menu – we can always move it to a more appropriate place later. In addition to light
and dark
, let's also add an automatic
mode that switches theme based on user preference.
Bonus points: figure out a way to make automatic mode work without JS. This would need some fiddling with Tabler SCSS source :-) Perhaps https://github.com/postcss/postcss-dark-theme-class could work here somehow?