255 lines
8.9 KiB
Svelte
255 lines
8.9 KiB
Svelte
<script lang="ts">
|
|
import { Minimize2, 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-surface-100 dark:bg-surface-800
|
|
text-surface-900 dark:text-surface-100
|
|
border-surface-200 dark:border-surface-700 flex
|
|
|
|
w-72 max-w-72 flex-col flex-wrap
|
|
items-end justify-center
|
|
|
|
gap-1 rounded-lg
|
|
border
|
|
p-1
|
|
shadow-md
|
|
|
|
transition-all delay-150 duration-300 hover:delay-1000
|
|
hover:ease-out
|
|
"
|
|
class:hidden={hide}>
|
|
<div
|
|
class:hidden={!expand}
|
|
class="flex w-full flex-row flex-wrap items-center justify-between gap-2">
|
|
<!-- 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_Firefly">Firefly ✦</option>
|
|
<option value="AE_Firefly_SteelBlue">Firefly SteelBlue ✦</option>
|
|
<option value="AE_Firefly_Indigo">Firefly Indigo ✦</option>
|
|
<option value="AE_Firefly_Rainbow">Firefly Rainbow ✨</option>
|
|
<option value="AE_Firefly_Axonius">Firefly Axonius ✦</option>
|
|
<option value="AE_Firefly_BGH">Firefly BGH ✦</option>
|
|
<!-- <option value="AE_Firefly_new-name">Firefly new-name ✦</option> -->
|
|
<option value="AE_c_IDAA_light">IDAA - light</option>
|
|
<option value="AE_c_LCI">LCI</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
class="flex w-full flex-row flex-wrap items-center gap-2"
|
|
class:justify-between={expand}
|
|
class:justify-end={!expand}>
|
|
{#if expand}
|
|
<!-- Hide theme options -->
|
|
<button
|
|
class="
|
|
btn btn-sm preset-tonal-secondary
|
|
hover:preset-filled-secondary-500 group
|
|
text-xs transition-all
|
|
"
|
|
onclick={() => {
|
|
expand = !expand;
|
|
}}
|
|
title="Hide Theme Options">
|
|
<!-- <span class="fas fa-compress-alt"></span> -->
|
|
<Minimize2 size="1em" class="m-1" />
|
|
<span
|
|
class="
|
|
hidden
|
|
text-xs
|
|
group-hover:inline-block
|
|
">
|
|
Hide Theme Options
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
class="
|
|
btn btn-sm preset-tonal-secondary
|
|
hover:preset-filled-secondary-500 group
|
|
text-xs transition-all
|
|
"
|
|
onclick={() => {
|
|
if ($ae_loc.theme_mode == 'light') {
|
|
$ae_loc.theme_mode = 'dark';
|
|
} else if ($ae_loc.theme_mode == 'dark') {
|
|
$ae_loc.theme_mode = 'light';
|
|
}
|
|
|
|
// DOM sync is handled reactively by the layout effect in +layout.svelte
|
|
}}
|
|
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 group-hover:inline-block md: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
|
|
text-xs
|
|
group-hover:inline-block
|
|
">
|
|
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>
|