Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Respect site cfg_json theme on first-run; add user_theme_selected flag; set flag when user selects theme or URL param

Browse Source
This commit is contained in:
Scott Idem
2026-04-08 16:38:12 -04:00
parent 32ed4e47a8
commit fec08fdfbf
4 changed files with 20 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -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}

27
src/lib/app_components/e_app_theme.svelte
View File

@@ -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"

3
src/lib/stores/ae_stores.ts
View File

@@ -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,

11
src/routes/+layout.svelte
View File

@@ -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');