chore(): improvements dark mode

Author: Tony133

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

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

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

@@ -32,5 +32,7 @@
 
   .material-icons {
     font-size: 20px;
+    border-left: 2px solid #fff;
+    padding-left: 10px;
   }
 }

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

@@ -1,5 +1,6 @@
-import { DOCUMENT } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { MediaMatcher } from '@angular/cdk/layout';
 
 @Component({
   selector: 'app-dark-mode-toggle',
@@ -9,32 +10,36 @@ import { Component, Inject, OnInit } from '@angular/core';
 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) {}
+  constructor(
+    @Inject(DOCUMENT)
+    private readonly document: Document,
+    private readonly mediaMatcher: MediaMatcher,
+  ) {}
 
   ngOnInit() {
     const userPrefersDark =
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches;
+      this.mediaMatcher.matchMedia &&
+      this.mediaMatcher.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());
+    localStorage.setItem('theme-mode', isDarkMode.toString());
     this.setDarkMode(isDarkMode);
   }
+
+  private getUserSettingsIsDarkMode(): boolean {
+    return localStorage.getItem('theme-mode') === 'true';
+  }
+
+  private setDarkMode(isDarkMode: boolean) {
+    this.isDarkMode = isDarkMode;
+    this.document.documentElement.setAttribute(
+      'mode',
+      isDarkMode ? 'dark' : 'light',
+    );
+  }
 }

src/app/homepage/footer/footer.component.scss

@@ -69,6 +69,7 @@ footer {
     font-size: 20px;
     margin-left: 15px;
     cursor: pointer;
+    color: #fff;
 
     &:first-of-type {
       font-size: 20px;

src/app/homepage/homepage.component.scss

@@ -63,7 +63,7 @@
 
   a {
     font-weight: 600;
-    color: var(--primary);
+    color: var(--primary-2dp);
     &:hover {
       color: #0894e2;
     }
@@ -190,7 +190,7 @@
   }
   .logo-sponsor {
     width: 160px;
-    filter: grayscale(1);
+    filter: var(--company-logo-filter);
 
     &:hover {
       filter: grayscale(0);
@@ -404,7 +404,7 @@
   max-height: 90px;
   -webkit-filter: var(--company-filter);
   filter: var(--company-filter);
-  opacity: 0.5;
+  opacity: var(--company-logo-opacity);
 
   &:hover {
     -webkit-filter: var(--company-filter-hover);
@@ -467,7 +467,7 @@
     bottom: 20px;
     overflow: hidden;
     padding: 1em;
-    background: var(--background);
+    background: var(--background-2dp) !important;
     text-align: center;
     line-height: 1.5;
     font-size: 13px;

src/app/homepage/newsletter/newsletter.component.scss

@@ -63,7 +63,7 @@
   padding: 10px 20px;
   background: #fdfdfd;
   width: calc(100% - 70px);
-  box-shadow: -2px 2px 3px gainsboro;
+  // box-shadow: -2px 2px 3px var(--background);
   border-radius: 3px;
   max-width: 100%;
   vertical-align: middle;

src/app/shared/components/toc/toc.component.scss

@@ -43,7 +43,7 @@
   }
 
   .current {
-    color: var(--primary);
+    color: var(--primary-3dp);
     font-weight: 600;
 
     &::before {

src/scss/theme.scss

@@ -1,5 +1,8 @@
 .light-mode {
   --primary: #ed2945;
+  --primary-1dp: #d71e38;
+  --primary-2dp: #ed2945;
+  --primary-3dp:#db2840;
 
   --color: #404040;
   --color-1dp: #151515;
@@ -31,27 +34,33 @@
 
   --company-filter: grayscale(100%);
   --company-filter-hover: grayscale(0%);
+  --company-logo-filter: grayscale(1);
+
+  --company-logo-opacity: 0.5;
 }
 
 .dark-mode {
-  --primary: #ff677c;
+  --primary: #da001e;
+  --primary-1dp: #ff445e;
+  --primary-2dp: #f55168;
+  --primary-3dp: #ff586f;
 
   --color: rgba(255, 255, 255, 0.9);
   --color-1dp: rgba(255, 255, 255, 0.8);
 
-  --background: #2c2c2c;
+  --background: #1D1D1D;
   --background-1dp: #272727;
   --background-2dp: #212121;
   --background-3dp: #272727;
 
   --header-background: #151515;
 
   --menu-color: white;
-  --menu-background: #272727;
+  --menu-background: #222222;
 
   --inline-code-color: #8ec2ff;
 
-  --code-background: #1d1d1d;
+  --code-background: #151313;
 
   --warning: #ffb36f;
   --warning-color: #ed8529;
@@ -64,6 +73,9 @@
   --error: #ff677c;
   --error-background: #3a2f30;
 
-  --company-filter: opacity(1);
+  --company-filter: contrast(0.5);
   --company-filter-hover: opacity(1);
+  --company-logo-filter: contrast(0.5);
+
+  --company-logo-opacity: unset;
 }

src/scss/variables.scss

@@ -0,0 +1,8 @@
+// Base colors
+$white-color: #f9f8f8;
+$silver-color: #f3f5f7;
+$darksilver-color: #a5a5a5;
+$grey-color: #404040;
+$darkgrey-color: #272727;
+$black-color: #151515;
+$red-color: #ed2945;

src/styles.scss

@@ -1,6 +1,7 @@
 @use './scss/hljs';
 @use './scss/variables';
 @use './scss/utils';
+@use './scss/theme.scss';
 
 :root {
   --docsearch-primary-color: variables.$red-color;
@@ -157,7 +158,7 @@ tr {
 
 th {
   padding: 20px;
-  background: #efefef;
+  background: var(--background-1dp);
 }
 
 tr:nth-of-type(even) td {