Never ending working styling for light and dark mode in Novi.

src/lib/e_app_help_tech.svelte

@@ -121,6 +121,8 @@ function send_help_tech_email() {
         body_html: body_html,
     });
 
+    help_tech_text = ''; // Clear the text area after sending
+
 }
 
 </script>
@@ -169,17 +171,17 @@ function send_help_tech_email() {
                 <h3
                     class="
 
-                        text-base font-semibold text-gray-800
+                        text-base font-semibold text-gray-800 dark:text-gray-200
                         w-fit
                         "
                     >
                     {#if e_success}
-                        <span class="text-green-500">
+                        <span class="text-green-800 dark:text-green-200 font-semibold">
                             <BadgeQuestionMark class="inline-block mr-2" />
                             Help Requested
                         </span>
                     {:else}
-                        <span class="text-gray-800 font-semibold">
+                        <span class="text-gray-800 dark:text-gray-200 font-semibold">
                             <BadgeQuestionMark class="inline-block mr-2" />
                             <!-- Request Technical Help -->
                             Notify Technical Support
@@ -222,7 +224,7 @@ function send_help_tech_email() {
                 })}
                 >
                 <textarea
-                    class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded"
+                    class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded text-gray-950 dark:text-gray-50"
                     placeholder="Send with or without a description...."
                     bind:value={help_tech_text}
                     ></textarea>
@@ -255,14 +257,20 @@ function send_help_tech_email() {
 
             <div
                 class="
-                    text-sm text-gray-500 text-center italic
+                    text-sm text-gray-700 dark:text-gray-300 text-center italic
                     "
                     >
                 This is intended for technical issues only. Please contact your organization's staff if you have a question about your membership, recorded content, meetings, or posts.
             </div>
 
             <div
-                class="border border-gray-300 rounded p-2">
+                class="
+                    border border-gray-300 rounded p-2
+                    w-full
+                    max-w-2xl
+                    overflow-scroll
+                    "
+                >
                 <div
                     class="
                         d-flex align-items-center justify-content-between
@@ -272,8 +280,7 @@ function send_help_tech_email() {
                     >
                     <h4
                         class="
-
-                            text-base font-semibold text-gray-800
+                            text-base font-semibold text-gray-800 dark:text-gray-200
                             flex flex-row gap-1 items-center justify-center
                             "
                         >
@@ -310,6 +317,7 @@ function send_help_tech_email() {
                     <li><span class="text-sm text-gray-500">Browser =</span> {navigator.userAgent}</li>
                     <li><span class="text-sm text-gray-500">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
                     <li><span class="text-sm text-gray-500">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
+                    <li><span class="text-sm text-gray-500">Dark mode =</span> {window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}</li>
                     <li><span class="text-sm text-gray-500">In iframe =</span> {$ae_loc?.iframe}</li>
                     <li><span class="text-sm text-gray-500">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
                     <li><span class="text-sm text-gray-500">Theme Name =</span> {$ae_loc?.theme_name}</li>
@@ -336,7 +344,7 @@ function send_help_tech_email() {
                     {/if}
 
                 </ul>
-                <div class="text-sm text-gray-500 text-center italic">
+                <div class="text-sm text-gray-700 dark:text-gray-300 text-center italic">
                     This information will be included in the help request to assist technical support in diagnosing the issue.
                 </div>
 
@@ -366,6 +374,7 @@ function send_help_tech_email() {
             onclick={() => ($ae_sess.show_help_tech = true)}
             class="
                 btn btn-sm
+                preset-tonal-surface
                 preset-outlined-warning-600-400
                 transition-all
                 {btn_class}

src/lib/e_app_theme.svelte

@@ -105,6 +105,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
         <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>