Fix color scheme in mobile menu

themes/tsc_vfl/assets/css/_colors.scss

@@ -13,6 +13,8 @@ $palette-primary-30: color.adjust($palette-primary, $lightness: 65%);
 // $color-blue-super-thin
 $palette-primary-40: color.adjust($palette-primary, $lightness: 69%);
 
+$palette-primary-dark-10: color.adjust($palette-primary, $lightness: -10%);
+
 $color-vh-vorne: #ddcb55;
 $color-vh-mitte: #c98879;
 $color-vh-hinten: #0082c9;
@@ -36,6 +38,7 @@ $color-img-dots-light-blue: $palette-primary-10;
     // Mobile menu colors
     --color-bg-mobile-menu-header: #{$palette-primary-20};
     --color-bg-mobile-menu: #{$palette-primary-40};
+    --color-fg-mobile-menu: var(--color-fg-primary);
 
     --color-hor-line: #{$palette-primary-10};
 
@@ -53,3 +56,39 @@ $color-img-dots-light-blue: $palette-primary-10;
     --color-overlay-bg: #d3d3d3B0;
     --color-overlay-bg-inner: white;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-bg: #333;
+        --color-wrapper-bg: black;
+    
+        --color-fg: white;
+        --color-fg-inverted: black;
+    
+        // Former $color-blue
+        --color-fg-primary: #{$palette-primary-10};
+        // Former $color-blue-thin
+        --color-bg-primary: #{$palette-primary-dark-10};
+    
+        // Mobile menu colors
+        --color-bg-mobile-menu-header: #{$palette-primary};
+        --color-bg-mobile-menu: #{$palette-primary-dark-10};
+        --color-fg-mobile-menu: #{$palette-primary-30};
+    
+        --color-hor-line: #{$palette-primary-10};
+    
+        --color-tr-a: #dedede;
+        --color-tr-b: #f7f7f7;
+    
+        --color-th-bg: #{$palette-primary};
+        --color-th-fg: white;
+    
+        --color-dots-gray: #{$color-img-dots-gray};
+        --color-dots-dark-blue: #{$color-img-dots-dark-blue};
+        --color-dots-light-blue: #{$color-img-dots-light-blue};
+    
+        // Overlay for image galleries
+        --color-overlay-bg: #d3d3d3B0;
+        --color-overlay-bg-inner: white;
+    }
+}

themes/tsc_vfl/assets/css/main.scss

@@ -29,6 +29,7 @@ body {
     padding: 0;
     margin: 0;
     background-color: var(--color-bg);
+    color: var(--color-fg);
     font: 90% 'Open Sans', sans-serif;
     height: 100vh;
 }
@@ -568,7 +569,10 @@ table {
         width: 100%;
 
         a {
+            @include menu-style;
+            
             background-color: var(--color-bg-mobile-menu-header);
+            color: var(--color-fg-mobile-menu);
         }
     }
 
@@ -576,7 +580,10 @@ table {
         width: 50%;
 
         a {
+            @include menu-style;
+            
             background-color: var(--color-bg-mobile-menu);
+            color: var(--color-fg-mobile-menu);
         }
     }
 
@@ -591,8 +598,6 @@ table {
             padding: 5px;
             box-sizing: border-box;
 
-            @include menu-style;
-
             &.active {
                 color: var(--color-fg-inverted);
                 background-color: var(--color-fg-primary);
@@ -603,12 +608,13 @@ table {
 
 .mobile-menu-link {
     display: block;
-    border: 1px solid black;
+    border: 1px solid var(--color-fg);
     width: max-content;
     padding: 5px 75px 5px 15px;
     margin: 5px 0 5px 20px;
 
     @include menu-style;
+    color: var(--color-fg-mobile-menu);
 
     @include r.media-large {
         display: none;