Got themes working again.

src/lib/ae_journals/ae_journals__journal.ts

@@ -591,9 +591,11 @@ export function db_save_ae_obj_li__journal(
                 passcode_write: obj.passcode_write,
                 passcode_write_expire: obj.passcode_write_expire,
 
-                passcode: obj.passcode,
+                passcode: obj.passcode, // For Journal Entry encryption password
                 passcode_timeout: obj.passcode_timeout,
 
+                auth_key: obj.auth_key, // For Journal authorization without sign in
+
                 enable: obj.enable,
                 hide: obj.hide,
                 priority: obj.priority,

src/lib/ae_journals/db_journals.ts

@@ -68,9 +68,11 @@ export interface Journal {
     passcode_write?: null|string;
     passcode_write_expire?: null|Date
 
-    passcode?: null|string;
+    passcode?: null|string; // For Journal Entry encryption password
     passcode_timeout?: null|number; // Timeout in seconds
 
+    auth_key?: null|string; // For Journal authorization without sign in
+
     enable: null|boolean;
     hide?: null|boolean;
     archive?: null|boolean; // Archive the journal

src/lib/ae_stores.ts

@@ -48,7 +48,7 @@ export let ae_snip = string_snippets;
 
 // Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page.
 let ver = '2025-04-30_1320'; // KEEP: 2025-04-18_1335 and 2025-04-29_1545
-let ver_idb = '2025-04-18_1100'; // Not used
+let ver_idb = '2025-04-18_1100'; // Not currently used
 
 // *** BEGIN *** Longer-term app data. This should be stored to local storage.
 const ae_app_local_data_defaults: key_val = {

src/lib/element_app_cfg.svelte

@@ -5,6 +5,8 @@ import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
+import Element_theme from '$lib/element_theme.svelte';
+
 let notes: null|string = null;
 let all: boolean = false;
 
@@ -159,57 +161,11 @@ function handle_clear_storage(item: null|string) {
 </section>
 <!-- END: Access Type -->
 
+<Element_theme
+    set_theme_mode={set_theme_mode}
+    set_theme_name={set_theme_name}
+    />
 
-<section class="space-y-2">
-    <h2 class="strong">Theme:</h2>
-<div>
-<!-- Light/Dark Theme: -->
-<RadioGroup
-    active="variant-glass-success"
-    hover="hover:variant-ringed-surface"
-    >
-    <RadioItem
-        on:change={() => {
-            $slct_trigger = 'set_theme_mode';
-        }}
-        bind:group={$ae_loc.app_cfg.theme_mode}
-        name="theme_light"
-        value={'light'}
-        >
-        Light
-    </RadioItem>
-    <RadioItem
-        on:change={() => {
-            $slct_trigger = 'set_theme_mode';
-        }}
-        bind:group={$ae_loc.app_cfg.theme_mode}
-        name="theme_dark"
-        value={'dark'}
-        >
-        Dark
-    </RadioItem>
-</RadioGroup>
-</div>
-
-<div>
-<!-- Theme Name: -->
-<select
-    on:change={() => {
-        $slct_trigger = 'set_theme_name';
-    }}
-    bind:value={$ae_loc.app_cfg.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>
 <!-- END: Theme -->
 
 

src/lib/element_theme.svelte

@@ -0,0 +1,129 @@
+<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');
+}
+-->
+<div>
+    <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> -->
+</div>
+
+
+<section class="space-y-2">
+    <h2 class="strong">Theme:</h2>
+<div>
+<!-- Light/Dark Theme: -->
+<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={() => {
+        $slct_trigger = 'set_theme_name';
+    }}
+    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>