248 lines
8.6 KiB
Svelte
248 lines
8.6 KiB
Svelte
<script lang="ts">
|
|
import { Moon, Sun } from '@lucide/svelte';
|
|
|
|
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
|
|
|
interface Props {
|
|
log_lvl?: number;
|
|
hide?: null | boolean;
|
|
expand?: boolean;
|
|
set_theme_mode: any;
|
|
set_theme_name: any;
|
|
}
|
|
|
|
let {
|
|
log_lvl = $bindable(0),
|
|
hide = $bindable(false),
|
|
expand = $bindable(false),
|
|
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');
|
|
}
|
|
-->
|
|
<section
|
|
id="AE-App-Theme"
|
|
class="
|
|
ae_app_theme
|
|
hidden-print
|
|
|
|
bg-blue-100 text-gray-900
|
|
dark:bg-blue-800 dark:text-gray-200
|
|
|
|
flex flex-col flex-wrap gap-1
|
|
items-end justify-center
|
|
|
|
w-72 max-w-72
|
|
p-1
|
|
border-2 border-gray-200
|
|
|
|
duration-300 delay-150 hover:delay-1000 hover:ease-out
|
|
transition-all
|
|
"
|
|
class:hidden={hide}
|
|
>
|
|
<div
|
|
class:hidden={!expand}
|
|
class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
|
|
>
|
|
<!-- Theme Name: -->
|
|
<span class="text-sm font-semibold">
|
|
{$ae_loc.theme_name}
|
|
</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');
|
|
// }
|
|
}}
|
|
bind:value={$ae_loc.theme_name}
|
|
class="select w-32"
|
|
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_IDAA_light">IDAA - light</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 class="m-1" />
|
|
<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
|
|
{:else if $ae_loc.theme_mode == 'dark'}
|
|
<Moon class="m-1" />
|
|
<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">
|
|
<h2 class="strong">Theme:</h2> -->
|
|
<!-- Light/Dark Theme: -->
|
|
<!-- <div>
|
|
<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> -->
|
|
</section>
|