feat: 💄 Add dark mode toggle (#36)

* feat: 💄 Add darkr mode toggle

* font replace

Author: ArturBa

apps/spotify/src/app/app.component.ts

@@ -1,5 +1,6 @@
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 
+import { DOCUMENT } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
@@ -15,22 +16,21 @@ import { environment } from '../environments/environment';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit, OnDestroy {
-  @HostBinding('class') className = '';
-
   protected readonly subscriptions: Subscription[] = [];
   protected readonly darkClassName = 'darkMode';
 
   cookiesAccepted = true;
 
   constructor(
     protected userSettings: UserSettingsService,
-    protected env: EnvSettingsService
+    protected env: EnvSettingsService,
+    @Inject(DOCUMENT) private document: Document
   ) {}
 
   ngOnInit(): void {
     this.env.init(environment);
     const darkModeSub = this.userSettings.darkModeOn$.subscribe((darkMode) => {
-      this.className = darkMode ? this.darkClassName : '';
+      this.handleDarkModeChange(darkMode);
     });
     this.subscriptions.push(darkModeSub);
     this.userSettings.cookiesAccepted$
@@ -52,4 +52,12 @@ export class AppComponent implements OnInit, OnDestroy {
     this.cookiesAccepted = true;
     this.userSettings.allowCookies();
   }
+
+  protected handleDarkModeChange(newMode: boolean) {
+    if (newMode) {
+      this.document.body.classList.add(this.darkClassName);
+    } else {
+      this.document.body.classList.remove(this.darkClassName);
+    }
+  }
 }

apps/spotify/src/assets/logo_1x2.png

@@ -9,8 +9,9 @@
     <meta name="description" content="Spotify Karaoke: Sing along with us!" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
-      href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+      href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"
       rel="stylesheet"
+      type="text/css"
     />
 
     <!-- Open Graph / Facebook -->

apps/spotify/src/assets/logo_1x2_bg.png

@@ -18,7 +18,7 @@ body {
 body {
   margin: 0;
   text-overflow: ellipsis;
-  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  font-family: Lato, 'Helvetica Neue', sans-serif;
   overflow: overlay;
 }
 

apps/spotify/src/assets/logo_1x2_dark.png

@@ -26,8 +26,8 @@
 
 .material-icons {
   font-size: 24px;
-  font-family: 'Material Icons', 'Material Icons';
+  font-family: 'Material Icons';
   .mat-badge-content {
-    font-family: 'Roboto';
+    font-family: 'Lato';
   }
 }

apps/spotify/src/index.html

@@ -9,22 +9,22 @@
 
 // Fonts
 @import 'https://fonts.googleapis.com/css?family=Material+Icons';
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,500');
 
 $fontConfig: (
-  display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
-  display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
-  display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0em),
-  display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
-  headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0em),
-  title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
-  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
-  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
-  body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
-  body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
-  button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
-  caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
-  input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px),
+  display-4: mat-typography-level(112px, 112px, 300, 'Lato', -0.0134em),
+  display-3: mat-typography-level(56px, 56px, 400, 'Lato', -0.0089em),
+  display-2: mat-typography-level(45px, 48px, 400, 'Lato', 0em),
+  display-1: mat-typography-level(34px, 40px, 400, 'Lato', 0.0074em),
+  headline: mat-typography-level(24px, 32px, 400, 'Lato', 0em),
+  title: mat-typography-level(20px, 32px, 500, 'Lato', 0.0075em),
+  subheading-2: mat-typography-level(16px, 28px, 400, 'Lato', 0.0094em),
+  subheading-1: mat-typography-level(15px, 24px, 500, 'Lato', 0.0067em),
+  body-2: mat-typography-level(14px, 24px, 500, 'Lato', 0.0179em),
+  body-1: mat-typography-level(14px, 20px, 400, 'Lato', 0.0179em),
+  button: mat-typography-level(14px, 14px, 500, 'Lato', 0.0893em),
+  caption: mat-typography-level(12px, 20px, 400, 'Lato', 0.0333em),
+  input: mat-typography-level(inherit, 1.125, 400, 'Lato', 1.5px),
 );
 
 // Foreground Elements