feat: enable light mode

Author: DDonochVA

libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html

@@ -23,7 +23,7 @@
             [priority]="imagePriority()"
             size="32"
           />
-          <span class="text-sm/[14px] font-medium">
+          <span class="text-al-primary-foreground text-sm/[14px] font-medium">
             {{ article().author.name }}
           </span>
         </div>
@@ -39,7 +39,7 @@
       </div>
       <div class="flex flex-col gap-3 px-4 pb-4 pt-3">
         <h3
-          class="*:text-al-pink text-2xl font-bold *:not-italic"
+          class="*:text-al-primary-foreground text-2xl font-bold *:not-italic"
           [id]="article().slug"
           [innerHTML]="sanitizedArticle().title"
           style="word-break: break-word"

libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html

@@ -1,7 +1,7 @@
 <div class="my-5 flex flex-row items-center justify-between gap-6">
   <h2
     data-testId="article-list-title"
-    class="line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
+    class="text-al-primary-foreground line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
   >
     {{ title() }}
   </h2>

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

@@ -1,4 +1,6 @@
-<header class="bg-al-background/95 z-30 h-20 w-full border-b shadow-xl">
+<header
+  class="dark:bg-al-background/95 z-30 h-20 w-full border-b bg-white shadow-xl"
+>
   <div
     class="mx-auto flex h-full w-full max-w-screen-xl items-center justify-between px-6 py-4 xl:px-0"
   >
@@ -29,7 +31,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 +44,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/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html

@@ -5,7 +5,7 @@
         <div class="flex flex-col">
           <h2
             id="newsletter-title"
-            class="text-4xl font-bold lg:text-2xl xl:text-4xl"
+            class="text-al-primary-foreground text-4xl font-bold lg:text-2xl xl:text-4xl"
           >
             {{ t('title') }}
           </h2>

libs/blog/shared/ui-card/src/lib/card.component.ts

@@ -69,7 +69,7 @@ export class CardLinkableDirective {
 export class GradientCardDirective {
   @HostBinding('class')
   get hostClasses() {
-    return 'border !bg-al-radial-gradient bg-al-background';
+    return 'border !bg-al-radial-gradient bg-al-card dark:bg-al-background';
   }
 }
 

libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts

@@ -26,7 +26,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
       <div
         class="flex items-center self-stretch rounded-l-md pl-1 text-center align-middle xl:pl-2"
         [ngClass]="{
-          'bg-al-background': isColorBackground(),
+          'dark:bg-al-background bg-transparent': isColorBackground(),
           'bg-al-border': !isColorBackground(),
         }"
       >
@@ -45,7 +45,8 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
           <div
             class="mx-0.5 inline-block h-4 w-4 rounded-full bg-transparent lg:mx-1"
             [ngClass]="{
-              'shadow-al-full-background': isColorBackground(),
+              'dark:shadow-al-full-background shadow-transparent':
+                isColorBackground(),
               'shadow-al-full-border': !isColorBackground(),
             }"
           ></div>
@@ -77,7 +78,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
       <div
         class="flex items-center self-stretch rounded-r-md pr-1 text-center align-middle"
         [ngClass]="{
-          'bg-al-background': isColorBackground(),
+          'dark:bg-al-background bg-transparent': isColorBackground(),
           'bg-al-border': !isColorBackground(),
         }"
       ></div>

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

@@ -8,11 +8,24 @@
   :root {
     --primary: 255 0 106;
     --foreground: 255 255 255;
+    --primary-foreground: 255 255 255;
     --muted: 190 196 202;
     --border: 46 47 59;
     --card: 25 26 34;
     --background: 16 15 21;
   }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      --primary: 213 1 89;
+      --foreground: 20 21 27;
+      --primary-foreground: 106 121 139;
+      --muted: 25 25 25;
+      --border: 200 200 200;
+      --card: 255 255 255;
+      --background: 236 236 236;
+    }
+  }
 }
 
 @layer base {

tailwind.preset.js

@@ -1,10 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ['class'],
   theme: {
     extend: {
       colors: {
         'al-foreground': 'rgb(var(--foreground) / <alpha-value>)',
+        'al-primary-foreground':
+          'rgb(var(--primary-foreground) / <alpha-value>)',
         'al-card': 'rgb(var(--card) / <alpha-value>)',
         'al-background': 'rgba(var(--background) / <alpha-value>)',
         'al-border': 'rgb(var(--border) / <alpha-value>)',