feat: enable light mode

Author: DDonochVA

libs/blog/layouts/ui-layouts/src/lib/header/header.component.html

@@ -29,7 +29,7 @@ <h1 class="text-al-primary px-4 text-lg font-bold">angular.love</h1>
           type="button"
           class="border-al-gray-200 mr-1 rounded border bg-transparent px-1 py-2 font-medium leading-4 md:mr-2 md:px-4"
           [ngClass]="{
-            '!text-white': language() === 'en',
+            '!text-al-foreground': language() === 'en',
             '!text-al-gray-50  opacity-50': language() !== 'en',
           }"
           [attr.aria-label]="t('changeLangToEnglish')"
@@ -42,7 +42,7 @@ <h1 class="text-al-primary px-4 text-lg font-bold">angular.love</h1>
           type="button"
           class="border-al-gray-200 mr-1 rounded border bg-transparent px-1 py-2 font-medium leading-4 md:mr-2 md:px-4"
           [ngClass]="{
-            '!text-white': language() === 'pl',
+            '!text-al-foreground': language() === 'pl',
             '!text-al-gray-50  opacity-50': language() !== 'pl',
           }"
           [attr.aria-label]="t('changeLangToPolish')"

libs/shared/assets/src/lib/styles/main.scss

@@ -13,6 +13,17 @@
     --card: 25 26 34;
     --background: 16 15 21;
   }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      --primary: 213 1 89;
+      --foreground: 0 0 0;
+      --muted: 25 25 25;
+      --border: 200 200 200;
+      --card: 250 250 250;
+      --background: 255 255 255;
+    }
+  }
 }
 
 @layer base {