Update all light/dark mode toggles to be light/dark (and not dark/light). Update theme page to initialize/sync showDarkMode based on the current setting

Author: techniq

packages/svelte-ux/src/lib/components/ThemeSelect.svelte

@@ -74,18 +74,18 @@
 
       <Switch
         id="switch-color-scheme"
-        checked={!$currentTheme.dark}
+        checked={$currentTheme.dark}
         on:change={(e) => {
-          let newTheme = e.target?.checked ? 'light' : 'dark';
+          let newTheme = e.target?.checked ? 'dark' : 'light';
           currentTheme.setTheme(newTheme);
         }}
         class="my-1"
         let:checked
       >
         {#if checked}
-          <Icon data={mdiWhiteBalanceSunny} size=".8rem" class="text-primary" />
-        {:else}
           <Icon data={mdiWeatherNight} size=".8rem" class="text-primary" />
+        {:else}
+          <Icon data={mdiWhiteBalanceSunny} size=".8rem" class="text-primary" />
         {/if}
       </Switch>
     </label>

packages/svelte-ux/src/lib/components/ThemeSwitch.svelte

@@ -10,17 +10,17 @@
 </script>
 
 <Switch
-  checked={!$currentTheme.dark}
+  checked={$currentTheme.dark}
   on:change={(e) => {
-    const newTheme = e.target?.checked ? 'light' : 'dark';
+    let newTheme = e.target?.checked ? 'dark' : 'light';
     currentTheme.setTheme(newTheme);
   }}
   let:checked
   {...$$restProps}
 >
   {#if checked}
-    <Icon data={mdiWhiteBalanceSunny} size=".8rem" class="text-primary" />
-  {:else}
     <Icon data={mdiWeatherNight} size=".8rem" class="text-primary" />
+  {:else}
+    <Icon data={mdiWhiteBalanceSunny} size=".8rem" class="text-primary" />
   {/if}
 </Switch>

packages/svelte-ux/src/routes/theme/+page.svelte

@@ -111,7 +111,7 @@
     selectedDarkThemeValue = darkThemes[1].value;
   }
 
-  let showDarkTheme = false;
+  $: showDarkTheme = $currentTheme.dark;
   $: selectedLightTheme = lightThemes.find((d) => d.value === selectedLightThemeValue)?.theme;
   $: selectedDarkTheme = darkThemes.find((d) => d.value === selectedDarkThemeValue)?.theme;
   $: previewTheme = showDarkTheme ? selectedDarkTheme : selectedLightTheme;