Setting persistent, but conditional dark mode in Angular/JavaScript

I'm trying to allow the user to set a preferred theme using localStorage. This theme should apply to all pages the user visits, except for the login page which should always be set to light mode. Hence, if the user logs out, the website will redirect to the login page in light made. If the user enters any other page after logging in, their saved setting should apply.

I've set up a flag for this in the changeTheme() function, which does not save the current theme to localStorage if the flag is set as false. While this flag works as intended, the theme still changes to light mode after the user logs in.

app.topbar.component.ts

set saveTheme(val: boolean) {
this.layoutService.config.update((config) => ({
...config,
saveTheme: val,
}));
}

get saveTheme(): boolean {
return this.layoutService.config().saveTheme;
}

changeTheme(theme: string, colorScheme: string, saveTheme: boolean = true) {
if (colorScheme == 'light') {
this.colorMode = 'dark';
this.colorTheme = 'lara-dark-teal';
}
else {
this.colorMode = 'light';
this.colorTheme = 'lara-light-teal';
}

this.theme = this.colorTheme;
this.colorScheme = this.colorMode;
this.saveTheme = saveTheme;

// console.log(this.theme)
// console.log(this.colorScheme)
}

//code in logout function
this.changeTheme('lara-light-teal', "dark", false);


app.layout.service.ts

import { Injectable, effect, signal } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';

export interface AppConfig {
inputStyle: string;
colorScheme: string;
theme: string;
ripple: boolean;
menuMode: string;
scale: number;
saveTheme: boolean;
}

interface LayoutState {
staticMenuDesktopInactive: boolean;
overlayMenuActive: boolean;
profileSidebarVisible: boolean;
configSidebarVisible: boolean;
staticMenuMobileActive: boolean;
menuHoverActive: boolean;
}

@Injectable({
providedIn: 'root',
})
export class LayoutService {
_config: AppConfig = {
ripple: false,
inputStyle: 'outlined',
menuMode: 'static',
colorScheme: 'light',
theme: 'lara-light-teal',
saveTheme: true,
scale: 12,
};

config = signal<AppConfig>(this._config);

state: LayoutState = {
staticMenuDesktopInactive: false,
overlayMenuActive: false,
profileSidebarVisible: false,
configSidebarVisible: false,
staticMenuMobileActive: false,
menuHoverActive: false,
};

private configUpdate = new Subject<AppConfig>();

private overlayOpen = new Subject<any>();

configUpdate$ = this.configUpdate.asObservable();

overlayOpen$ = this.overlayOpen.asObservable();

constructor(
private router: Router
) {
const savedTheme = localStorage.getItem('theme');
const savedColorScheme = localStorage.getItem('colorScheme');

if (savedTheme && savedColorScheme) {
this.config.update((config) => ({
...config,
theme: savedTheme,
colorScheme: savedColorScheme,
}));
}

effect(() => {
const config = this.config();
if (this.updateStyle(config)) {
this.changeTheme();
}
this.changeScale(config.scale);
this.onConfigUpdate();
});
}

updateStyle(config: AppConfig) {
return (
config.theme !== this._config.theme ||
config.colorScheme !== this._config.colorScheme ||
config.saveTheme !== this._config.saveTheme
);
}

onConfigUpdate() {
this._config = { ...this.config() };
this.configUpdate.next(this.config());
}

changeTheme() {
const config = this.config();

if (config.saveTheme) {
localStorage.setItem('theme', config.theme);
localStorage.setItem('colorScheme', config.colorScheme);
}

const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
const themeLinkHref = themeLink.getAttribute('href')!;
const newHref = themeLinkHref
.split('/')
.map((el) =>
el == this._config.theme
? (el = config.theme)
: el == `theme-${this._config.colorScheme}`
? (el = `theme-${config.colorScheme}`)
: el
)
.join('/');

this.replaceThemeLink(newHref);

console.log(config.theme)
console.log(config.colorScheme)
console.log(config.saveTheme)
console.log(localStorage.getItem('theme'))
console.log(localStorage.getItem('colorScheme'))
}


How can I get this to work?

Thank you!

Continue reading...