From 4906e45b619e99be7fe7b19fef5114994bc820ba Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 30 Apr 2025 17:44:55 -0400
Subject: [PATCH] More clean up. Set the z index.

---
 src/lib/element_theme.svelte | 33 +++++++++++++++++++++++++--------
 src/routes/+layout.svelte    |  4 +++-
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/lib/element_theme.svelte b/src/lib/element_theme.svelte
index 1aa6a8b0..d0eba0ca 100644
--- a/src/lib/element_theme.svelte
+++ b/src/lib/element_theme.svelte
@@ -26,7 +26,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
     document.documentElement.classList.add('dark');
 }
 -->
-<div>
+<section class="space-y-2">
     <button
         class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary"
         onclick={() => {
@@ -74,13 +74,12 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
             Change Theme
         </span>
     </button> -->
-</div>
 
 
-<section class="space-y-2">
-    <h2 class="strong">Theme:</h2>
-<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"
@@ -106,13 +105,30 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
         Dark
     </RadioItem>
 </RadioGroup>
-</div>
+</div> -->
 
 <div>
 <!-- Theme Name: -->
 <select
-    onchange={() => {
-        $slct_trigger = 'set_theme_name';
+    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);
+
+        // 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"
@@ -126,4 +142,5 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
     <option value="wintry">Wintry</option>
 </select>
 </div>
+
 </section>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2d86392e..a043da9f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -855,6 +855,7 @@ max-w-max -->
         hover:opacity-100
         duration-50 delay-1000 hover:delay-100 hover:ease-out
         transition hover:transition-all
+        z-10 hover:z-20
     "
     class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
     >
@@ -1052,6 +1053,7 @@ max-w-max -->
         hover:opacity-100
         duration-100 delay-1000 hover:delay-100 hover:ease-out
         transition hover:transition-all
+        z-20 hover:z-30
     "
     class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
     >
@@ -1255,7 +1257,7 @@ hover:opacity-100 -->
 
     font-size: .75rem;
 
-    z-index: 15;
+    /* z-index: 15; */
 
     /* NOTE: transition when no longer hovering */
     transition-property: opacity, background-color;