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

Moving on to the user sign in/out

Browse Source
This commit is contained in:
Scott Idem
2025-07-15 17:55:53 -04:00
parent 8692771efb
commit 7b853ede8c
5 changed files with 360 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/ae_stores.ts
View File

@@ -168,10 +168,15 @@ const ae_app_local_data_defaults: key_val = {
hide: false,
expand: false,
hide_access_type: false,
expand_access_type: false,
hide_edit_mode: false,
expand_edit_mode: false,
hide_user: false,
expand_user: false,
hide_theme: false,
hide_cfg: false,
expand_theme: false,
hide_app_cfg: false,
expand_app_cfg: false,
},
debug_menu: {
hide: false,

139
src/lib/e_app_cfg.svelte
View File

@@ -1,31 +1,47 @@
<script lang="ts">
import { onMount } from 'svelte';
import {
Settings
} from '@lucide/svelte';
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/e_app_theme.svelte';
// import Element_theme from '$lib/e_app_theme.svelte';
let notes: null|string = null;
let all: boolean = false;
// export let theme_mode: null|string = null;
export let set_theme_mode: null|boolean = null;
// export let theme_name: null|string = null;
export let set_theme_name: null|boolean = null;
interface Props {
log_lvl?: number;
hide?: null|boolean;
expand?: boolean;
// export let theme_mode: null|string = null;
// set_theme_mode?: null|boolean;
// export let theme_name: null|string = null;
// set_theme_name?: null|boolean;
}
let {
log_lvl = $bindable(0),
hide = $bindable(false),
expand = $bindable(false),
// set_theme_mode = null,
// set_theme_name = null
}: Props = $props();
// const dispatch = createEventDispatcher();
onMount(() => {
// console.log('** Element Mounted: ** Element App Config');
if (set_theme_mode) {
$slct_trigger = 'set_theme_mode';
}
if (set_theme_name) {
$slct_trigger = 'set_theme_name';
}
});
// onMount(() => {
// // console.log('** Element Mounted: ** Element App Config');
// if (set_theme_mode) {
// $slct_trigger = 'set_theme_mode';
// }
// if (set_theme_name) {
// $slct_trigger = 'set_theme_name';
// }
// });
// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) {
// console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`);
@@ -93,7 +109,7 @@ function handle_clear_storage(item: null|string) {
<!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
<section
id="xAE-App-Cfg"
id="AE-App-Cfg"
class="
ae_app_cfg
hidden-print
@@ -108,11 +124,12 @@ function handle_clear_storage(item: null|string) {
p-1 my-1
border-2 border-gray-200
"
class:hidden={hide}
>
<header
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
class="ae_header w-64 "
class:hidden={!expand}
class="ae_header w-full"
>
<h2 class="text-sm text-center font-semibold">
Config
@@ -122,7 +139,7 @@ function handle_clear_storage(item: null|string) {
<div
class="ae_cfg_content text-xs space-y-4 my-4"
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail}
class:hidden={!expand}
data-sveltekit-preload-data="false"
>
@@ -163,12 +180,7 @@ 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}
/>
<!-- END: Theme -->
<section class="space-y-2">
@@ -204,7 +216,7 @@ function handle_clear_storage(item: null|string) {
<button
class="btn btn-sm preset-tonal-warning"
title="Reload and clear the page cache"
on:click={() => {
onclick={() => {
// $ae_loc.
window.location.reload(true);
}}
@@ -218,7 +230,7 @@ function handle_clear_storage(item: null|string) {
<button
class="btn btn-sm preset-tonal-warning"
title="Clear the browser storage for this page"
on:click={() => {
onclick={() => {
if (!confirm('Are you sure you want to clear the local and session storage?')) {
return false;
}
@@ -246,17 +258,72 @@ function handle_clear_storage(item: null|string) {
</div>
<!-- class:justify-between={expand}
class:justify-end={!expand} -->
<div
class="flex flex-row gap-2 items-center justify-between w-full"
<button
class="btn btn-sm preset-tonal-warning ae_cfg_btn hover:transition-all"
on:click={() => {
$ae_loc.app_cfg.show_element__cfg_detail = !$ae_loc.app_cfg.show_element__cfg_detail;
}}
>
<span class="fas fa-cog mx-1"></span>
<span class="cfg_text">Config</span>
</button>
<!-- {#if !expand} -->
<span>
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret mx-1"></span> Super Access
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield mx-1"></span> Manager Access
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja mx-1"></span> Administrator Access
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-nurse mx-1"></span> Trusted Access
{:else if $ae_loc.access_type == 'authenticated'}
<span class="fas fa-user-friends mx-1"></span> Authenticated Access
{:else if $ae_loc.access_type == 'anonymous'}
<span class="fas fa-users mx-1"></span> Anonymous Access
{:else}
<span class="fas fa-unlock mx-1"></span> Unknown Access
{/if}
<!-- <button
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<span class="fas fa-lock mx-1"></span> Lock
</button> -->
{:else}
Not logged in
{/if}
</span>
<!-- {/if} -->
<button
class="
ae_cfg_btn
btn btn-sm
preset-tonal-warning
group transition-all
"
onclick={() => {
expand = !expand;
}}
>
<!-- <span class="fas fa-cog m-1"></span> -->
<span class="inline-block" title="Settings">
<Settings />
</span>
<span
class="
cfg_text
hidden
group-hover:inline
"
>
Settings
</span>
</button>
</div>
</section>
@@ -264,11 +331,11 @@ function handle_clear_storage(item: null|string) {
<style lang="postcss">
.ae_cfg_btn .cfg_text {
display: none;
/* display: none; */
}
.ae_cfg_btn:hover .cfg_text {
display: initial;
/* display: initial; */
/* outline: solid thin red; */
}

2
src/lib/e_app_sign_in_out.svelte
View File

@@ -341,7 +341,7 @@ async function handle_change_password() {
<!-- It is important to keep in mind that a Person can only fully sign in if they have a linked User record. -->
<!-- *:hover:inline -->
<section
id="xAE-Sign-In-Out"
id="AE-Sign-In-Out"
class="
ae_sign_in_out
hidden-print

118
src/lib/e_app_sys_menu.svelte
View File

@@ -27,6 +27,7 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Element_access_type from '$lib/e_app_access_type.svelte';
import Element_app_cfg from '$lib/e_app_cfg.svelte';
import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte';
import Element_theme from '$lib/e_app_theme.svelte';
// *** Setup Svelte properties
interface Props {
@@ -73,13 +74,13 @@ max-w-max -->
transition hover:transition-all
z-10 hover:z-20
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
class:hidden={!$ae_loc?.sys_menu?.expand_btn}
> -->
<!-- && !$ae_loc?.app_cfg?.show_element__menu -->
<!-- && !$ae_loc?.sys_menu?.expand -->
<!-- !$ae_loc
?.app_cfg?.show_element__menu_btn -->
?.sys_menu?.expand_btn -->
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
<!-- class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:hover:border-transparent={!$ae_loc?.sys_menu?.expand} -->
<!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section
@@ -116,19 +117,19 @@ max-w-max -->
duration-500 hover:duration-200
ease-in-out
"
class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
class:w-full={$ae_loc?.app_cfg?.show_element__menu}
class:top-0={$ae_loc?.sys_menu?.expand & 1 == 3}
class:w-full={$ae_loc?.sys_menu?.expand}
class:hidden={false}
class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
class:border-transparent={!$ae_loc?.sys_menu?.expand}
class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
class:hover:bg-transparent={!$ae_loc?.sys_menu?.expand}
>
<div
class:hidden={!$ae_loc?.show_element__menu && 1 == 3}
class:border-green-200={$ae_loc?.show_element__menu}
class:dark:border-green-800={$ae_loc?.show_element__menu}
class:hidden={!$ae_loc?.expand && 1 == 3}
class:border-green-200={$ae_loc?.expand}
class:dark:border-green-800={$ae_loc?.expand}
class="
hidden-print
flex flex-col items-end justify-end
@@ -160,9 +161,9 @@ max-w-max -->
{#if $ae_loc?.person_id || $ae_loc?.user_id}
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
class:hover:visible={$ae_loc?.app_cfg?.show_element__menu}
class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
class:hidden={!$ae_loc?.sys_menu?.expand}
class:hover:visible={$ae_loc?.sys_menu?.expand}
class:invisible={!$ae_loc?.sys_menu?.expand}
class="w-48"
title="
@@ -263,14 +264,14 @@ max-w-max -->
// trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if (!$ae_loc?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true;
// $ae_loc.app_cfg.show_element__menu_btn = false;
if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
@@ -288,9 +289,9 @@ max-w-max -->
onclick={() => {
trigger_clear_access = true;
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
if ($ae_loc?.sys_menu?.expand_btn) {
$ae_loc.sys_menu.expand = true;
$ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
@@ -300,8 +301,8 @@ max-w-max -->
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.sys_menu.expand = false;
$ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
@@ -316,9 +317,9 @@ max-w-max -->
<button
type="button"
onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
if ($ae_loc?.sys_menu?.expand_btn) {
$ae_loc.sys_menu.expand = true;
$ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
@@ -327,10 +328,10 @@ max-w-max -->
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.sys_menu.expand = false;
$ae_loc.sys_menu.expand_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
}}
class="
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
@@ -348,13 +349,13 @@ max-w-max -->
</span>
<!-- <div> -->
<!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:visible={$ae_loc?.sys_menu?.expand} -->
<!-- class:invisible={!$ae_loc?.sys_menu?.expand} -->
<!-- class:hover:visible={true} -->
<!-- invisible -->
<button
type="button"
class:w-48={$ae_loc?.app_cfg?.show_element__menu}
class:w-48={$ae_loc?.sys_menu?.expand}
class="
btn btn-sm
@@ -364,9 +365,9 @@ max-w-max -->
"
title="Show or hide the menu"
onclick={async () => {
if (!$ae_loc?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true;
// $ae_loc.app_cfg.show_element__menu_btn = false;
if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') {
@@ -381,15 +382,15 @@ max-w-max -->
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
$ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
}}
>
<span class=" *:hover:inline-block">
{#if $ae_loc?.app_cfg?.show_element__menu}
{#if $ae_loc?.sys_menu?.expand}
<CircleX class="inline-block" />
<span class="inline-block">
Hide Menu
@@ -439,7 +440,7 @@ max-w-max -->
z-20 hover:z-30
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
class:hidden={!$ae_loc?.sys_menu?.expand}
>
<button
@@ -447,18 +448,18 @@ max-w-max -->
class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
title="Sign In"
onclick={() => {
if (!$ae_loc?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true;
// $ae_loc.app_cfg.show_element__menu_btn = false;
if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
// $ae_loc.sys_menu.expand = !$ae_loc?.sys_menu?.expand;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
{#if $ae_loc?.sys_menu?.expand}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
@@ -473,17 +474,28 @@ max-w-max -->
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
class:hidden={!$ae_loc.edit_mode}
>
<Element_app_cfg
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
/>
<Element_theme
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
set_theme_mode={true}
set_theme_name={true}
/>
/>
<!-- END: Theme -->
</span>
<!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out
hide={$ae_loc.sys_menu.hide_user}
expand={$ae_loc.sys_menu.expand_user}
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
@@ -491,9 +503,11 @@ max-w-max -->
{#if $ae_loc?.app_cfg?.show_element__access_type}
<Element_access_type
hide={$ae_loc.sys_menu.hide_access_type}
expand={$ae_loc.sys_menu.expand_access_type}
show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
trigger_clear_access={trigger_clear_access}
hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.sys_menu?.expand}
/>
{/if}

275
src/lib/e_app_theme.svelte
View File

@@ -7,11 +7,20 @@ import {
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
interface Props {
log_lvl?: number;
hide?: null|boolean;
expand?: boolean;
set_theme_mode: any;
set_theme_name: any;
}
let { set_theme_mode, set_theme_name }: Props = $props();
let {
log_lvl = $bindable(0),
hide = $bindable(false),
expand = $bindable(false),
set_theme_mode,
set_theme_name
}: Props = $props();
</script>
@@ -25,54 +34,183 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
document.documentElement.classList.add('dark');
}
-->
<section class="space-y-2">
<button
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500"
onclick={() => {
if ($ae_loc.theme_mode == 'light') {
$ae_loc.theme_mode = 'dark';
} else if ($ae_loc.theme_mode == 'dark') {
$ae_loc.theme_mode = 'light';
}
<section
id="AE-App-Theme"
class="
ae_app_theme
hidden-print
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');
}
bg-blue-100 text-gray-900
dark:bg-blue-800 dark:text-gray-200
flex flex-col flex-wrap gap-1
items-end justify-end
w-72 max-w-72
p-1 my-1
border-2 border-gray-200
transition-all
"
class:hidden={hide}
>
<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);
// 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');
// }
}}
title="Change light and dark mode"
bind:value={$ae_loc.theme_name}
class="select"
class:hidden={!expand}
title="Theme name"
>
<!-- <span class="fas fa-adjust"></span> -->
{#if $ae_loc.theme_mode == 'light'}
<Sun />
<span class="hidden md:inline-block">Light Mode</span>
{:else if $ae_loc.theme_mode == 'dark'}
<Moon />
<span class="hidden md:inline-block">Dark Mode</span>
{/if}
<span class="hidden md:inline-block">
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> -->
<option value="">-- None --</option>
<option value="cerberus">Cerberus</option>
<option value="concord">Concord</option>
<option value="crimson">Crimson</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="nouveau">Nouveau</option>
<option value="rocket">Rocket</option>
<option value="terminus">Terminus</option>
<option value="vintage">Vintage</option>
<option value="wintry">Wintry</option>
<!-- <option value="ae_c_osit">OSIT</option> -->
<option value="AE_OSIT_default">OSIT</option>
<option value="AE_c_LCI">LCI</option>
</select>
</div>
<div
class="flex flex-row flex-wrap gap-2 items-center w-full"
class:justify-between={expand}
class:justify-end={!expand}
>
{#if expand}
<!-- Hide theme options -->
<button
class="
btn btn-sm text-xs
preset-tonal-secondary hover:preset-filled-secondary-500
transition-all group
"
onclick={() => {
expand = !expand;
}}
title="Hide Theme Options"
>
<!-- <span class="fas fa-compress-alt"></span> -->
<span class="fas fa-compress-arrows-alt m-1"></span>
<span
class="
hidden
group-hover:inline-block
text-xs
"
>
Hide Theme Options
</span>
</button>
<button
class="
btn btn-sm text-xs
preset-tonal-secondary hover:preset-filled-secondary-500
transition-all group
"
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-block group-hover:inline-block">Light Mode</span>
{:else if $ae_loc.theme_mode == 'dark'}
<Moon />
<span class="hidden group-hover:inline-block">Dark Mode</span>
{/if}
<span
class="
hidden
group-hover:inline-block
text-xs
"
>
Change
</span>
</button>
{:else}
<button
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 group"
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');
}
expand = !expand;
}}
title="Change light and dark mode"
>
{#if $ae_loc.theme_mode == 'light'}
<span class="inline-block" title="Light Mode">
<Sun />
</span>
<span class="hidden group-hover:inline-block">Light Mode</span>
{:else if $ae_loc.theme_mode == 'dark'}
<span class="inline-block" title="Dark Mode">
<Moon />
</span>
<span class="hidden group-hover:inline-block">Dark Mode</span>
{/if}
</button>
{/if}
</div>
<!-- <section class="space-y-2">
@@ -106,51 +244,6 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
</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);
// 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');
// }
}}
bind:value={$ae_loc.theme_name}
class="select"
title="Theme name"
>
<option value="">-- None --</option>
<option value="cerberus">Cerberus</option>
<option value="concord">Concord</option>
<option value="crimson">Crimson</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="nouveau">Nouveau</option>
<option value="rocket">Rocket</option>
<option value="terminus">Terminus</option>
<option value="vintage">Vintage</option>
<option value="wintry">Wintry</option>
<!-- <option value="ae_c_osit">OSIT</option> -->
<option value="AE_OSIT_default">OSIT</option>
<option value="AE_c_LCI">LCI</option>
</select>
</div>
</section>