chore(): improvements theme mode toggle and others update

Author: Tony133

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

@@ -27,5 +27,5 @@
      rel="nofollow">
     <i class="fab fa-discord"></i>
   </a>
-  <app-dark-mode-toggle></app-dark-mode-toggle>
+  <app-theme-mode-toggle></app-theme-mode-toggle>
 </div>

src/app/shared/components/dark-mode-toggle/dark-mode-toggle.component.spec.ts

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

src/app/shared/components/dark-mode-toggle/dark-mode-toggle.component.html renamed to src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.html

@@ -5,7 +5,7 @@
   justify-content: center;
 }
 
-.dark-mode-toggle {
+.theme-mode-toggle {
   // Button reset
   border: none;
   margin: 0;

src/app/shared/components/dark-mode-toggle/dark-mode-toggle.component.scss renamed to src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss

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

src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.spec.ts

@@ -4,11 +4,11 @@ import { MediaMatcher } from '@angular/cdk/layout';
 import { StorageService } from '../../services/storage.service';
 
 @Component({
-  selector: 'app-dark-mode-toggle',
-  templateUrl: './dark-mode-toggle.component.html',
-  styleUrls: ['./dark-mode-toggle.component.scss'],
+  selector: 'app-theme-mode-toggle',
+  templateUrl: './theme-mode-toggle.component.html',
+  styleUrls: ['./theme-mode-toggle.component.scss'],
 })
-export class DarkModeToggleComponent implements OnInit {
+export class ThemeModeToggleComponent implements OnInit {
   isDarkMode: boolean;
 
   constructor(
@@ -19,25 +19,25 @@ export class DarkModeToggleComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    const userPrefersDark =
+    const userPrefersTheme =
       this.mediaMatcher.matchMedia &&
-      this.mediaMatcher.matchMedia('(prefers-color-scheme: dark)').matches;
+      this.mediaMatcher.matchMedia('(prefers-color-scheme: light)').matches;
     // In case the user has used the toggle button, we prioritize it over the
     // system settings
-    this.setDarkMode(this.getUserSettingsIsDarkMode() || userPrefersDark);
+    this.setThemeMode(this.getUserSettingsIsDarkMode() || userPrefersTheme);
   }
 
-  toggleDarkMode() {
+  toggleThemeMode() {
     const isDarkMode = !this.isDarkMode;
     this.storageService.set('theme-mode', isDarkMode.toString());
-    this.setDarkMode(isDarkMode);
+    this.setThemeMode(isDarkMode);
   }
 
   private getUserSettingsIsDarkMode(): boolean {
     return this.storageService.get('theme-mode') === 'true';
   }
 
-  private setDarkMode(isDarkMode: boolean) {
+  private setThemeMode(isDarkMode: boolean) {
     this.isDarkMode = isDarkMode;
     this.document.documentElement.setAttribute(
       'mode',

src/app/shared/components/dark-mode-toggle/dark-mode-toggle.component.ts renamed to src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { StorageService } from './services/storage.service';
-import { DarkModeToggleComponent } from './components/dark-mode-toggle/dark-mode-toggle.component';
+import { ThemeModeToggleComponent } from './components/theme-mode-toggle/theme-mode-toggle.component';
 import { BannerCoursesAuthComponent } from './components/banner-courses-auth/banner-courses-auth.component';
 import { BannerCoursesGraphQLCodeFirstComponent } from './components/banner-courses-graphql-cf/banner-courses-graphql-cf.component';
 import { BannerDevtoolsComponent } from './components/banner-devtools/banner-devtools.component';
@@ -26,7 +26,7 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerCoursesGraphQLCodeFirstComponent,
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
-    DarkModeToggleComponent,
+    ThemeModeToggleComponent,
   ],
   exports: [
     ExtensionPipe,
@@ -39,7 +39,7 @@ import { ExtensionPipe } from './pipes/extension.pipe';
     BannerCoursesGraphQLCodeFirstComponent,
     BannerDevtoolsComponent,
     BannerCoursesAuthComponent,
-    DarkModeToggleComponent,
+    ThemeModeToggleComponent,
   ],
   providers: [StorageService],
 })