theme clair/sombre , petit defaut sur le footer (#1)

Co-authored-by: styve Lioumba <styve.lioumba@jdc.fr>

.github/workflows/main.yaml

@@ -0,0 +1,16 @@
+name: Main Workflow
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+      - dev
+      - feat/*
+      - fix/*
+
+jobs:
+  run-tests:
+    uses: ./tests/docker-build.yaml

.github/workflows/tests/docker-build.yaml

@@ -2,12 +2,7 @@ name: Docker Build Check
 
 # Déclencheur pour chaque pull request
 on:
-  pull_request:
+  workflow_call:
-    branches:
-      - main
-      - dev
-      - feat/*
-      - fix/*
 
 jobs:
   build:

angular.json

@@ -37,7 +37,7 @@
             ],
             "scripts": [],
             "server": "src/main.server.ts",
-            "prerender": true,
+            "prerender": false,
             "ssr": {
               "entry": "server.ts"
             }

src/app/app.component.html

@@ -1,4 +1,4 @@
-<main class="bg-white dark:bg-gray-900">
+<main class="bg-white dark:bg-gray-900" [ngClass]="themeService.darkModeSignal()">
   <app-nav-bar/>
   <section class="content bg-white dark:bg-gray-900">
     <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { RouterOutlet } from '@angular/router';
+import {RouterOutlet} from '@angular/router';
 import {NavBarComponent} from "@app/shared/components/nav-bar/nav-bar.component";
 import {FooterComponent} from "@app/shared/components/footer/footer.component";
+import {ThemeService} from '@app/core/services/theme/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -13,4 +14,5 @@ import {FooterComponent} from "@app/shared/components/footer/footer.component";
 })
 export class AppComponent {
   title = 'TrouveTonProfile';
+  themeService = inject(ThemeService);
 }

src/app/core/services/theme/theme.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/theme/theme.service.ts

@@ -0,0 +1,14 @@
+import {Injectable, signal} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+
+  darkModeSignal = signal<string>('null');
+
+  updateDarkMode() {
+    this.darkModeSignal.update((value) => (value === 'dark' ? 'null' : 'dark'));
+  }
+
+}

src/app/shared/components/nav-bar/nav-bar.component.html

@@ -1,29 +1,46 @@
-<header class="bg-white dark:bg-gray-900">
+<header class="w-screen bg-white dark:bg-gray-900">
   <div class="w-full">
     <nav
       class="fixed w-full z-20 top-0 start-1/2 max-w-6xl -translate-x-1/2 bg-white dark:bg-gray-900">
       <div
         class="max-w-screen-xl flex flex-nowrap items-center justify-between mx-auto p-4">
         <a [routerLink]="['/']"
-          class="flex items-center space-x-3 rtl:space-x-reverse">
+           class="flex items-center space-x-3 rtl:space-x-reverse">
           <div class="flex flex-row items-center gap-1 mr-3">
             <span class="text-xl select-none text-black dark:text-white">TrouveTonProfile</span>
           </div>
         </a>
         <div class="flex md:order-2 space-x-1 items-center">
-          <button
+          @if (themeService.darkModeSignal() === 'dark') {
-            type="button"
+            <button
-            class="text-black dark:text-white font-medium rounded-lg text-sm px-4 py-2 text-center flex items-center justify-center gap-1">
+              type="button"
+              (click)="toggleDarkMode()"
+              class="text-black dark:text-white font-medium rounded-lg text-sm px-4 py-2 text-center flex items-center justify-center gap-1">
+                <span class="inline-block h-4 w-4">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                       stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
+
+                  </svg>
+
+                </span>
+            </button>
+          } @else {
+            <button
+              type="button"
+              (click)="toggleDarkMode()"
+              class="text-black dark:text-white font-medium rounded-lg text-sm px-4 py-2 text-center flex items-center justify-center gap-1">
                 <span class="inline-block h-4 w-4">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="w-full h-full fill-current"
                     viewBox="0 -960 960 960">
                     <path
-                      d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
+                      d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/>
                   </svg>
                 </span>
-          </button>
+            </button>
+          }
           <span class="text-black dark:text-white"> | </span>
           <button
             type="button"
@@ -34,7 +51,7 @@
                     class="w-full h-full fill-current"
                     viewBox="0 -960 960 960">
                     <path
-                      d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" />
+                      d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/>
                   </svg>
                 </span>
             <span class="hidden sm:block text-black dark:text-white">Se connecter</span>
@@ -57,7 +74,7 @@
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-width="2"
-                d="M1 1h15M1 7h15M1 13h15" />
+                d="M1 1h15M1 7h15M1 13h15"/>
             </svg>
           </button>
         </div>

src/app/shared/components/nav-bar/nav-bar.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {RouterLink} from "@angular/router";
+import {ThemeService} from "@app/core/services/theme/theme.service";
 
 @Component({
   selector: 'app-nav-bar',
@@ -11,5 +12,9 @@ import {RouterLink} from "@angular/router";
   styleUrl: './nav-bar.component.scss'
 })
 export class NavBarComponent {
+  protected themeService: ThemeService = inject(ThemeService);
 
+  toggleDarkMode() {
+    this.themeService.updateDarkMode();
+  }
 }

tailwind.config.js

@@ -1,10 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class', // or 'media' or 'class'
   content: [
     "./src/**/*.{html,ts}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      backgroundColor: ['dark'],
+      textColor: ['dark'],
+    },
   },
   plugins: [],
 }