Add theme switcher before user sign in

src/app/components/core/footer/footer.component.html

@@ -7,6 +7,6 @@
     <div class="flex-row flex-space-between text-muted margin-top-10">
         <div>© {{ currentDate.getFullYear() }} {{ apiService }}</div>
         <div>·</div>
-        <div><a href="https://github.com/VernissageApp/Home" rel="noopener">Powered by Vernissage</a></div>
+        <div><a href="https://github.com/VernissageApp" rel="noopener">Powered by Vernissage</a></div>
     </div>
 </div>

src/app/components/core/header/header.component.html

@@ -101,6 +101,9 @@
         }
 
         @if(!user || !isLoggedIn) {
+            <button mat-icon-button color="primary" class="margin-right-5" (click)="onThemeToggle()" aria-label="Switch theme">
+                <mat-icon>{{ isLightTheme ? 'dark_mode' : 'light_mode' }}</mat-icon>
+            </button>
             <button *ngIf="isRegistrationEnabled()" mat-stroked-button color="primary" [routerLink]="['/register']" class="margin-right-5">Sign up</button>
             <button mat-button [routerLink]="['/login']">Log in</button>
         }

src/app/components/core/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
 import { RouteReuseStrategy, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
@@ -13,6 +13,7 @@ import { CustomReuseStrategy } from 'src/app/common/custom-reuse-strategy';
 import { SwPush } from '@angular/service-worker';
 import { UserDisplayService } from 'src/app/services/common/user-display.service';
 import { SettingsService } from 'src/app/services/http/settings.service';
+import { PreferencesService } from 'src/app/services/common/preferences.service';
 
 @Component({
     selector: 'app-header',
@@ -30,6 +31,7 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe
     public showTrending = false;
     public showEditorsChoice = false;
     public showCategories = false;
+    public isLightTheme = false;
 
     private userChangeSubscription?: Subscription;
     private notificationChangeSubscription?: Subscription;
@@ -44,6 +46,8 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe
         private routeReuseStrategy: RouteReuseStrategy,
         private router: Router,
         private swPushService: SwPush,
+        private preferencesService: PreferencesService,
+        private renderer: Renderer2,
         breakpointObserver: BreakpointObserver
     ) {
         super(breakpointObserver)
@@ -55,6 +59,7 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe
         this.user = this.authorizationService.getUser();
         this.isLoggedIn = await this.authorizationService.isLoggedIn();
         this.avatarUrl = this.user?.avatarUrl ?? 'assets/avatar.svg';
+        this.isLightTheme = this.preferencesService.isLightTheme;
 
         this.userChangeSubscription = this.authorizationService.changes.subscribe(async (user) => {
             this.user = user;
@@ -115,6 +120,11 @@ export class HeaderComponent extends ResponsiveComponent implements OnInit, OnDe
         return this.instanceService.instance?.registrationOpened === false && this.instanceService.instance?.registrationByInvitationsOpened === true;
     }
 
+    onThemeToggle(): void {
+        this.preferencesService.toggleTheme(this.renderer);
+        this.isLightTheme = this.preferencesService.isLightTheme;
+    }
+
     private async loadNotificationCount(): Promise<void> {
         try {
             if (this.user) {

src/app/pages/preferences/preferences.page.ts

@@ -1,13 +1,11 @@
-import { Component, Inject, Renderer2, OnInit } from '@angular/core';
+import { Component, OnInit, Renderer2 } from '@angular/core';
 import { fadeInAnimation } from "../../animations/fade-in.animation";
 import { EventType } from 'src/app/models/event-type';
 import { ResponsiveComponent } from 'src/app/common/responsive';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { DOCUMENT } from '@angular/common';
 import { PreferencesService } from 'src/app/services/common/preferences.service';
 import { RouteReuseStrategy } from '@angular/router';
 import { CustomReuseStrategy } from 'src/app/common/custom-reuse-strategy';
-import { WindowService } from 'src/app/services/common/window.service';
 
 @Component({
     selector: 'app-preferences',
@@ -32,11 +30,9 @@ export class PreferencesPage extends ResponsiveComponent implements OnInit {
     alwaysShowSdrPhoto = false;
 
     constructor(
-        @Inject(DOCUMENT) private document: Document,
         private preferencesService: PreferencesService,
         private routeReuseStrategy: RouteReuseStrategy,
         private renderer: Renderer2,
-        private windowService: WindowService,
         breakpointObserver: BreakpointObserver
     ) {
         super(breakpointObserver);
@@ -60,14 +56,7 @@ export class PreferencesPage extends ResponsiveComponent implements OnInit {
 
     onThemeChange(): void {
         this.preferencesService.isLightTheme = this.isLightTheme;
-
-        if (this.isLightTheme) {
-            this.renderer.removeClass(this.document.body, 'dark-theme');
-            this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#fafafa");
-        } else {
-            this.renderer.addClass(this.document.body, 'dark-theme');
-            this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#303030");
-        }
+        this.preferencesService.applyTheme(this.renderer);
     }
 
     onAvatarChange(): void {

src/app/services/common/preferences.service.ts

@@ -1,5 +1,7 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, Renderer2 } from '@angular/core';
 import { SsrCookieService } from './ssr-cookie.service';
+import { WindowService } from './window.service';
+import { DOCUMENT } from '@angular/common';
 
 // We are storing preferences in the cookies instead of local storage because of
 // Server Side Rendering. The cookies are send to server even with the first browser
@@ -11,7 +13,10 @@ import { SsrCookieService } from './ssr-cookie.service';
 export class PreferencesService {
     private readonly longFuture = new Date('Sat, 01 Jan 2050 00:00:00 GMT');
 
-    constructor(private cookieService: SsrCookieService) {
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        private cookieService: SsrCookieService,
+        private windowService: WindowService) {
     }
 
     public get isLightTheme(): boolean {
@@ -85,4 +90,21 @@ export class PreferencesService {
     public set alwaysShowSdrPhoto(alwaysShowSdrPhoto: boolean) {
         this.cookieService.set('alwaysShowSdrPhoto', alwaysShowSdrPhoto ? 'true' : 'false', { expires: this.longFuture });
     }
+
+    public toggleTheme(renderer: Renderer2): void {
+        const isLightThemeInternal = this.isLightTheme;
+        this.isLightTheme = !isLightThemeInternal;
+
+        this.applyTheme(renderer);
+    }
+
+    public applyTheme(renderer: Renderer2): void {
+        if (this.isLightTheme) {
+            renderer.removeClass(this.document.body, 'dark-theme');
+            this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#fafafa");
+        } else {
+            renderer.addClass(this.document.body, 'dark-theme');
+            this.windowService.nativeWindow.document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#303030");
+        }
+    }
 }

src/index.html

@@ -12,7 +12,7 @@
 
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=account_box,account_circle,alternate_email,arrow_back,arrow_back_ios,arrow_drop_down,arrow_forward_ios,arrow_upward,backspace,bookmark,brightness_7,bug_report,build,camera,camera_alt,camera_roll,cancel,chat_bubble,check,check_circle,communities,delete,dns,edit,email,error,exit_to_app,experiment,explore,export_notes,face,feedback,fiber_new,file_copy,grade,groups,hide_image,home,host,https,hub,info,insert_photo,key,language,license,local_police,loyalty,menu,more_vert,notifications_none,pan_tool,people,person,person_add,person_cancel,person_check,person_outline,pest_control,place,public,public_off,radio_button_checked,radio_button_unchecked,record_voice_over,release_alert,remove_red_eye,reply,report,report_problem,rocket,rocket_launch,scanner,search,sentiment_very_dissatisfied,settings,settings_applications,settings_backup_restore,settings_photo_camera,smart_toy,star,star_border,stars,swap_vertical_circle,sync,tag,timeline,trending_up,unpublished,visibility,visibility_off,voice_over_off,warning&display=block" rel="stylesheet"/>
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=account_box,account_circle,alternate_email,arrow_back,arrow_back_ios,arrow_drop_down,arrow_forward_ios,arrow_upward,backspace,bookmark,brightness_7,bug_report,build,camera,camera_alt,camera_roll,cancel,chat_bubble,check,check_circle,communities,dark_mode,delete,dns,edit,email,error,exit_to_app,experiment,explore,export_notes,face,feedback,fiber_new,file_copy,grade,groups,hide_image,home,host,https,hub,info,insert_photo,key,language,license,light_mode,local_police,loyalty,menu,more_vert,notifications_none,pan_tool,people,person,person_add,person_cancel,person_check,person_outline,pest_control,place,public,public_off,radio_button_checked,radio_button_unchecked,record_voice_over,release_alert,remove_red_eye,reply,report,report_problem,rocket,rocket_launch,scanner,search,sentiment_very_dissatisfied,settings,settings_applications,settings_backup_restore,settings_photo_camera,smart_toy,star,star_border,stars,swap_vertical_circle,sync,tag,timeline,trending_up,unpublished,visibility,visibility_off,voice_over_off,warning&display=block" rel="stylesheet"/>
 
   <style type="text/css">
     body,