fix(frontend): header background colour in dark mode

getindiekit · Apr 9, 2024 · 508343c · 508343c
1 parent f15c59d
commit 508343c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/frontend/components/header/styles.css b/packages/frontend/components/header/styles.css
@@ -11,7 +11,7 @@
   --anchor-color: var(--color-on-offset);
   --anchor-color-hover: var(--color-primary-on-background);
   --anchor-decoration-color: transparent;
-  --header-background-color: hsl(var(--tint-neutral) 95% / 0.9);
+  --header-background-color: var(--glass-background-color);
   --navigation-item-padding-block: var(--space-s);
   --navigation-item-current-color: var(--color-primary-variant);
   color: var(--color-on-offset);

diff --git a/packages/frontend/styles/config/custom-properties.css b/packages/frontend/styles/config/custom-properties.css
@@ -146,6 +146,9 @@ html {
   --container-inline-size: min(100vw, var(--container-max-inline-size));
   --container-max-inline-size: 75rem;
 
+  /* Glass */
+  --glass-background-color: hsl(var(--tint-neutral) 95% / 0.9);
+
   color-scheme: light dark;
 }
 
@@ -172,6 +175,9 @@ html {
     --color-token-selector: #99f;
     --color-token-string: #f6f;
     --color-token-variable: #9ff;
+
+    /* Glass */
+    --glass-background-color: hsl(var(--tint-neutral) 20% / 0.9);
   }
 }
 
@@ -197,4 +203,7 @@ html {
   --color-token-selector: #99f;
   --color-token-string: #f6f;
   --color-token-variable: #9ff;
+
+  /* Glass */
+  --glass-background-color: hsl(var(--tint-neutral) 20% / 0.9);
 }