frontend: integrate ov components theme service for theme management

This commit is contained in:
Carlos Santos 2025-09-11 18:05:27 +02:00
parent 45556ac217
commit ad19b60ea9

View File

@ -1,5 +1,6 @@
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { computed, Inject, Injectable, signal } from '@angular/core'; import { computed, Inject, Injectable, signal } from '@angular/core';
import { OpenViduThemeMode, OpenViduThemeService } from 'openvidu-components-angular';
export type Theme = 'light' | 'dark'; export type Theme = 'light' | 'dark';
@ -15,7 +16,7 @@ export class ThemeService {
public readonly isDark = computed(() => this._currentTheme() === 'dark'); public readonly isDark = computed(() => this._currentTheme() === 'dark');
public readonly isLight = computed(() => this._currentTheme() === 'light'); public readonly isLight = computed(() => this._currentTheme() === 'light');
constructor(@Inject(DOCUMENT) private document: Document) {} constructor(@Inject(DOCUMENT) private document: Document, protected ovComponentsThemeService: OpenViduThemeService) {}
/** /**
* Initializes the theme based on: * Initializes the theme based on:
@ -29,6 +30,7 @@ export class ThemeService {
const initialTheme = savedTheme || systemPreference || 'light'; const initialTheme = savedTheme || systemPreference || 'light';
this.setTheme(initialTheme); this.setTheme(initialTheme);
this.ovComponentsThemeService.setTheme(initialTheme as OpenViduThemeMode);
this.listenToSystemChanges(); this.listenToSystemChanges();
} }
@ -37,8 +39,7 @@ export class ThemeService {
*/ */
public toggleTheme(): void { public toggleTheme(): void {
const newTheme: Theme = this._currentTheme() === 'light' ? 'dark' : 'light'; const newTheme: Theme = this._currentTheme() === 'light' ? 'dark' : 'light';
this.setTheme(newTheme); this.setTheme(newTheme); }
}
/** /**
* Changes the current theme * Changes the current theme
@ -47,6 +48,7 @@ export class ThemeService {
this._currentTheme.set(theme); this._currentTheme.set(theme);
this.applyThemeToDocument(theme); this.applyThemeToDocument(theme);
this.saveThemePreference(theme); this.saveThemePreference(theme);
this.ovComponentsThemeService.setTheme(theme as OpenViduThemeMode);
} }
/** /**