light/dark mode

This commit is contained in:
Oliver Bryan
2026-01-11 16:23:13 +00:00
parent 5d7faa9ed7
commit 7f40e73678
4 changed files with 54 additions and 3 deletions

View File

@@ -1,5 +1,7 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en" class="">
<!-- class="dark" makes the app dark mode -->
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -8,10 +10,25 @@
<style>
html,
body {
background-color: oklch(0.145 0 0);
color: oklch(0.985 0 0);
background-color: var(--background);
color: var(--foreground);
}
</style>
<script>
const theme = localStorage.getItem("theme");
if (theme === "dark") document.documentElement.classList.add("dark");
else if (theme === "light")
document.documentElement.classList.remove("dark");
if (theme === null) {
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
if (prefersDark) document.documentElement.classList.add("dark");
else document.documentElement.classList.remove("dark");
}
</script>
</head>
<body>