�feat: Added dark mode theme to the docs

package.json

@@ -58,6 +58,7 @@
     "@types/node": "20.3.1",
     "@types/prismjs": "1.26.0",
     "@types/rimraf": "3.0.2",
+    "autoprefixer": "^10.4.17",
     "chokidar": "3.5.3",
     "concurrently": "8.2.0",
     "dgeni": "0.4.14",
@@ -73,7 +74,9 @@
     "karma-jasmine-html-reporter": "2.1.0",
     "lint-staged": "13.2.2",
     "marked": "2.1.3",
+    "postcss": "^8.4.33",
     "rimraf": "5.0.1",
+    "tailwindcss": "^3.4.1",
     "ts-node": "10.9.1",
     "typescript": "5.1.3",
     "uuid": "9.0.0",

src/app/common/social-wrapper/social-wrapper.component.html

@@ -1,4 +1,10 @@
 <div class="social-wrapper">
+  <a
+      (click)="changeTheme()"
+     [title]="this.theme=='light'?'Switch to dark mode':'Switch to light mode'"
+     target="_blank">
+     <i class="fa-solid fa-wand-magic-sparkles"></i>
+  </a>
   <a href="https://twitter.com/nestframework"
      title="Twitter account"
      target="_blank">

src/app/common/social-wrapper/social-wrapper.component.ts

@@ -1,8 +1,62 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-social-wrapper',
   templateUrl: './social-wrapper.component.html',
-  styleUrls: ['./social-wrapper.component.scss']
+  styleUrls: ['./social-wrapper.component.scss'],
 })
-export class SocialWrapperComponent {}
+export class SocialWrapperComponent implements OnInit {
+
+  public theme: string = '';
+
+  constructor(
+    private readonly changeDetectoRef: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    if (localStorage.getItem('color-theme')) {
+      if (localStorage.getItem('color-theme') === 'light') {
+        this.theme = 'light';
+      } else {
+        this.theme = 'dark';
+      }
+
+      // if NOT set via local storage previously
+    } else {
+      if (document.documentElement.classList.contains('dark')) {
+        this.theme = 'light';
+      } else {
+        this.theme = 'dark';
+      }
+    }
+    this.changeDetectoRef.detectChanges();
+  }
+
+  changeTheme(): void {
+    // if set via local storage previously
+    if (localStorage.getItem('color-theme')) {
+      if (localStorage.getItem('color-theme') === 'light') {
+        document.documentElement.classList.add('dark');
+        localStorage.setItem('color-theme', 'dark');
+        this.theme = 'dark';
+      } else {
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('color-theme', 'light');
+        this.theme = 'light';
+      }
+
+      // if NOT set via local storage previously
+    } else {
+      if (document.documentElement.classList.contains('dark')) {
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('color-theme', 'light');
+        this.theme = 'light';
+      } else {
+        document.documentElement.classList.add('dark');
+        localStorage.setItem('color-theme', 'dark');
+        this.theme = 'dark';
+      }
+    }
+    this.changeDetectoRef.detectChanges();
+  }
+}