Fix lightmode warning logic and code cleanup

Author: hhvrc

src/lib/components/LightSwitch.svelte

@@ -4,15 +4,11 @@
   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,
-    getDarkReaderState,
-    willActivateLightMode,
-  } from '$lib/stores/ColorSchemeStore';
+  import { ColorSchemeStore, LightMode, getDarkReaderState } from '$lib/stores/ColorSchemeStore';
   import { cn } from '$lib/utils';
   import { toast } from 'svelte-sonner';
 
-  let pendingScheme = $state<'light' | 'dark' | 'system' | undefined>();
+  let pendingScheme = $state<LightMode | undefined>();
   function handleOpenChanged(open: boolean) {
     if (open) return;
     pendingScheme = undefined;
@@ -22,8 +18,33 @@
     ColorSchemeStore.set(pendingScheme);
     pendingScheme = undefined;
   }
-  function evaluateLightSwitch(scheme: 'light' | 'dark' | 'system') {
-    if (willActivateLightMode(scheme) && scheme !== $ColorSchemeStore) {
+
+  // Decision matrix
+  //        light  dark system pending
+  //  light false false  false
+  //   dark true  false  check
+  // system check false  false
+  // current
+  function isGoingNuclear(current: LightMode, pending: LightMode) {
+    // There will definetly be no transition from dark -> light
+    if (current === pending || current === LightMode.Light || pending === LightMode.Dark)
+      return false;
+
+    const currentDark = current === LightMode.Dark;
+    const pendingLight = pending === LightMode.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
+    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+      // System prefers lightmode, if the current mode is dark the transition will happen
+      return currentDark;
+    }
+
+    // system prefers darkmode, if pending is light then the transition will happen
+    return pendingLight;
+  }
+  function evaluateLightSwitch(scheme: LightMode) {
+    if (isGoingNuclear($ColorSchemeStore, scheme)) {
       const darkreader = getDarkReaderState();
       if (darkreader.isActive) {
         toast.warning('DarkReader is enabled, activating light mode will have no effect!');
@@ -61,14 +82,11 @@
     <span class="sr-only">Toggle theme</span>
   </DropdownMenu.Trigger>
   <DropdownMenu.Content align="end">
-    <DropdownMenu.Item class="cursor-pointer" onclick={() => evaluateLightSwitch('light')}
-      >Light</DropdownMenu.Item
-    >
-    <DropdownMenu.Item class="cursor-pointer" onclick={() => evaluateLightSwitch('dark')}
-      >Dark</DropdownMenu.Item
-    >
-    <DropdownMenu.Item class="cursor-pointer" onclick={() => evaluateLightSwitch('system')}
-      >System</DropdownMenu.Item
-    >
+    {#each Object.values(LightMode) as value}
+      <DropdownMenu.Item
+        class="cursor-pointer capitalize"
+        onclick={() => evaluateLightSwitch(value)}>{value}</DropdownMenu.Item
+      >
+    {/each}
   </DropdownMenu.Content>
 </DropdownMenu.Root>

src/lib/components/Turnstile.svelte

@@ -4,10 +4,11 @@
   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 } from '$lib/stores/ColorSchemeStore';
+  import { ColorSchemeStore, LightMode } from '$lib/stores/ColorSchemeStore';
   import type { TurnstileInstance } from '$lib/types/TurnstileInstance';
   import { onMount } from 'svelte';
   import { toast } from 'svelte-sonner';
+  import LightSwitch from './LightSwitch.svelte';
 
   interface Props {
     action: string;
@@ -47,10 +48,9 @@
     setTimeout(resetWidget, 5000);
   }
 
-  let cfColorScheme = $derived($ColorSchemeStore === 'system' ? 'auto' : $ColorSchemeStore) as
-    | 'dark'
-    | 'light'
-    | 'auto';
+  let cfColorScheme = $derived(
+    $ColorSchemeStore === LightMode.System ? 'auto' : $ColorSchemeStore
+  ) as 'dark' | 'light' | 'auto';
 
   $effect(() => {
     if (!turnstile || !element || widgetState != 'mounted' || widgetId) return;

src/lib/stores/ColorSchemeStore.ts

@@ -1,27 +1,29 @@
 import { browser } from '$app/environment';
 import { type Updater, writable } from 'svelte/store';
 
-function getLocalStoreState() {
+export enum LightMode {
+  Dark = 'dark',
+  Light = 'light',
+  System = 'system',
+}
+
+function getLocalStoreState(): LightMode {
   const scheme = localStorage.getItem('theme');
-  if (scheme === 'dark' || scheme === 'light' || scheme === 'system') {
-    return scheme;
+  if (scheme !== null && Object.values(LightMode).includes(scheme as LightMode)) {
+    return scheme as LightMode;
   }
 
-  localStorage.setItem('theme', 'system');
+  localStorage.setItem('theme', LightMode.System);
 
-  return 'system';
+  return LightMode.System;
 }
 
 export function getDarkReaderState() {
   const rootHtml = document.documentElement;
 
   const proxyInjected = rootHtml.getAttribute('data-darkreader-proxy-injected');
   const metaElement = rootHtml.querySelector('head meta[name="darkreader"]');
-
-  let scheme = rootHtml.getAttribute('data-darkreader-scheme');
-  if (scheme === 'auto') {
-    scheme = 'system';
-  }
+  const scheme = rootHtml.getAttribute('data-darkreader-scheme');
 
   return {
     isInjected: proxyInjected === 'true',
@@ -30,58 +32,56 @@ export function getDarkReaderState() {
   };
 }
 
-function getColorSchemePreference() {
+function getColorSchemePreference(): LightMode {
   // If we are not in a browser environment, return default
   if (!browser) {
-    return 'system';
+    return LightMode.System;
   }
 
   // Check if local storage has a theme stored
   const localStoreState = getLocalStoreState();
-  if (localStoreState !== 'system') {
+  if (localStoreState !== LightMode.System) {
     return localStoreState;
   }
 
   // If a user has Dark Reader extension installed, assume they prefer dark mode
   const darkReaderState = getDarkReaderState();
   if (darkReaderState.isInjected) {
-    return 'dark';
+    return LightMode.Dark;
   }
 
   // Check if the user has a system theme preference for light mode
   if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-    return 'light';
+    return LightMode.Light;
   }
 
   // Default to dark mode
-  return 'dark';
+  return LightMode.Dark;
 }
 
-const { set, update, subscribe } = writable<'dark' | 'light' | 'system'>(
-  getColorSchemePreference()
-);
+const { set, update, subscribe } = writable<LightMode>(getColorSchemePreference());
 
 function setHtmlDarkModeSelector(value: boolean) {
   document.documentElement.classList.toggle('dark', value);
 }
 
 function handleSchemePreferenceChange() {
   const scheme = getColorSchemePreference();
-  setHtmlDarkModeSelector(scheme === 'dark');
+  setHtmlDarkModeSelector(scheme === LightMode.Dark);
 }
 
 export const ColorSchemeStore = {
-  set: (value: 'dark' | 'light' | 'system') => {
+  set: (value: LightMode) => {
     localStorage.setItem('theme', value);
     set(value);
     handleSchemePreferenceChange();
   },
-  update: (updater: Updater<'dark' | 'light' | 'system'>) => {
+  update: (updater: Updater<LightMode>) => {
     update((value) => {
       const oldValue = value;
       const newValue = updater(value);
       if (oldValue !== newValue) {
-        setHtmlDarkModeSelector(newValue === 'dark');
+        setHtmlDarkModeSelector(newValue === LightMode.Dark);
         localStorage.setItem('theme', newValue);
       }
       return newValue;
@@ -90,16 +90,9 @@ export const ColorSchemeStore = {
   subscribe,
 };
 
-export function willActivateLightMode(value: 'dark' | 'light' | 'system') {
-  return (
-    value === 'light' ||
-    (value === 'system' && window.matchMedia('(prefers-color-scheme: light)').matches)
-  );
-}
-
 export function initializeDarkModeStore() {
   const schemePreference = getColorSchemePreference();
-  setHtmlDarkModeSelector(schemePreference === 'dark');
+  setHtmlDarkModeSelector(schemePreference === LightMode.Dark);
 
   window
     .matchMedia('(prefers-color-scheme: light)')
@@ -111,6 +104,6 @@ export function initializeDarkModeStore() {
   window.addEventListener('storage', (event) => {
     if (event.key !== 'theme') return;
 
-    setHtmlDarkModeSelector(event.newValue === 'dark');
+    setHtmlDarkModeSelector(event.newValue === LightMode.Dark);
   });
 }