Fix color scheme in mobile menu

This commit is contained in:
2025-12-23 16:03:12 +01:00
parent 9a8a202188
commit 86fd045eea
2 changed files with 48 additions and 3 deletions

View File

@@ -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};
@@ -52,4 +55,40 @@ $color-img-dots-light-blue: $palette-primary-10;
// Overlay for image galleries
--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;
}
}

View File

@@ -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;