✨ dark mode added

Author: marcode24

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SettingService } from '@services/setting.service';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,15 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'frontend';
+  constructor(
+    private settingService: SettingService,
+  ) {
+    const theme = localStorage.getItem('theme');
+    if(!theme) {
+      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      this.settingService.setTheme((isDarkMode) ? 'dark' : 'light');
+    } else {
+      this.settingService.setTheme(theme as 'dark'|'light');
+    }
+  }
 }

src/app/auth/auth.component.css

@@ -10,6 +10,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .modal.modal-open {
   display: flex;
   opacity: 1;
@@ -47,7 +48,7 @@
   flex-direction: column;
   border-radius: 1rem;
   max-width: 30rem;
-  background-color: #ffffff;
+  background-color: var(--bg-color-card-2);
   padding: 1rem;
   gap: 1.2rem;
 }

src/app/auth/components/login/login.component.css

@@ -16,6 +16,7 @@ form .sign-in {
   font-size: 42px;
   text-align: center;
   font-weight: bold;
+  color: var(--font-color-primary);
 }
 
 .no-account {
@@ -28,6 +29,7 @@ form .sign-in {
 .no-account span {
   font-size: 24px;
   font-weight: bold;
+  color: var(--font-color-primary);
 }
 
 .no-account a.link {

src/app/auth/components/register/register.component.css

@@ -12,10 +12,11 @@ form {
   gap: 1rem;
 }
 
-form .sign-in {
+form .sign-on {
   font-size: 42px;
   text-align: center;
   font-weight: bold;
+  color: var(--font-color-primary);
 }
 
 .has-account {
@@ -28,6 +29,7 @@ form .sign-in {
 .has-account span {
   font-size: 24px;
   font-weight: bold;
+  color: var(--font-color-primary);
 }
 
 .has-account a.link {

src/app/auth/components/register/register.component.html

@@ -1,6 +1,6 @@
 <div class="register-container">
   <form>
-    <span class="sign-in">Register</span>
+    <span class="sign-on">Register</span>
     <label for="email" class="floating">
       <input type="text" id="email" placeholder="email">
       <span>Email</span>

src/app/core/components/sidebar/sidebar.component.css

@@ -2,17 +2,15 @@ nav {
   position: fixed;
   height: 100%;
   width: 250px;
-  /* background: var(--bg-color); */
-  border-right: 1px solid var(--bg-color);
+  border-right: 1px solid #a5a5a5;
   padding: 6px 14px;
-  z-index: 99;
+  z-index: 103;
   transition: 0.5s ease;
   padding: 0 0.2rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
-  /* border: 1px solid black; */
 }
 
 nav .logo-details {
@@ -77,7 +75,8 @@ nav li .tooltip {
   top: -20px;
   left: calc(100% + 15px);
   z-index: 3;
-  background: #f7f7f7;
+  color: var(--font-color-primary);
+  background: var(--bg-color-card);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   padding: 6px 12px;
   border-radius: 4px;
@@ -87,20 +86,17 @@ nav li .tooltip {
   white-space: nowrap;
   pointer-events: none;
   transition: 0s;
+  display: none;
 }
 
 nav li:hover .tooltip {
   opacity: 1;
   pointer-events: auto;
-  transition: 0.5s;
+  transition: 0.5s ease-out;
   top: 50%;
   transform: translateY(-50%);
 }
 
-nav.open li .tooltip {
-  display: none;
-}
-
 nav li a {
   display: flex;
   height: 100%;
@@ -115,15 +111,16 @@ nav li a {
 
 nav li a:hover,
 .profile .profile-details:hover {
-  background: #e2e2e2;
+  background: var(--bg-hover);
 }
 
 nav li a .links_name {
-  color: var(--bg-color-secondary);
-  font-size: 16px;
-  font-weight: 400;
+  color: var(--font-color-primary);
+  font-size: 19px;
+  font-weight: 500;
   white-space: nowrap;
   opacity: 0;
+  letter-spacing: 1px;
   pointer-events: none;
   transition: 0.4s;
   opacity: 1;
@@ -135,7 +132,7 @@ nav li a:hover i {
 }
 
 nav li i {
-  font-size: 24px;
+  font-size: 30px;
   border-radius: 12px;
 }
 
@@ -203,6 +200,10 @@ nav .profile {
     width: 80px;
   }
 
+  nav li .tooltip {
+    display: block;
+  }
+
   nav .logo-details .logo_name,
   nav li a .links_name,
   .profile-details .username,
@@ -269,7 +270,7 @@ nav .profile {
   }
 
   nav li a i {
-    font-size: 24px;
+    font-size: 28px;
     flex-grow: 0;
   }
 

src/app/core/components/sidebar/sidebar.component.html

@@ -1,4 +1,4 @@
-<nav class="sidebar open">
+<nav class="sidebar">
   <div class="logo-details">
     <i class='bx bx-news icon'></i>
     <span class="logo_name">InfoReader</span>
@@ -26,7 +26,7 @@
       <span class="tooltip">Saved</span>
     </li>
     <li>
-      <a href="#">
+      <a routerLink="/settings">
         <i class='bx bx-cog'></i>
         <span class="links_name">Configuration</span>
       </a>

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

@@ -7,6 +7,7 @@ import { ILogin } from '@interfaces/login.interface';
 import { IResponseLogin } from '@interfaces/response.interface';
 import Storage from "@utils/storage.util";
 import { User } from '@models/user.model';
+import { SettingService } from './setting.service';
 
 const base_url = environment.base_url;
 
@@ -20,6 +21,7 @@ export class AuthService {
 
   constructor(
     private http: HttpClient,
+    private settingService:SettingService,
   ) { }
 
   get headers() {
@@ -48,6 +50,8 @@ export class AuthService {
     return this.http.post<IResponseLogin>(url, data).pipe(map(resp => {
       this.setUserActiveInfo(resp);
       this.isAuthenticatedEmitter.emit(true);
+      const { user } = resp;
+      this.settingService.setTheme(user.darkMode ? 'dark' : 'light');
       return resp;
     }));
   }

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

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import Storage from '@utils/storage.util';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingService {
+  private bodyElement = document.body as HTMLBodyElement;
+  constructor() { }
+
+  setTheme(theme: 'dark' | 'light'): void {
+    if(theme === 'light') {
+      this.bodyElement.classList.remove('dark');
+    }
+    if(theme === 'dark') {
+      this.bodyElement.classList.add('dark');
+    }
+    this.savePreference(theme);
+  }
+
+  private savePreference(theme: 'dark'| 'light') {
+    Storage.deleteLocalStorage('theme');
+    Storage.saveLocalStorage('theme', theme);
+
+  }
+
+  isDarkMode(): boolean {
+    return this.bodyElement.classList.contains('dark');
+  }
+
+}

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

@@ -28,4 +28,9 @@ export class UserService {
     return this.http.patch(url, {}, this.headers);
   }
 
+  setTheme(darkMode: boolean): void {
+    const url = `${base_url}/user/theme`;
+    this.http.patch(url, { darkMode }, this.headers).subscribe(resp => console.log({resp}));
+  }
+
 }