diff --git a/packages/core/src/lib/ui-header/ui-header.module.css b/packages/core/src/lib/ui-header/ui-header.module.css
index 6b46067..377412f 100644
--- a/packages/core/src/lib/ui-header/ui-header.module.css
+++ b/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));
 }
diff --git a/packages/core/src/lib/ui-theme-switch/ui-theme-switch.tsx b/packages/core/src/lib/ui-theme-switch/ui-theme-switch.tsx
index 253180b..d4d90f9 100644
--- a/packages/core/src/lib/ui-theme-switch/ui-theme-switch.tsx
+++ b/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()}
diff --git a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template b/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template
index 6b46067..377412f 100644
--- a/packages/generators/src/generators/component/files/header/__prefixFileName__-header.module.css.template
+++ b/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));
 }
diff --git a/packages/generators/src/generators/component/files/theme-switch/__prefixFileName__-theme-switch.tsx.template b/packages/generators/src/generators/component/files/theme-switch/__prefixFileName__-theme-switch.tsx.template
index 2f3e17b..ae94830 100644
--- a/packages/generators/src/generators/component/files/theme-switch/__prefixFileName__-theme-switch.tsx.template
+++ b/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()}