feat(ThemeCreator): add force theme toggle

src/svelte-interface/components/Switch.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <div
-  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch select-none"
   data-ison={state}
   onclick={() => onChange(!state)}
   onkeydown={(e) => e.key === "Enter" && onChange(!state)}

src/svelte-interface/pages/themeCreator.svelte

@@ -2,6 +2,7 @@
   import { v4 as uuidv4 } from 'uuid';
   import { onMount } from 'svelte';
   import { slide } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
 
   import { type LoadedCustomTheme } from '@/types/CustomThemes'
 
@@ -86,7 +87,7 @@
     
   });
 
-  type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload';
+  type SettingType = 'switch' | 'button' | 'slider' | 'colourPicker' | 'select' | 'codeEditor' | 'imageUpload' | 'conditional' | 'lightDarkToggle';
 
   type SwitchProps = { state: boolean; onChange: (value: boolean) => void };
   type ButtonProps = { onClick: () => void; text: string };
@@ -94,8 +95,14 @@
   type ColourPickerProps = { color: string; onChange: (color: string) => void };
   type SelectProps = { options: Array<{ value: string; label: string }>; value: string; onChange: (value: string) => void };
   type CodeEditorProps = { value: string; onChange: (value: string) => void };
+  type LightDarkToggleProps = { state: boolean; onChange: (value: boolean) => void };
 
-  type ComponentProps = SwitchProps | ButtonProps | SliderProps | ColourPickerProps | SelectProps | CodeEditorProps;
+  type ConditionalProps = {
+    condition: boolean;
+    children: SettingItem;
+  };
+
+  type ComponentProps = SwitchProps | ButtonProps | SliderProps | ColourPickerProps | SelectProps | CodeEditorProps | LightDarkToggleProps | ConditionalProps;
 
   type SettingItem = {
     type: SettingType;
@@ -107,12 +114,20 @@
 </script>
 
 {#snippet settingItem(item: SettingItem)}
+  {#if item.type === 'conditional'}
+    {#if (item.props as ConditionalProps).condition }
+      <div transition:slide={{ duration: 300 }}>
+        {@render settingItem((item.props as ConditionalProps).children)}
+      </div>
+    {/if}
+  {:else}
     <div class="flex justify-between {item.direction === 'vertical' ? 'flex-col items-start' : 'items-center'} py-3">
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
         onclick={() => { item.direction === 'vertical' && toggleAccordion(item.title) }}
         onkeydown={(e) => { e.key === 'Enter' && item.direction === 'vertical' && toggleAccordion(item.title) }}
         class="flex justify-between pr-4 {item.direction === 'vertical' ? 'cursor-pointer w-full select-none' : ''}">
+
         <div>
           <h2 class="text-sm font-bold">{item.title}</h2>
           <p class="text-xs">{item.description}</p>
@@ -161,10 +176,27 @@
               <span class='dark:text-white'>Add image</span>
               <input type="file" accept='image/*' onchange={onImageUpload} class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
             </div>
+          {:else if item.type === 'lightDarkToggle'}
+            <button
+              class="relative px-4 py-1 overflow-hidden text-xl font-medium transition rounded-lg bg-zinc-200 dark:bg-zinc-700 hover:bg-zinc-300 dark:hover:bg-zinc-600 font-IconFamily"
+              onclick={() => (item.props as LightDarkToggleProps).onChange(!(item.props as LightDarkToggleProps).state)}
+            >
+              {#key (item.props as LightDarkToggleProps).state}
+                <span
+                  class="absolute"
+                  in:fade={{ duration: 150 }}
+                  out:fade={{ duration: 150 }}
+                >
+                  {(item.props as LightDarkToggleProps).state ? '\uec12' : '\uecfe'}
+                </span>
+              {/key}
+              <span class='opacity-0'>{'\uec12'}</span>
+            </button>
           {/if}
         </div>
       {/if}
     </div>
+  {/if}
 {/snippet}
 
 <div class='h-screen overflow-y-scroll {$settingsState.DarkMode && "dark"} '>
@@ -236,6 +268,21 @@
           onChange: (value: boolean) => theme = { ...theme, forceDark: value ? false : undefined }
         }
       },
+      {
+        type: 'conditional',
+        props: {
+          condition: theme.forceDark !== undefined,
+          children: {
+            type: 'lightDarkToggle',
+            title: 'Mode',
+            description: 'Choose whether to force light or dark mode',
+            props: {
+              state: theme.forceDark === true,
+              onChange: (value: boolean) => theme = { ...theme, forceDark: value }
+            }
+          }
+        }
+      },
       {
         type: 'colourPicker',
         title: 'Default Theme Colour',