feat: enable light mode

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-card/src/lib/ui-article-card/ui-article-card.component.ts

@@ -22,6 +22,7 @@ export type CardType = 'regular' | 'horizontal' | 'compact' | 'hero';
   host: {
     'data-testid': 'article-card',
     '[attr.id]': 'article().slug',
+    class: 'light:border light:rounded-lg',
   },
 })
 export class UiArticleCardComponent {

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/footer/components/footer-logo.component.ts

@@ -17,7 +17,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
         />
         <span class="text-al-primary px-4 text-lg font-bold">angular.love</span>
       </div>
-      <small class="text-al-muted hidden pt-1 text-xs lg:block">
+      <small class="hidden pt-1 text-xs text-[#bec4ca] lg:block">
         Copyright &#169; {{ currentYear() }}
       </small>
     </div>

libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts

@@ -10,7 +10,7 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m
     <div class="flex flex-col items-start">
       <h3
         id="social-media-title"
-        class="mb-4 hidden text-sm font-bold lg:block"
+        class="mb-4 hidden text-sm font-bold text-[#fff] lg:block"
       >
         Social media
       </h3>

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

@@ -1,4 +1,4 @@
-<footer class="bg-al-card w-full">
+<footer class="w-full bg-[#191a22]">
   <div
     class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-0"
   >
@@ -10,7 +10,7 @@
       <al-footer-social-media-icons />
     </div>
 
-    <small class="copyright text-al-muted text-center text-xs lg:hidden">
+    <small class="copyright text-center text-xs text-[#6a798b] lg:hidden">
       Copyright &#169; {{ currentYear }}
     </small>
   </div>

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/layouts/ui-navigation/src/lib/navigation/navigation.component.html

@@ -2,26 +2,26 @@
   *transloco="let t"
   [ngClass]="{
     'flex-row': layout() === 'horizontal',
-    'flex-col': layout() === 'vertical',
+    'flex-col': layout() === 'vertical'
   }"
 >
   <ul
     class="flex flex-wrap"
     [ngClass]="{
-      'flex-col justify-between': layout() === 'vertical',
+      'flex-col justify-between': layout() === 'vertical'
     }"
     [attr.aria-label]="t('nav.navLinks')"
   >
     @for (item of navItems; track $index) {
       @if (!item.externalLink) {
         <li
           [ngClass]="{
-            'py-10 text-center': layout() === 'vertical',
+            'py-10 text-center': layout() === 'vertical'
           }"
         >
           <a
             [attr.data-testid]="item.dataTestId"
-            class="text-al-foreground p-2 font-medium md:p-6"
+            class="p-2 font-medium text-[#fff] md:p-6"
             [routerLinkActive]="'text-al-pink'"
             [routerLink]="item.link | alLocalize"
             (click)="navigated.emit()"
@@ -33,7 +33,7 @@
         <li>
           <a
             [attr.data-testid]="item.dataTestId"
-            class="text-al-foreground p-2 font-medium md:p-6"
+            class="p-2 font-medium text-[#fff] md:p-6"
             [href]="item.link"
             target="_blank"
           >

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/partners/ui-partners/src/lib/partners-list/partners-list.component.html

@@ -3,7 +3,7 @@
 >
   @for (partner of partnersList(); track partner.asset_URL) {
     <a
-      class="aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100"
+      class="light:border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100"
       [href]="partner.link_URL"
       target="_blank"
     >

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/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html

@@ -1,7 +1,10 @@
 <ul aria-label="Social media" class="flex items-center justify-center">
   @for (social of socials; track $index) {
     <li>
-      <al-social-media-icon-item [socialMediaConfig]="social" />
+      <al-social-media-icon-item
+        class="text-[#fff]"
+        [socialMediaConfig]="social"
+      />
     </li>
   }
 </ul>

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: 255 255 255;
+    }
+  }
 }
 
 @layer base {

package.json

@@ -56,6 +56,7 @@
     "sanitize-html": "^2.13.0",
     "stylelint": "^16.3.1",
     "tailwind-merge": "^2.3.0",
+    "tailwindcss-theme-variants": "2.0.0-beta.0",
     "tslib": "^2.6.1",
     "vanilla-cookieconsent": "3.0.1",
     "xmlbuilder2": "^3.1.1",