feat(theme): add dark mode toggle

Author: BrunnerLivio

src/app/app.module.ts

@@ -35,6 +35,7 @@ import { BasePageComponent } from './homepage/pages/page/page.component';
 import { PipesComponent } from './homepage/pages/pipes/pipes.component';
 import { SupportComponent } from './homepage/pages/support/support.component';
 import { SharedModule } from './shared/shared.module';
+import { DarkModeToggleComponent } from './homepage/dark-mode-toggle/dark-mode-toggle.component';
 
 const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
   suppressScrollX: true,
@@ -77,6 +78,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     EnterpriseComponent,
     SocialWrapperComponent,
     NewsletterComponent,
+    DarkModeToggleComponent,
   ],
   bootstrap: [AppComponent],
   providers: [

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

@@ -1,4 +1,5 @@
 <div class="social-wrapper">
+  <app-dark-mode-toggle></app-dark-mode-toggle>
   <a href="https://twitter.com/nestframework" target="_blank">
     <i class="fab fa-twitter"></i>
   </a>

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

@@ -5,6 +5,7 @@
   float: right;
   padding-right: 40px;
   position: relative;
+  display: flex;
 
   a {
     @extend .transition-fast;

src/app/homepage/dark-mode-toggle/dark-mode-toggle.component.html

@@ -0,0 +1,4 @@
+<button class="dark-mode-toggle" (click)="toggleDarkMode()">
+  <span class="material-icons" *ngIf="!isDarkMode"> light_mode </span>
+  <span class="material-icons" *ngIf="isDarkMode"> dark_mode </span>
+</button>

src/app/homepage/dark-mode-toggle/dark-mode-toggle.component.scss

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dark-mode-toggle {
+  // Button reset
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 15px;
+  cursor: pointer;
+  color: #fff;
+
+  &:hover {
+    color: var(--primary);
+  }
+
+  .material-icons {
+    font-size: 20px;
+  }
+}

src/app/homepage/dark-mode-toggle/dark-mode-toggle.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DarkModeToggleComponent } from './dark-mode-toggle.component';
+
+describe('DarkModeToggleComponent', () => {
+  let component: DarkModeToggleComponent;
+  let fixture: ComponentFixture<DarkModeToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DarkModeToggleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DarkModeToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/homepage/dark-mode-toggle/dark-mode-toggle.component.ts

@@ -0,0 +1,40 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dark-mode-toggle',
+  templateUrl: './dark-mode-toggle.component.html',
+  styleUrls: ['./dark-mode-toggle.component.scss'],
+})
+export class DarkModeToggleComponent implements OnInit {
+  isDarkMode: boolean;
+
+  private getUserSettingsIsDarkMode(): boolean {
+    return localStorage.getItem('DARK_MODE') === 'true';
+  }
+
+  private setDarkMode(isDarkMode: boolean) {
+    this.isDarkMode = isDarkMode;
+    this.document.documentElement.setAttribute(
+      'mode',
+      isDarkMode ? 'dark' : 'light',
+    );
+  }
+
+  constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+
+  ngOnInit() {
+    const userPrefersDark =
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
+    // In case the user has used the toggle button, we prioritize it over the
+    // system settings
+    this.setDarkMode(this.getUserSettingsIsDarkMode() || userPrefersDark);
+  }
+
+  toggleDarkMode() {
+    const isDarkMode = !this.isDarkMode;
+    localStorage.setItem('DARK_MODE', isDarkMode.toString());
+    this.setDarkMode(isDarkMode);
+  }
+}

src/styles.scss

@@ -26,6 +26,11 @@ body {
   color: var(--color);
   margin: 0;
   -webkit-font-smoothing: antialiased;
+  -webkit-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
+  -moz-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
+  -ms-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
+  -o-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
+  transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
 }
 
 a {