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"