From 56b2fb87f6fe924eb4b454faa88506095b37d771 Mon Sep 17 00:00:00 2001
From: me-it-is <188520719+me-it-is@users.noreply.github.com>
Date: Fri, 12 Jun 2026 09:52:22 -0700
Subject: [PATCH] automatically set theme based on browser defaults
---
src/app.html | 11 +++++++++--
src/lib/components/ThemeSwitch.svelte | 7 +++++++
src/routes/+layout.svelte | 14 ++++++++++++++
3 files changed, 30 insertions(+), 2 deletions(-)
diff --git a/src/app.html b/src/app.html
index 268cdd6..4f3f13f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -15,10 +15,17 @@
/>
+
%sveltekit.body%
diff --git a/src/lib/components/ThemeSwitch.svelte b/src/lib/components/ThemeSwitch.svelte
index 4e8762c..9bb9022 100644
--- a/src/lib/components/ThemeSwitch.svelte
+++ b/src/lib/components/ThemeSwitch.svelte
@@ -11,6 +11,13 @@
let theme = getContext('theme');
function handleClick() {
+ if ($theme === undefined) {
+ let browserDefault: 'light' | 'dark' =
+ window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
+ ? 'light'
+ : 'dark';
+ theme.update((value) => browserDefault);
+ }
theme.update((value) => (value === 'dark' ? 'light' : 'dark'));
}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e03519..e38be3f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,6 +21,20 @@
} else {
document.documentElement.classList.remove('dark');
}
+ } else {
+ if (localStorage.getItem('theme') === null) {
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+ $theme = 'light';
+ } else {
+ $theme = 'dark';
+ }
+ } else {
+ if (localStorage.getItem('theme') === 'light') {
+ $theme = 'light';
+ } else {
+ $theme = 'dark';
+ }
+ }
}
});