🐛 fix: improve dark mode and OS theme handling (#380)

2024-09-12 22:57:46 +02:00
parent 1b11f4b321
commit 35dcf55019
17 changed files with 360 additions and 175 deletions
--- a/sass/skins/monochrome.scss
+++ b/sass/skins/monochrome.scss
@@ -1,7 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #727272;  // Contrast ratio: 4.81:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #b3b3b3;  // Contrast ratio: 7.86:1
+    }
+}
+
 :root {
-    --primary-color: #727272;  // Contrast ratio: 4.81:1
+    @include theme-variables('light');
 }

 [data-theme='dark'] {
-    --primary-color: #b3b3b3;  // Contrast ratio: 7.86:1
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }