Add a manual light/dark mode switcher

Despite the simplicity of the commit title, this was a pretty big
change. The styling used to just go off of the system's color scheme,
but that can't be overridden. Instead, I have made a variable that
determines whether dark theme is active and made a small panel with some
buttons to change the theme. I had to change a lot of code to achieve
this and lost a lot of hair (I metaphorically pulled it out) from
writing this code.

I also changed things from legacy mode to rune mode (Svelte 4 to 5)
while I was at it, that wasn't too big.
This commit is contained in:
2025-05-07 21:17:52 -07:00
parent e6dd87427b
commit 71e7662408
12 changed files with 273 additions and 89 deletions

15
src/script/theme.ts Normal file
View File

@ -0,0 +1,15 @@
/*/
* I know that having a source file this small is a bit silly,
* but I think it's probably a good way to do this. Since multiple
* components need the theme enum, why not define it in one place.
* I also think it's funny for a source file to have more comments
* than code. This will probably be changed in a future refactor.
*
* Also JavaScript enums suck (hot take)
/*/
export var themes = {
LIGHT: "light",
DARK: "dark",
AUTO: "auto",
};