From fec08fdfbf02266913e988aa2095621ce1bec077 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 8 Apr 2026 16:38:12 -0400
Subject: [PATCH] Respect site cfg_json theme on first-run; add
 user_theme_selected flag; set flag when user selects theme or URL param

---
 src/lib/app_components/e_app_sys_bar.svelte | 10 ++++----
 src/lib/app_components/e_app_theme.svelte   | 27 +++------------------
 src/lib/stores/ae_stores.ts                 |  3 +++
 src/routes/+layout.svelte                   | 11 ++++++---
 4 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index 9011d3b3..af0271b1 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -440,11 +440,11 @@ const theme_options = [
                             </div>
                             <select
                                 bind:value={$ae_loc.theme_name}
-                                onchange={(e) =>
-                                    document.documentElement.setAttribute(
-                                        'data-theme',
-                                        (e.target as HTMLSelectElement).value
-                                    )}
+                                onchange={(e) => {
+                                    const v = (e.target as HTMLSelectElement).value;
+                                    document.documentElement.setAttribute('data-theme', v);
+                                    ae_loc.update((l: any) => ({ ...l, theme_name: v, user_theme_selected: true }));
+                                }}
                                 class="select w-full border border-gray-300 bg-white text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
                                 {#each theme_options as opt (opt.value)}
                                     <option value={opt.value}
diff --git a/src/lib/app_components/e_app_theme.svelte b/src/lib/app_components/e_app_theme.svelte
index 7171dac3..8db503b8 100644
--- a/src/lib/app_components/e_app_theme.svelte
+++ b/src/lib/app_components/e_app_theme.svelte
@@ -66,30 +66,11 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
         </span>
         <select
             onchange={(event) => {
-                // $slct_trigger = 'set_theme_name';
-
                 let new_theme_name = (event.target as HTMLInputElement).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);
-
-                // NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
-                document.documentElement.setAttribute(
-                    'data-theme',
-                    new_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');
-                // }
+                // Update the HTML attribute for Tailwind/Skeleton runtime.
+                document.documentElement.setAttribute('data-theme', new_theme_name);
+                // Persist into the ae_loc store and mark user selection so site defaults don't overwrite.
+                ae_loc.update((l: any) => ({ ...l, theme_name: new_theme_name, user_theme_selected: true }));
             }}
             bind:value={$ae_loc.theme_name}
             class="select w-32"
diff --git a/src/lib/stores/ae_stores.ts b/src/lib/stores/ae_stores.ts
index ccc5f22f..56d66995 100644
--- a/src/lib/stores/ae_stores.ts
+++ b/src/lib/stores/ae_stores.ts
@@ -68,6 +68,9 @@ const ae_app_local_data_defaults: key_val = {
     theme: 'light',
     theme_mode: 'light',
     theme_name: 'AE_Firefly', // OSIT default theme
+    // When true the user has explicitly chosen a theme (dropdown or URL param).
+    // Use this to avoid overwriting an explicit user choice with a site default.
+    user_theme_selected: false,
     font_size_mode: 'default', // 'default' | 'larger' | 'smaller'
     iframe: false,
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9f8439b9..b8fcb8bb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -316,9 +316,14 @@ $effect(() => {
     const url_theme = data.url.searchParams.get('theme');
     const url_theme_mode = data.url.searchParams.get('theme_mode');
     if (url_theme || url_theme_mode) {
-        if (url_theme) $ae_loc.theme_name = url_theme;
-        if (url_theme_mode === 'light' || url_theme_mode === 'dark')
-            $ae_loc.theme_mode = url_theme_mode;
+        if (url_theme) {
+            // Mark that the user (or URL) explicitly chose a theme so site defaults
+            // won't overwrite it later on subsequent loads.
+            ae_loc.update((l: any) => ({ ...l, theme_name: url_theme, user_theme_selected: true }));
+        }
+        if (url_theme_mode === 'light' || url_theme_mode === 'dark') {
+            ae_loc.update((l: any) => ({ ...l, theme_mode: url_theme_mode }));
+        }
         const clean_url = new URL(data.url.href);
         clean_url.searchParams.delete('theme');
         clean_url.searchParams.delete('theme_mode');