nessar
26ab037084
- Introduced a new `BrandMark` component for branding purposes. - Created a `DashboardPage` component with a responsive layout, including sections for user profile, apartment management, and API demo. - Added styles for the dashboard page to enhance user experience. - Implemented a settings page with theme preferences and session management features. - Developed a sign-in page with branding and user-friendly design. - Established a workspace navigation component for easy access to different sections of the application. - Implemented an `ApartmentService` for managing apartment data with corresponding unit tests. - Created a `ConfigService` for loading application configuration. - Added a `ThemeService` to manage user theme preferences dynamically.
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { DOCUMENT } from '@angular/common';
|
|
import { effect, inject, Injectable, signal } from '@angular/core';
|
|
|
|
export type ThemePreference = 'light' | 'dark' | 'system';
|
|
|
|
const THEME_STORAGE_KEY = 'lmnp-theme';
|
|
|
|
@Injectable({ providedIn: 'root' })
|
|
export class ThemeService {
|
|
private readonly document = inject(DOCUMENT);
|
|
private readonly colorSchemeQuery =
|
|
typeof window.matchMedia === 'function'
|
|
? window.matchMedia('(prefers-color-scheme: dark)')
|
|
: null;
|
|
private readonly systemUsesDark = signal(this.colorSchemeQuery?.matches ?? false);
|
|
|
|
readonly preference = signal<ThemePreference>(this.readPreference());
|
|
|
|
constructor() {
|
|
this.colorSchemeQuery?.addEventListener('change', (event) =>
|
|
this.systemUsesDark.set(event.matches),
|
|
);
|
|
|
|
effect(() => {
|
|
const preference = this.preference();
|
|
const resolvedTheme =
|
|
preference === 'system' ? (this.systemUsesDark() ? 'dark' : 'light') : preference;
|
|
|
|
localStorage.setItem(THEME_STORAGE_KEY, preference);
|
|
this.document.documentElement.dataset['theme'] = resolvedTheme;
|
|
this.document.documentElement.dataset['themePreference'] = preference;
|
|
});
|
|
}
|
|
|
|
setPreference(preference: ThemePreference): void {
|
|
this.preference.set(preference);
|
|
}
|
|
|
|
private readPreference(): ThemePreference {
|
|
const storedPreference = localStorage.getItem(THEME_STORAGE_KEY);
|
|
return storedPreference === 'dark' || storedPreference === 'system'
|
|
? storedPreference
|
|
: 'light';
|
|
}
|
|
}
|