feat: add dark/light mode toggle

- Add blocking inline script in app.html that reads localStorage
  'theme' and applies .dark class before render (no flash)
- Invert gray scale in .dark via CSS custom properties so all
  grayscale colors reverse automatically (light becomes dark)
- Add @custom-variant dark to enable dark: utility classes
- Add border-button toggle ("Dark"/"Light") in TopBar far right
- Persist preference in localStorage
This commit is contained in:
NeilClack
2026-07-07 09:54:32 -05:00
parent 5a13f2516c
commit 03ecfbd635
3 changed files with 108 additions and 64 deletions
+10
View File
@@ -4,6 +4,16 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
(function () {
const theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
})();
</script>
%sveltekit.head%
</head>