From 77361eaf03476aae23be5b55ee8ecdd1b2010a42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olle=20M=C3=A5nsson?=
 <31876997+ollema@users.noreply.github.com>
Date: Sat, 28 Oct 2023 20:15:07 +0200
Subject: [PATCH 1/2] track changes

---
 src/lib/mode-watcher.svelte | 28 +++++++++++++++++++++++++++-
 src/lib/mode.ts             | 20 ++++++++++++++------
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/lib/mode-watcher.svelte b/src/lib/mode-watcher.svelte
index f258102..68b6f71 100644
--- a/src/lib/mode-watcher.svelte
+++ b/src/lib/mode-watcher.svelte
@@ -1,11 +1,37 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { getSystemPrefersMode, setInitialClassState, setActiveMode } from './mode.js';
+	import {
+		getSystemPrefersMode,
+		getUserPrefersMode,
+		setActiveMode,
+		setInitialClassState
+	} from './mode';
+
+	// track `prefers-color-scheme` if no user preference is set
+	export let track = true;
 
 	onMount(() => {
 		if (!('mode' in localStorage)) {
 			setActiveMode(getSystemPrefersMode());
 		}
+
+		if (!track) {
+			return;
+		}
+
+		const mql = window.matchMedia('(prefers-color-scheme: light)');
+
+		const listener = () => {
+			if (getUserPrefersMode() === 'system') {
+				setActiveMode(getSystemPrefersMode());
+			}
+		};
+
+		mql.addEventListener('change', listener);
+
+		return () => {
+			mql.removeEventListener('change', listener);
+		};
 	});
 </script>
 
diff --git a/src/lib/mode.ts b/src/lib/mode.ts
index a34cb49..9a5b1f7 100644
--- a/src/lib/mode.ts
+++ b/src/lib/mode.ts
@@ -1,14 +1,14 @@
 // Modified version of the light switch by: https://skeleton.dev
 
 import { persisted } from 'svelte-persisted-store';
-import { readonly } from 'svelte/store';
+import { get, readonly } from 'svelte/store';
 
 /**
  * Stores
  */
 
 const systemPrefersMode = persisted<'dark' | 'light'>('systemPrefersMode', 'dark');
-const userPrefersMode = persisted<'dark' | 'light' | undefined>('userPrefersMode', undefined);
+const userPrefersMode = persisted<'dark' | 'light' | 'system'>('userPrefersMode', 'system');
 const activeMode = persisted<'dark' | 'light'>('mode', 'dark');
 
 /** Readonly store with either `"light"` or `"dark"` depending on the active mode */
@@ -27,12 +27,17 @@ export function getSystemPrefersMode(): 'dark' | 'light' {
 	return prefersLightMode;
 }
 
+/** Get the user preference */
+export function getUserPrefersMode(): 'dark' | 'light' | 'system' {
+	return get(userPrefersMode);
+}
+
 /**
  * Setters
  */
 
 /** Set the user preference */
-function setUserPrefersMode(value: 'dark' | 'light' | undefined): void {
+function setUserPrefersMode(value: 'dark' | 'light' | 'system'): void {
 	userPrefersMode.set(value);
 }
 
@@ -67,14 +72,17 @@ export function setInitialClassState() {
 
 	let userPref: string | null = null;
 	try {
-		userPref = JSON.parse(localStorage.getItem('userPrefersMode') || 'null');
+		userPref = JSON.parse(localStorage.getItem('userPrefersMode') || 'system');
 	} catch {
 		// ignore JSON parsing errors
 	}
 
 	const systemPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
 
-	if (userPref === 'light' || (userPref === null && systemPref === 'light')) {
+	if (
+		userPref === 'light' ||
+		((userPref === 'system' || userPref === null) && systemPref === 'light')
+	) {
 		htmlEl.classList.remove('dark');
 		htmlEl.style.colorScheme = 'light';
 	} else {
@@ -106,7 +114,7 @@ export function setMode(mode: 'dark' | 'light'): void {
 /** Reset the mode to operating system preference */
 export function resetMode(): void {
 	activeMode.update(() => {
-		setUserPrefersMode(undefined);
+		setUserPrefersMode('system');
 		const next = getSystemPrefersMode();
 		setActiveMode(next);
 		return next;

From 2bb9d316cde18c26d4db1afef0b523f7c8983ebd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olle=20M=C3=A5nsson?=
 <31876997+ollema@users.noreply.github.com>
Date: Sat, 28 Oct 2023 20:18:58 +0200
Subject: [PATCH 2/2] add changeset

---
 .changeset/serious-teachers-cry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/serious-teachers-cry.md

diff --git a/.changeset/serious-teachers-cry.md b/.changeset/serious-teachers-cry.md
new file mode 100644
index 0000000..911436d
--- /dev/null
+++ b/.changeset/serious-teachers-cry.md
@@ -0,0 +1,5 @@
+---
+'mode-watcher': patch
+---
+
+Add `track` prop which allows `<ModeWatcher>` to track changes in system preference