feat: TT-332 dark mode implementation

Author: JosueOb

src/app/app.module.ts

@@ -86,6 +86,7 @@ import { TechnologyReportComponent } from './modules/technology-report/pages/tec
 import { CalendarComponent } from './modules/time-entries/components/calendar/calendar.component';
 import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { DarkModeComponent } from './modules/shared/components/dark-mode/dark-mode.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -140,6 +141,7 @@ const maskConfig: Partial<IConfig> = {
     TechnologyReportTableComponent,
     CalendarComponent,
     DropdownComponent,
+    DarkModeComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/shared/components/dark-mode/dark-mode.component.html

@@ -0,0 +1,16 @@
+<button
+  class="w-10 h-6 rounded-full bg-white flex items-center transition duration-300 focus:outline-none shadow"
+  (click)="changeToDarkOrLightTheme()"
+>
+  <div
+    #themeToggle
+    class="w-7 h-7 relative rounded-full transition duration-500 transform bg-yellow-300 -translate-x-1 p-1"
+  >
+    <ng-container *ngIf="isDarkTheme(); else elseToggle">
+      <img src="assets/icons/moon.svg" alt="moon icon" />
+    </ng-container>
+    <ng-template #elseToggle>
+      <img src="assets/icons/sun.svg" alt="sun icon" />
+    </ng-template>
+  </div>
+</button>

src/app/modules/shared/components/dark-mode/dark-mode.component.scss

@@ -0,0 +1,50 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DarkModeComponent } from './dark-mode.component';
+
+describe('DarkModeComponent', () => {
+  let component: DarkModeComponent;
+  let fixture: ComponentFixture<DarkModeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DarkModeComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DarkModeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    localStorage.removeItem('theme');
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should be clear the default theme', () => {
+    expect(component.theme).toBe('light');
+  });
+
+  it('should change the value of the theme property if it exists in the local storage', () => {
+    localStorage.setItem('theme', 'dark');
+    component.checkThemeInLocalStorage();
+    expect(component.theme).toBe('dark');
+  });
+
+  it('should be light theme if it does not exist in local storage', () => {
+    component.checkThemeInLocalStorage();
+    expect(component.theme).toBe('light');
+  });
+
+  it('should be changed to dark mode if the mode toggle is selected', () => {
+    component.themeToggle.nativeElement.click();
+    fixture.detectChanges();
+    expect(component.theme).toBe('dark');
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+});

src/app/modules/shared/components/dark-mode/dark-mode.component.spec.ts

@@ -0,0 +1,73 @@
+import { AfterViewInit, ElementRef, ViewChild, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dark-mode',
+  templateUrl: './dark-mode.component.html',
+  styleUrls: ['./dark-mode.component.scss'],
+})
+export class DarkModeComponent implements AfterViewInit {
+  public theme = 'light';
+
+  @ViewChild('themeToggle') themeToggle: ElementRef;
+
+  constructor() {
+    this.checkThemeInLocalStorage();
+    this.addOrRemoveDarkMode();
+  }
+
+  ngAfterViewInit(): void {
+    this.switchThemeToggleStyles(this.theme);
+  }
+
+  getLocalStorageTheme(): string {
+    return localStorage.getItem('theme') || 'light';
+  }
+
+  setLocalStorageTheme(theme: string): void {
+    localStorage.setItem('theme', theme);
+  }
+
+  checkThemeInLocalStorage(): void {
+    if ('theme' in localStorage) {
+      this.theme = this.getLocalStorageTheme();
+    } else {
+      this.setLocalStorageTheme(this.theme);
+    }
+  }
+
+  isDarkTheme(): boolean {
+    return this.theme === 'dark' ? true : false;
+  }
+
+  addOrRemoveDarkMode(): void {
+    if (this.isDarkTheme()) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  changeToDarkOrLightTheme(): void {
+    if (this.isDarkTheme()) {
+      this.theme = 'light';
+    } else {
+      this.theme = 'dark';
+    }
+    this.setLocalStorageTheme(this.theme);
+    this.switchThemeToggleStyles(this.theme);
+    this.addOrRemoveDarkMode();
+  }
+
+  switchThemeToggleStyles(theme: string): void {
+    switch (theme) {
+      case 'dark':
+        this.themeToggle.nativeElement.classList.remove('bg-yellow-300', '-translate-x-1');
+        this.themeToggle.nativeElement.classList.add('bg-gray-300', 'translate-x-1/2');
+        break;
+      case 'light':
+        this.themeToggle.nativeElement.classList.remove('bg-gray-300', 'translate-x-1/2');
+        this.themeToggle.nativeElement.classList.add('bg-yellow-300', '-translate-x-1');
+        break;
+    }
+  }
+}

src/app/modules/shared/components/dark-mode/dark-mode.component.ts

@@ -1,5 +1,5 @@
-<div class="d-flex" id="wrapper">
-  <div class="bg-light border-right" id="sidebar-wrapper">
+<div class="d-flex dark:bg-gray" id="wrapper">
+  <div class="border-right dark:bg-grey-dark" id="sidebar-wrapper">
     <div class="sidebar-heading" style="text-align: center">
       <img src="assets/img/ioet.png" width="90" height="auto" style="padding-top: 2rem; padding-bottom: 2rem;" alt="logo" />
     </div>
@@ -8,7 +8,7 @@
               *ngFor="let item of itemsSidebar"
               [routerLink]="item.route"
               routerLinkActive=""
-              class="list-group-item list-group-item-action bg-light"
+              class="list-group-item list-group-item-action dark:bg-grey-dark dark:text-white"
               [ngClass]="{active: item.active}"
             >
               <i class="{{ item.icon }}"></i> {{ item.text }}
@@ -20,6 +20,9 @@
       <button class="btn btn-primary" id="menu-toggle">
         Toggle Menu
       </button>
+      <div class="dark-mode-toggle">
+        <app-dark-mode></app-dark-mode>
+      </div>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -53,6 +53,7 @@ body {
   font-weight: bold;
   text-decoration: underline;
   border-color: $primary;
+  background-color: transparent;
 }
 
 .full-height {
@@ -62,3 +63,9 @@ body {
   height: -o-calc(100vh - 12vh);
   height: calc(100vh - 12vh);
 }
+
+.dark-mode-toggle{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}

src/app/modules/shared/components/sidebar/sidebar.component.scss

@@ -5,7 +5,7 @@ module.exports = {
         './src/**/*.{html,ts}',
       ]
     },
-    darkMode: false,
+    darkMode: 'class',
     theme: {
       extend: {
         screens: {