fix: darken ui header

Author: beeman

packages/core/src/lib/ui-header/ui-header.module.css

@@ -23,10 +23,10 @@
   font-weight: 500;
 
   @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
   }
 }
 .linkActive {
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
   color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
 }

packages/core/src/lib/ui-theme-switch/ui-theme-switch.tsx

@@ -15,7 +15,7 @@ export function UiThemeSwitch(props: SwitchProps) {
   return (
     <Switch
       size="lg"
-      color={'dark.6'}
+      color="dark.8"
       onLabel={sunIcon}
       offLabel={moonIcon}
       onChange={() => toggleColorScheme()}

packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template

@@ -23,10 +23,10 @@
   font-weight: 500;
 
   @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
   }
 }
 .linkActive {
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
   color: light-dark(var(--mantine-color-brand-6), var(--mantine-color-brand-4));
 }

packages/generators/src/generators/component/files/theme-switch/__prefixFileName__-theme-switch.tsx.template

@@ -15,7 +15,7 @@ export function <%= prefix.className %>ThemeSwitch(props: SwitchProps) {
   return (
     <Switch
       size="lg"
-      color={'dark.6'}
+      color="dark.8"
       onLabel={sunIcon}
       offLabel={moonIcon}
       onChange={() => toggleColorScheme()}