use string instead of null for system setting (#2751)

Author: andrewzamojc

src/lib/components/dark-mode-icon-button.svelte

@@ -9,15 +9,15 @@
   } from '$lib/utilities/dark-mode';
 
   const buttonText = $derived(
-    $useDarkModePreference == null
+    $useDarkModePreference == 'system'
       ? translate('common.system-default')
       : $useDarkModePreference
         ? translate('common.night')
         : translate('common.day'),
   );
 
   const buttonIcon: IconName = $derived(
-    $useDarkModePreference == null
+    $useDarkModePreference == 'system'
       ? 'system-window'
       : $useDarkModePreference
         ? 'moon'

src/lib/components/dark-mode-navigation-button.svelte

@@ -8,15 +8,15 @@
   } from '$lib/utilities/dark-mode';
 
   const buttonText = $derived(
-    $useDarkModePreference == null
+    $useDarkModePreference == 'system'
       ? translate('common.system-default')
       : $useDarkModePreference
         ? translate('common.night')
         : translate('common.day'),
   );
 
   const buttonIcon: IconName = $derived(
-    $useDarkModePreference == null
+    $useDarkModePreference == 'system'
       ? 'system-window'
       : $useDarkModePreference
         ? 'moon'

src/lib/utilities/dark-mode/dark-mode.test.ts

@@ -25,16 +25,16 @@ describe('dark-mode utilities', () => {
   });
 
   describe('useDarkMode', () => {
-    it('should return true if prefers-color-scheme is dark and preference is null', () => {
+    it('should return true if prefers-color-scheme is dark and preference is system', () => {
       matchMediaMock.mockReturnValue({ matches: true }); // prefers dark
-      useDarkModePreference.set(null);
+      useDarkModePreference.set('system');
       const value = get(useDarkMode);
       expect(value).toBe(true);
     });
 
-    it('should return false if prefers-color-scheme is not dark and preference is null', () => {
+    it('should return false if prefers-color-scheme is not dark and preference is system', () => {
       matchMediaMock.mockReturnValue({ matches: false });
-      useDarkModePreference.set(null);
+      useDarkModePreference.set('system');
       const value = get(useDarkMode);
       expect(value).toBe(false);
     });
@@ -51,16 +51,16 @@ describe('dark-mode utilities', () => {
   });
 
   describe('getNextDarkModePreference', () => {
-    it('should return true if the current value is null', () => {
-      expect(getNextDarkModePreference(null)).toBe(true);
+    it('should return true if the current value is system', () => {
+      expect(getNextDarkModePreference('system')).toBe(true);
     });
 
     it('should return false if the current value is true', () => {
       expect(getNextDarkModePreference(true)).toBe(false);
     });
 
-    it('should return null if the current value is false', () => {
-      expect(getNextDarkModePreference(false)).toBe(null);
+    it('should return system if the current value is false', () => {
+      expect(getNextDarkModePreference(false)).toBe('system');
     });
   });
 

src/lib/utilities/dark-mode/dark-mode.ts

@@ -2,7 +2,7 @@ import { derived } from 'svelte/store';
 
 import { persistStore } from '$lib/stores/persist-store';
 
-type DarkModePreference = boolean | null;
+type DarkModePreference = boolean | 'system';
 
 export const useDarkModePreference = persistStore<DarkModePreference>(
   'dark mode',
@@ -13,7 +13,7 @@ export const useDarkModePreference = persistStore<DarkModePreference>(
 export const useDarkMode = derived(
   useDarkModePreference,
   ($useDarkModePreference) => {
-    if ($useDarkModePreference == null) {
+    if ($useDarkModePreference == 'system') {
       return (
         window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false
       );
@@ -24,7 +24,7 @@ export const useDarkMode = derived(
 );
 
 export const getNextDarkModePreference = (value: DarkModePreference) =>
-  value == null ? true : value == true ? false : null;
+  value == 'system' ? true : value == true ? false : 'system';
 
 export const darkMode = (node: HTMLElement) => {
   useDarkMode.subscribe((value) => {