feat: added theme switch and fixed cookies consent logic

Author: marcin-hoa

libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts

@@ -10,7 +10,7 @@ interface AppThemeStore {
 
 export const AppThemeStore = signalStore(
   { providedIn: 'root' },
-  withState<AppThemeStore>({ theme: 'light' }),
+  withState<AppThemeStore>({ theme: 'dark' }),
   withMethods(
     (
       store,
@@ -19,15 +19,19 @@ export const AppThemeStore = signalStore(
     ) => ({
       syncWithSystemTheme: () => {
         if (isPlatformBrowser(platformId)) {
-          const theme = getSystemTheme();
+          const theme =
+            (localStorage.getItem('theme') as Theme) ?? getSystemTheme();
           ccConsumer.setThemeAttribute(theme);
           patchState(store, { theme: theme });
         }
       },
       toggleTheme: () => {
-        const theme = store.theme() === 'dark' ? 'light' : 'dark';
-        ccConsumer.setThemeAttribute(theme);
-        patchState(store, { theme: theme });
+        if (isPlatformBrowser(platformId)) {
+          const newTheme = store.theme() === 'dark' ? 'light' : 'dark';
+          ccConsumer.setThemeAttribute(newTheme);
+          localStorage.setItem('theme', newTheme);
+          patchState(store, { theme: newTheme });
+        }
       },
     }),
   ),
@@ -44,5 +48,13 @@ function getSystemTheme(): Theme {
 export class CCAppThemeConsumer {
   setThemeAttribute(theme: Theme): void {
     document.documentElement.setAttribute('data-theme', theme);
+
+    const classList = document.documentElement.classList;
+
+    if (theme === 'dark') {
+      classList.add('cc--darkmode');
+    } else {
+      classList.remove('cc--darkmode');
+    }
   }
 }

libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss

@@ -5,7 +5,7 @@
   margin-top: 1.6rem;
 }
 
-@media (prefers-color-scheme: dark) {
+:root[data-theme='dark'] {
   .shiki,
   .shiki span {
     color: var(--shiki-dark) !important;

libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts

@@ -12,7 +12,6 @@ import { DomSanitizer } from '@angular/platform-browser';
   selector: 'al-article-content',
   templateUrl: './article-content.component.html',
   styleUrl: './article-content.component.scss',
-  imports: [],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

libs/shared/assets/src/lib/styles/cookies-consent.scss

@@ -17,7 +17,7 @@
   /** Also make toggles the same color as the button **/
   --cc-toggle-on-bg: var(--cc-btn-primary-bg);
 
-  @media (prefers-color-scheme: light) {
+  :root[data-theme='light'] {
     --cc-btn-secondary-color: rgba(44, 47, 49, 1);
   }
 }

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

@@ -4,6 +4,9 @@
 @tailwind components;
 @tailwind utilities;
 
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
+
 @layer base {
   :root[data-theme='dark'] {
     --primary: 255 0 106;
@@ -28,7 +31,7 @@
     --foreground: 20 21 27;
     --primary-foreground: 0 0 0;
     --muted: 25 25 25;
-    --border: 200 200 200;
+    --border: 229 231 235;
     --card: 255 255 255;
     --background: 255 255 255;
     --grey: 241 241 241;
@@ -87,8 +90,8 @@ html {
   }
 }
 
-@layer components {
+@layer base {
   .al-link {
-    @apply text-blue-600 hover:underline;
+    @apply text-red-500 hover:underline dark:text-blue-400;
   }
 }

tailwind.preset.js

@@ -1,11 +1,6 @@
-const {
-  themeVariants,
-  prefersLight,
-  prefersDark,
-} = require('tailwindcss-theme-variants');
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'selector',
   theme: {
     extend: {
       translate: {
@@ -51,17 +46,4 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    require('@tailwindcss/container-queries'),
-    themeVariants({
-      themes: {
-        light: {
-          mediaQuery: prefersLight /* "@media (prefers-color-scheme: light)" */,
-        },
-        dark: {
-          mediaQuery: prefersDark /* "@media (prefers-color-scheme: dark)" */,
-        },
-      },
-    }),
-  ],
 };