OSIT-AE-App-Svelte/src/lib/e_app_theme.svelte

<script lang="ts">

import {
        Moon, Sun
    } from '@lucide/svelte';

import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';

interface Props {
    set_theme_mode: any;
    set_theme_name: any;
}

let { 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 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';
            }

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


<!-- <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> -->

<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_c_LCI">LCI</option>
</select>
</div>

</section>