Pulling out parts into separate files. Also minor clean up.

src/lib/e_app_theme.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
+
+import {
+        Moon, Sun
+    } from '@lucide/svelte';
+
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+
+interface Props {
+    set_theme_mode: any;
+    set_theme_name: any;
+}
+
+let { set_theme_mode, set_theme_name }: Props = $props();
+
+</script>
+
+<!-- Change light and dark mode -->
+<!--
+if ($ae_loc.app_cfg.theme_mode == 'light') {
+    document.documentElement.classList.remove('dark');
+    document.documentElement.classList.add('light');
+} else if ($ae_loc.app_cfg.theme_mode == 'dark') {
+    document.documentElement.classList.remove('light');
+    document.documentElement.classList.add('dark');
+}
+-->
+<section class="space-y-2">
+    <button
+        class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary"
+        onclick={() => {
+            if ($ae_loc.theme_mode == 'light') {
+                $ae_loc.theme_mode = 'dark';
+            } else if ($ae_loc.theme_mode == 'dark') {
+                $ae_loc.theme_mode = 'light';
+            }
+
+            if ($ae_loc.theme_mode == 'light') {
+                document.documentElement.classList.remove('dark');
+                document.documentElement.classList.add('light');
+            } else if ($ae_loc.theme_mode == 'dark') {
+                document.documentElement.classList.remove('light');
+                document.documentElement.classList.add('dark');
+            }
+        }}
+        title="Change light and dark mode"
+        >
+        <!-- <span class="fas fa-adjust"></span> -->
+        {#if $ae_loc.theme_mode == 'light'}
+            <Sun />
+            <span class="hidden md:inline">Light Mode</span>
+        {:else if $ae_loc.theme_mode == 'dark'}
+            <Moon />
+            <span class="hidden md:inline">Dark Mode</span>
+        {/if}
+        <span class="hidden md:inline">
+            Change Theme
+        </span>
+    </button>
+    <!-- <button
+        class="btn btn-sm variant-ghost-surface hover:variant-filled-success"
+        onclick={() => {
+            if ($ae_loc.app_cfg.theme_mode == 'light') {
+                $ae_loc.app_cfg.theme_mode = 'dark';
+            } else if ($ae_loc.app_cfg.theme_mode == 'dark') {
+                $ae_loc.app_cfg.theme_mode = 'light';
+            }
+        }}
+        title="Change light and dark mode"
+        >
+        <span class="fas fa-adjust"></span>
+        <span class="hidden md:inline">
+            Change Theme
+        </span>
+    </button> -->
+
+
+<!-- <section class="space-y-2">
+    <h2 class="strong">Theme:</h2> -->
+<!-- Light/Dark Theme: -->
+<!-- <div>
+<RadioGroup
+    active="variant-glass-success"
+    hover="hover:variant-ringed-surface"
+    >
+    <RadioItem
+        onchange={() => {
+            $slct_trigger = 'set_theme_mode';
+        }}
+        bind:group={$ae_loc.theme_mode}
+        name="theme_light"
+        value={'light'}
+        >
+        Light
+    </RadioItem>
+    <RadioItem
+        onchange={() => {
+            $slct_trigger = 'set_theme_mode';
+        }}
+        bind:group={$ae_loc.theme_mode}
+        name="theme_dark"
+        value={'dark'}
+        >
+        Dark
+    </RadioItem>
+</RadioGroup>
+</div> -->
+
+<div>
+<!-- Theme Name: -->
+<select
+    onchange={(event) => {
+        // $slct_trigger = 'set_theme_name';
+
+        let new_theme_name = event.target.value;
+        // document.documentElement.theme = new_theme_name;
+
+        console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
+        // $slct_trigger = null;
+        // Update the body attribute named "data-theme" to the current theme name.
+        document.body.setAttribute('data-theme', new_theme_name);
+        // document.body.setAttribute('data-theme', $ae_loc?.theme_name);
+
+        // if ($ae_loc.theme_mode == 'light') {
+        //     document.documentElement.classList.remove('dark');
+        //     document.documentElement.classList.add('light');
+        // } else if ($ae_loc.theme_mode == 'dark') {
+        //     document.documentElement.classList.remove('light');
+        //     document.documentElement.classList.add('dark');
+        // }
+    }}
+    bind:value={$ae_loc.theme_name}
+    class="select"
+    title="Theme name"
+    >
+    <option value="">-- None --</option>
+    <option value="gold-nouveau">Gold Nouveau</option>
+    <option value="hamlindigo">Hamlindigo</option>
+    <option value="modern">Modern</option>
+    <option value="rocket">Rocket</option>
+    <option value="wintry">Wintry</option>
+</select>
+</div>
+
+</section>