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:
-    branches:
-      - main
-      - dev
-      - feat/*
-      - fix/*
+  workflow_call:
 
 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 {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,4 +1,4 @@
-<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">
@@ -11,8 +11,24 @@
           </div>
         </a>
         <div class="flex md:order-2 space-x-1 items-center">
+          @if (themeService.darkModeSignal() === 'dark') {
             <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" 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
@@ -24,6 +40,7 @@
                   </svg>
                 </span>
             </button>
+          }
           <span class="text-black dark:text-white"> | </span>
           <button
             type="button"

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: [],
 }