The sys menu finally looks and works better. Still needs more work though... Finally done for the week....?

src/lib/e_app_access_type.svelte

@@ -273,7 +273,10 @@ function handle_clear_access() {
     class="
         ae_access_type
         hidden-print
+
         bg-blue-100 text-gray-900
+        dark:bg-blue-800 dark:text-gray-200
+
         duration-300 delay-150 hover:delay-1000 hover:ease-out
         transition-all hover:transition-all
         flex flex-col flex-wrap gap-1

src/lib/e_app_cfg.svelte

@@ -97,7 +97,10 @@ function handle_clear_storage(item: null|string) {
     class="
         ae_app_cfg
         hidden-print
+
         bg-blue-100 text-gray-900
+        dark:bg-blue-800 dark:text-gray-200
+
         transition hover:transition-all
         flex flex-col flex-wrap gap-1
         items-center justify-center

src/lib/e_app_sign_in_out.svelte

@@ -345,7 +345,10 @@ async function handle_change_password() {
     class="
         ae_sign_in_out
         hidden-print
+
         bg-blue-100 text-gray-900
+        dark:bg-blue-800 dark:text-gray-200
+
         transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all
         flex flex-col flex-wrap gap-1
         items-end justify-center

src/lib/e_app_sys_menu.svelte

@@ -88,7 +88,7 @@ max-w-max -->
         z-50
         absolute bottom-0 right-0
 
-        opacity-60
+        opacity-90
         hover:opacity-100
         active:opacity-100
 
@@ -100,7 +100,7 @@ max-w-max -->
 
         text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
 
-        bg:blue-100/50 dark:bg-blue-800/50
+        bg:blue-100/20 dark:bg-blue-800/30
         dark:text-slate-400 dark:hover:text-slate-200
         hover:bg-blue-200/90 hover:dark:bg-blue-900/90
         active:bg-blue-200 active:dark:bg-blue-900
@@ -137,15 +137,15 @@ max-w-max -->
 
         w-full
 
-        bg-white/10 dark:dark-gray-800/10
-        hover:bg-red-100/50 dark:hover:bg-gray-800
+        bg-white/80 dark:dark-gray-800/80
+        hover:bg-red-100/90 dark:hover:bg-gray-800/90
 
         relative
         *:hover:inline
         *:hover:visible
         **:hover:visible
 
-        opacity-50
+        opacity-70
         hover:opacity-100
 
         transition-all
@@ -354,7 +354,12 @@ max-w-max -->
         type="button"
         class:w-48={$ae_loc?.app_cfg?.show_element__menu}
 
-        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success px-6 py-1 invisible group-hover:visible groupx"
+        class="
+            btn btn-sm
+            preset-tonal-tertiary hover:preset-filled-success active:preset-filled-success
+            px-6 py-1
+            invisible group-hover:visible groupx
+            "
         title="Show or hide the menu"
         onclick={async () => {
             if (!$ae_loc?.app_cfg?.show_element__menu) {
@@ -419,6 +424,8 @@ max-w-max -->
 
         min-w-48
 
+        bg-white dark:bg-gray-800
+
         border border-gray-200 dark:border-gray-700
         rounded-lg
         px-1 py-2