Make ColorSchemeStore state based

Author: hhvrc

src/lib/components/LightSwitch.svelte

@@ -4,18 +4,22 @@
   import { buttonVariants } from '$lib/components/ui/button';
   import * as Dialog from '$lib/components/ui/dialog';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-  import { ColorSchemeStore, LightMode, getDarkReaderState } from '$lib/stores/ColorSchemeStore';
+  import {
+    ColorScheme,
+    colorScheme,
+    getDarkReaderState,
+  } from '$lib/stores/ColorSchemeStore.svelte';
   import { cn } from '$lib/utils';
   import { toast } from 'svelte-sonner';
 
-  let pendingScheme = $state<LightMode | null>(null);
+  let pendingScheme = $state<ColorScheme | null>(null);
   function handleOpenChanged(open: boolean) {
     if (open) return;
     pendingScheme = null;
   }
   function confirm() {
     if (!pendingScheme) return;
-    ColorSchemeStore.set(pendingScheme);
+    colorScheme.Value = pendingScheme;
     pendingScheme = null;
   }
 
@@ -25,13 +29,13 @@
   //   dark true  false  check
   // system check false  false
   // current
-  function isGoingNuclear(current: LightMode, pending: LightMode) {
+  function isGoingNuclear(current: ColorScheme, pending: ColorScheme) {
     // There will definetly be no transition from dark -> light
-    if (current === pending || current === LightMode.Light || pending === LightMode.Dark)
+    if (current === pending || current === ColorScheme.Light || pending === ColorScheme.Dark)
       return false;
 
-    const currentDark = current === LightMode.Dark;
-    const pendingLight = pending === LightMode.Light;
+    const currentDark = current === ColorScheme.Dark;
+    const pendingLight = pending === ColorScheme.Light;
     if (currentDark && pendingLight) return true; // Change will definetly go from dark to light
 
     // Now either current or pending is system, so we need to query the browser preference
@@ -43,8 +47,8 @@
     // system prefers darkmode, if pending is light then the transition will happen
     return pendingLight;
   }
-  function evaluateLightSwitch(scheme: LightMode) {
-    if (isGoingNuclear($ColorSchemeStore, scheme)) {
+  function evaluateLightSwitch(scheme: ColorScheme) {
+    if (isGoingNuclear(colorScheme.Value, scheme)) {
       const darkreader = getDarkReaderState();
       if (darkreader.isActive) {
         toast.warning('DarkReader is enabled, activating light mode will have no effect!');
@@ -53,7 +57,7 @@
       pendingScheme = scheme;
       return;
     }
-    ColorSchemeStore.set(scheme);
+    colorScheme.Value = scheme;
   }
 </script>
 
@@ -82,7 +86,7 @@
     <span class="sr-only">Toggle theme</span>
   </DropdownMenu.Trigger>
   <DropdownMenu.Content align="end">
-    {#each Object.values(LightMode) as value}
+    {#each Object.values(ColorScheme) as value}
       <DropdownMenu.Item
         class="cursor-pointer capitalize"
         onclick={() => evaluateLightSwitch(value)}>{value}</DropdownMenu.Item

src/lib/components/Turnstile.svelte

@@ -4,7 +4,7 @@
   import { PUBLIC_TURNSTILE_DEV_BYPASS_VALUE, PUBLIC_TURNSTILE_SITE_KEY } from '$env/static/public';
   import CloudflareLogo from '$lib/components/svg/CloudflareLogo.svelte';
   import LoadingCircle from '$lib/components/svg/LoadingCircle.svelte';
-  import { ColorSchemeStore, LightMode } from '$lib/stores/ColorSchemeStore';
+  import { ColorScheme, colorScheme } from '$lib/stores/ColorSchemeStore.svelte';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
 
@@ -28,7 +28,7 @@
   function renderTurnstile() {
     mounted = true;
 
-    const theme = $ColorSchemeStore === LightMode.System ? 'auto' : $ColorSchemeStore;
+    const theme = colorScheme.Value === ColorScheme.System ? 'auto' : colorScheme.Value;
 
     widgetId = window.turnstile!.render(element, {
       sitekey: PUBLIC_TURNSTILE_SITE_KEY,

src/lib/components/ui/sonner/sonner.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { ColorSchemeStore } from '$lib/stores/ColorSchemeStore';
+	import { colorScheme } from '$lib/stores/ColorSchemeStore.svelte';
 
 	let { ...restProps }: SonnerProps = $props();
 </script>
 
 <Sonner
-	theme={$ColorSchemeStore}
+	theme={colorScheme.Value}
 	class="toaster group"
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}

src/lib/init.ts

@@ -1,5 +1,5 @@
 import { browser } from '$app/environment';
-import { initializeDarkModeStore } from '$lib/stores/ColorSchemeStore';
+import { initializeDarkModeStore } from '$lib/stores/ColorSchemeStore.svelte';
 import { initializeSerialPortsStore } from '$lib/stores/SerialPortsStore';
 import { UserStore } from '$lib/stores/UserStore';
 import { get, writable } from 'svelte/store';

src/lib/stores/ColorSchemeStore.svelte.ts

@@ -0,0 +1,105 @@
+import { browser } from '$app/environment';
+import { isString } from '$lib/typeguards';
+
+export enum ColorScheme {
+  Dark = 'dark',
+  Light = 'light',
+  System = 'system',
+}
+
+function isColorSchemeEnum(value: unknown): value is ColorScheme {
+  if (!isString(value)) return false;
+  return Object.values(ColorScheme).includes(value as ColorScheme);
+}
+
+function getLocalStoreState(): ColorScheme {
+  // If we are not in a browser environment, return default
+  if (!browser) {
+    return ColorScheme.System;
+  }
+
+  // If the stored value is invalid, reset it and return default
+  const scheme = localStorage.getItem('theme');
+  if (!isColorSchemeEnum(scheme)) {
+    localStorage.setItem('theme', ColorScheme.System);
+    return ColorScheme.System;
+  }
+
+  return scheme;
+}
+
+export function getDarkReaderState() {
+  const rootHtml = document.documentElement;
+
+  const proxyInjected = rootHtml.getAttribute('data-darkreader-proxy-injected');
+  const metaElement = rootHtml.querySelector('head meta[name="darkreader"]');
+  const scheme = rootHtml.getAttribute('data-darkreader-scheme');
+
+  return {
+    isInjected: proxyInjected === 'true',
+    isActive: metaElement !== null,
+    scheme,
+  };
+}
+
+function resolveDarkMode(userPreference: ColorScheme): boolean {
+  if (userPreference !== ColorScheme.System) {
+    return userPreference !== ColorScheme.Light;
+  }
+
+  // If a user has Dark Reader extension installed, assume they prefer dark mode
+  const darkReaderState = getDarkReaderState();
+  if (darkReaderState.isInjected) {
+    return true;
+  }
+
+  // Check if the user has a system theme preference for light mode
+  if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+    return false;
+  }
+
+  // Default to dark mode
+  return true;
+}
+
+function setDarkMode(preference: ColorScheme) {
+  document.documentElement.classList.toggle('dark', resolveDarkMode(preference));
+}
+
+class ColorSchemeState {
+  #value;
+
+  constructor() {
+    this.#value = $state<ColorScheme>(getLocalStoreState());
+  }
+
+  get Value() {
+    return this.#value;
+  }
+  set Value(value: ColorScheme) {
+    localStorage.setItem('theme', value);
+    setDarkMode(value);
+  }
+}
+
+export const colorScheme = new ColorSchemeState();
+
+function handleMediaQueryChange() {
+  setDarkMode(getLocalStoreState());
+}
+export function initializeDarkModeStore() {
+  handleMediaQueryChange();
+
+  window
+    .matchMedia('(prefers-color-scheme: light)')
+    .addEventListener('change', handleMediaQueryChange);
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', handleMediaQueryChange);
+
+  window.addEventListener('storage', (event) => {
+    if (event.key !== 'theme') return;
+
+    setDarkMode(isColorSchemeEnum(event.newValue) ? event.newValue : ColorScheme.System);
+  });
+}