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

src/ae-c-idaa-light.css

@@ -0,0 +1,205 @@
+[data-theme='AE_c_IDAA_light'] {
+	--text-scaling: 1.067;
+	--base-font-color: var(--color-surface-950);
+
+	--base-font-family: system-ui, sans-serif;
+	--base-font-size: inherit;
+	--base-line-height: inherit;
+	--base-font-weight: normal;
+	--base-font-style: normal;
+	--base-letter-spacing: 0em;
+	--heading-font-color: inherit;
+
+	--heading-font-family: inherit;
+	--heading-font-weight: bold;
+	--heading-font-style: normal;
+	--heading-letter-spacing: inherit;
+	--anchor-font-color: var(--color-primary-600);
+
+	--anchor-font-family: inherit;
+	--anchor-font-size: inherit;
+	--anchor-line-height: inherit;
+	--anchor-font-weight: inherit;
+	--anchor-font-style: inherit;
+	--anchor-letter-spacing: inherit;
+	--anchor-text-decoration: none;
+	--anchor-text-decoration-hover: underline;
+	--anchor-text-decoration-active: none;
+	--anchor-text-decoration-focus: none;
+	--spacing: 0.25rem;
+	--radius-base: 0.375rem;
+	--radius-container: 0.75rem;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
+	--body-background-color: var(--color-surface-50);
+
+	--color-primary-50: oklch(85.73% 0.07 251.8deg);
+	--color-primary-100: oklch(78.5% 0.09 252.03deg);
+	--color-primary-200: oklch(71.06% 0.1 253.6deg);
+	--color-primary-300: oklch(63.76% 0.12 253.85deg);
+	--color-primary-400: oklch(56.32% 0.14 255.25deg);
+	--color-primary-500: oklch(49.23% 0.15 256.36deg);
+	--color-primary-600: oklch(43.11% 0.14 258.86deg);
+	--color-primary-700: oklch(36.85% 0.14 261.54deg);
+	--color-primary-800: oklch(30.41% 0.13 263.99deg);
+	--color-primary-900: oklch(23.91% 0.12 265.91deg);
+	--color-primary-950: oklch(16.96% 0.12 264.05deg);
+
+	--color-primary-contrast-light: var(--color-primary-50);
+
+
+
+
+
+	--color-primary-contrast-500: var(--color-primary-contrast-light);
+	--color-primary-contrast-600: var(--color-primary-contrast-light);
+	--color-primary-contrast-700: var(--color-primary-contrast-light);
+	--color-primary-contrast-800: var(--color-primary-contrast-light);
+	--color-primary-contrast-900: var(--color-primary-contrast-light);
+	--color-primary-contrast-950: var(--color-primary-contrast-light);
+	--color-secondary-50: oklch(96.26% 0.06 196.24deg);
+	--color-secondary-100: oklch(89.14% 0.07 220.79deg);
+	--color-secondary-200: oklch(82.13% 0.08 234.87deg);
+	--color-secondary-300: oklch(75.03% 0.11 245.33deg);
+	--color-secondary-400: oklch(68.15% 0.14 250.72deg);
+	--color-secondary-500: oklch(61.37% 0.16 255.34deg);
+	--color-secondary-600: oklch(55.1% 0.16 256.81deg);
+	--color-secondary-700: oklch(48.64% 0.15 258.4deg);
+	--color-secondary-800: oklch(41.84% 0.15 260.39deg);
+	--color-secondary-900: oklch(35.05% 0.14 262.03deg);
+	--color-secondary-950: oklch(28.12% 0.14 262.47deg);
+
+	--color-secondary-contrast-light: var(--color-secondary-50);
+
+
+
+
+
+
+	--color-secondary-contrast-600: var(--color-secondary-contrast-light);
+	--color-secondary-contrast-700: var(--color-secondary-contrast-light);
+	--color-secondary-contrast-800: var(--color-secondary-contrast-light);
+	--color-secondary-contrast-900: var(--color-secondary-contrast-light);
+	--color-secondary-contrast-950: var(--color-secondary-contrast-light);
+	--color-tertiary-50: oklch(100% 0 none);
+	--color-tertiary-100: oklch(96.07% 0.01 251.15deg);
+	--color-tertiary-200: oklch(91.88% 0.03 252.69deg);
+	--color-tertiary-300: oklch(87.99% 0.05 253.24deg);
+	--color-tertiary-400: oklch(83.81% 0.06 253.57deg);
+	--color-tertiary-500: oklch(79.93% 0.08 253.32deg);
+	--color-tertiary-600: oklch(72.53% 0.08 251.75deg);
+	--color-tertiary-700: oklch(64.93% 0.08 249.75deg);
+	--color-tertiary-800: oklch(57.14% 0.09 247.99deg);
+	--color-tertiary-900: oklch(49.18% 0.09 246.55deg);
+	--color-tertiary-950: oklch(41.1% 0.09 246.54deg);
+
+	--color-tertiary-contrast-light: var(--color-tertiary-50);
+
+
+
+
+
+
+
+
+	--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
+	--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
+	--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
+	--color-success-50: oklch(95.82% 0.06 184.52deg);
+	--color-success-100: oklch(91.55% 0.08 172.29deg);
+	--color-success-200: oklch(87.44% 0.11 165.22deg);
+	--color-success-300: oklch(83.26% 0.13 161.2deg);
+	--color-success-400: oklch(79.56% 0.16 157.13deg);
+	--color-success-500: oklch(76.12% 0.18 153.61deg);
+	--color-success-600: oklch(69.31% 0.17 151.81deg);
+	--color-success-700: oklch(62.07% 0.16 149.95deg);
+	--color-success-800: oklch(54.9% 0.15 147.65deg);
+	--color-success-900: oklch(47.26% 0.14 145.54deg);
+	--color-success-950: oklch(39.64% 0.13 143.79deg);
+
+	--color-success-contrast-light: var(--color-success-50);
+
+
+
+
+
+
+
+
+	--color-success-contrast-800: var(--color-success-contrast-light);
+	--color-success-contrast-900: var(--color-success-contrast-light);
+	--color-success-contrast-950: var(--color-success-contrast-light);
+	--color-warning-50: oklch(98.26% 0.1 108.02deg);
+	--color-warning-100: oklch(95.84% 0.12 104.66deg);
+	--color-warning-200: oklch(93.48% 0.13 102.21deg);
+	--color-warning-300: oklch(91.49% 0.15 100.17deg);
+	--color-warning-400: oklch(89.28% 0.16 98.19deg);
+	--color-warning-500: oklch(87.14% 0.17 96.01deg);
+	--color-warning-600: oklch(79.88% 0.16 96.31deg);
+	--color-warning-700: oklch(72.35% 0.14 95.62deg);
+	--color-warning-800: oklch(64.73% 0.13 95.92deg);
+	--color-warning-900: oklch(56.77% 0.11 94.87deg);
+	--color-warning-950: oklch(48.63% 0.1 95.22deg);
+
+	--color-warning-contrast-light: var(--color-warning-50);
+
+
+
+
+
+
+
+
+	--color-warning-contrast-800: var(--color-warning-contrast-light);
+	--color-warning-contrast-900: var(--color-warning-contrast-light);
+	--color-warning-contrast-950: var(--color-warning-contrast-light);
+	--color-error-50: oklch(81.88% 0.1 38.14deg);
+	--color-error-100: oklch(75.88% 0.13 31.15deg);
+	--color-error-200: oklch(70.29% 0.16 27.32deg);
+	--color-error-300: oklch(65.15% 0.19 25.65deg);
+	--color-error-400: oklch(60.98% 0.21 25.56deg);
+	--color-error-500: oklch(57.86% 0.22 26.62deg);
+	--color-error-600: oklch(52.52% 0.2 26.86deg);
+	--color-error-700: oklch(46.81% 0.18 27.02deg);
+	--color-error-800: oklch(41.15% 0.16 27.63deg);
+	--color-error-900: oklch(35.01% 0.14 27.9deg);
+	--color-error-950: oklch(28.69% 0.12 29.23deg);
+
+	--color-error-contrast-light: var(--color-error-50);
+
+
+
+
+	--color-error-contrast-400: var(--color-error-contrast-light);
+	--color-error-contrast-500: var(--color-error-contrast-light);
+	--color-error-contrast-600: var(--color-error-contrast-light);
+	--color-error-contrast-700: var(--color-error-contrast-light);
+	--color-error-contrast-800: var(--color-error-contrast-light);
+	--color-error-contrast-900: var(--color-error-contrast-light);
+	--color-error-contrast-950: var(--color-error-contrast-light);
+	--color-surface-50: oklch(100% 0 none);
+	--color-surface-100: oklch(93.98% 0 105.57deg);
+	--color-surface-200: oklch(87.66% 0 67.88deg);
+	--color-surface-300: oklch(81.35% 0 106.1deg);
+	--color-surface-400: oklch(74.79% 0 84.45deg);
+	--color-surface-500: oklch(68.29% 0 91.36deg);
+	--color-surface-600: oklch(60.99% 0 91.38deg);
+	--color-surface-700: oklch(53.5% 0 84.49deg);
+	--color-surface-800: oklch(46.03% 0 91.43deg);
+	--color-surface-900: oklch(37.94% 0 84.52deg);
+	--color-surface-950: oklch(29.34% 0 84.54deg);
+
+	--color-surface-contrast-light: var(--color-surface-50);
+
+
+
+
+
+
+
+	--color-surface-contrast-700: var(--color-surface-contrast-light);
+	--color-surface-contrast-800: var(--color-surface-contrast-light);
+	--color-surface-contrast-900: var(--color-surface-contrast-light);
+	--color-surface-contrast-950: var(--color-surface-contrast-light);
+}

