The story of our fight with the mighty dark and light mode

After finding my new companion "dati" on my journeys (I found him in an abandoned mine), we headed out to fight the DarkMode boss, he was very hard, but after spending hours fighting him, we didn't even scratch him AT ALL! So we had to use our ultimate weapon the staff of Youtube tutorials, after using the staff, the boss was forced to watch a 6 minute long tutorial on how to swap styles, after whitch he was easy to beat. My new trusty companion dati SLASHED his arm off! He started screaming like a mad man, afterwards I sliced his head off myself, and took it to the nearest village to sell it and buy myself and dati a new meal and horses. The village was quite happy we did so, and even built a statue of us (it was difficult because im tall and dati is veeeery small). But our adventures didn't end there! To be continued

angular.json

@@ -28,6 +28,9 @@
               "src/styles.scss",
               "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            },
             "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
           },
           "configurations": {

src/app/app.component.ts

@@ -3,8 +3,35 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'admin';
+
+  isDarkMode = true;
+
+  constructor() {
+    this.detectColorScheme();
+  }
+
+  detectColorScheme() {
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      this.isDarkMode = true;
+    }
+    document.documentElement.setAttribute(
+      'data-theme',
+      this.isDarkMode ? 'dark' : 'light'
+    );
+  }
+
+  toggleTheme() {
+    this.isDarkMode = !this.isDarkMode;
+    document.documentElement.setAttribute(
+      'data-theme',
+      this.isDarkMode ? 'dark' : 'light'
+    );
+  }
 }

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

@@ -10,4 +10,7 @@
 
     <a routerLink="/configs/list"><li>Configurations</li></a>
   </ul>
+  <a id="edit-link" (click)="toggleTheme()">
+    <i id="edit" class="bi bi-brightness-high-fill"></i>
+  </a>
 </div>

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

@@ -1,13 +1,25 @@
 #sidebar {
   width: 15.5rem;
-  height: 100%;
+  height: calc(100% - 5rem);
   position: fixed;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
 
   margin-top: 5rem;
   font-size: 1.5rem;
 
   background-color: var(--darkest);
 
+  #edit-link {
+    border: none;
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-align: left;
+    cursor: pointer;
+    margin: 2rem;
+  }
+
   a {
     text-decoration: none;
     color: var(--text);

src/app/components/sidebar/sidebar.component.ts

@@ -1,10 +1,14 @@
 import { Component } from '@angular/core';
+import { AppComponent } from '../../app.component';
 
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss']
+  styleUrls: ['./sidebar.component.scss'],
 })
 export class SidebarComponent {
-
+  constructor(private AppComponent: AppComponent) {}
+  toggleTheme() {
+    this.AppComponent.toggleTheme();
+  }
 }

src/app/components/users-table/users-table.component.html

@@ -27,15 +27,15 @@
           />
         </div>
 
-        <div id="edit">
+        <div id="edit-div">
           <a id="edit-link" routerLink="" (click)="edited.emit(user)"
-            ><i class="bi bi-pencil-square editicon"></i
+            ><i id="edit" class="bi bi-pencil-square editicon"></i
           ></a>
         </div>
 
-        <div id="delete">
+        <div id="delete-div">
           <a id="delete-link" routerLink="" (click)="deleted.emit(user)"
-            ><i class="bi bi-trash-fill deleteicon"></i
+            ><i id="delete" class="bi bi-trash-fill deleteicon"></i
           ></a>
         </div>
       </div>

src/styles.scss

@@ -48,12 +48,22 @@ body {
   --darker: #110d1c;
   --lighter: #26242c;
   --lightest: #4e495b;
-
   --success: #004f00;
-
   --danger: #660000;
   --danger-dark: #440000;
-
   --text: #c8c8c8;
   --text-dark: #6a6a6a;
 }
+
+[data-theme="light"] {
+  --main: #f5f5f5;
+  --darkest: #b5b5b5;
+  --darker: #e2e2e2;
+  --lighter: #f9f9f9;
+  --lightest: #ffffff;
+  --success: #009900;
+  --danger: #ff0000;
+  --danger-dark: #990000;
+  --text: #000000;
+  --text-dark: #444444;
+}