src/app.css

@@ -19,6 +19,7 @@
 /* @import '@skeletonlabs/skeleton/themes/ae_c_lci'; */
 @import './ae-osit-default.css';
 @import './ae-c-lci.css';
+@import './ae-c-idaa-light.css';
 
 @source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
 
@@ -77,7 +78,7 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
-  .dark {
+  /* .dark {
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
     --muted: 215 27.9% 16.9%;
@@ -105,7 +106,7 @@
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
-  }
+  } */
 }
 
 @layer base {
@@ -879,6 +880,20 @@ img.qr_code:focus {
 .iframe .novi_btn {
     border-radius: 60px;
     border-color: hsla(0, 0%, 50%, .5);
+
+
+}
+
+.iframe .novi_label {
+    color: white;
+}
+
+.iframe .novi_black {
+    color: black;
+}
+
+.iframe .novi_white {
+    color: white;
 }
 
 .iframe .novi_margin_sm {

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 dark:text-gray-200
-                            text-base font-semibold text-gray-800
                             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>

src/routes/+layout.svelte

@@ -385,6 +385,14 @@ if ($ae_loc?.site_cfg_json?.theme_name) {
 }
 if ($ae_loc?.site_cfg_json?.theme_mode) {
     $ae_loc.theme_mode = $ae_loc.site_cfg_json.theme_mode;
+
+    if (browser && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        $ae_loc.theme_mode = 'dark';
+    } else {
+        $ae_loc.theme_mode = 'light';
+    }
+
+    $ae_loc.theme_mode = 'dark';
 }
 
 

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_options.svelte

@@ -55,7 +55,10 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
             class="flex flex-row gap-1 items-center justify-around"
             >
             <label
-                class="text-sm w-32 md:w-42 form-group"
+                class="
+                    novi_label
+                    text-sm text-gray-700 dark:text-gray-300 w-32 md:w-42 form-group
+                    "
                 for="qry_limit__posts">
                 Max posts:
 
@@ -231,7 +234,7 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
                 // $idaa_sess.bb.show__inline_edit__post_obj = true;
             }}
             class="
-                novi_btn btn-tertiary
+                novi_btn novi_white btn-tertiary
                 text-xs
                 btn btn-sm
                 preset-tonal-warning preset-outlined-warning-200-800 hover:preset-filled-warning-200-800
@@ -249,7 +252,7 @@ if (log_lvl) console.log('** Component Loaded: ** Post Options');
         e_class=""
         e_class_form_hidden="float-right"
         e_class_form_showing="inline-block"
-        btn_class="novi_btn"
+        btn_class="novi_btn novi_white"
         show_btn_class=""