ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: load predefined themes dynamically in ThemeSelectorComponent

master
Carlos Santos 2025-09-25 13:13:19 +02:00
parent 7071385e22
commit 0cdb46a79c
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts
View File

@ -42,9 +42,13 @@ import { OpenViduThemeMode } from '../../../models/theme.model';
styleUrl: './theme-selector.component.scss' styleUrl: './theme-selector.component.scss'
}) })
export class ThemeSelectorComponent { export class ThemeSelectorComponent {
protected predefinedThemes: OpenViduThemeMode[] = Object.values(OpenViduThemeMode); protected predefinedThemes: OpenViduThemeMode[] = [];
constructor(private themeService: OpenViduThemeService) {} constructor(private themeService: OpenViduThemeService) {}
ngOnInit() {
this.predefinedThemes = this.themeService.getAllThemes();
}
get currentTheme() { get currentTheme() {
return this.themeService.getCurrentTheme(); return this.themeService.getCurrentTheme();
} }

14
openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts
View File

@ -101,7 +101,12 @@ export const OPENVIDU_COMPONENTS_LIGHT_THEME: OpenViduThemeVariables = {
'--ov-border-focus-color': '#4285f4', '--ov-border-focus-color': '#4285f4',
'--ov-activity-status-color': '#c8cdd6', '--ov-activity-status-color': '#c8cdd6',
'--ov-broadcasting-color': '#8837f1', '--ov-broadcasting-color': '#8837f1',
'--ov-video-background': '#000000' '--ov-video-background': '#000000',
'--ov-toolbar-buttons-radius': '50%',
'--ov-leave-button-radius': '10px',
'--ov-video-radius': '5px',
'--ov-surface-radius': '5px'
}; };
/** /**
@ -134,5 +139,10 @@ export const OPENVIDU_COMPONENTS_DARK_THEME: OpenViduThemeVariables = {
'--ov-border-focus-color': '#5294ff', '--ov-border-focus-color': '#5294ff',
'--ov-activity-status-color': '#c8cdd6ff', '--ov-activity-status-color': '#c8cdd6ff',
'--ov-broadcasting-color': '#9d5af3ff', '--ov-broadcasting-color': '#9d5af3ff',
'--ov-video-background': '#000000' '--ov-video-background': '#000000',
'--ov-toolbar-buttons-radius': '50%',
'--ov-leave-button-radius': '10px',
'--ov-video-radius': '5px',
'--ov-surface-radius': '5px'
}; };

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/theme/theme.service.ts
View File

@ -50,6 +50,10 @@ export class OpenViduThemeService {
this.currentThemeSubject.next(initialTheme); this.currentThemeSubject.next(initialTheme);
} }
getAllThemes(): OpenViduThemeMode[] {
return Object.values(OpenViduThemeMode);
}
/** /**
* Gets the current theme mode * Gets the current theme mode
*/ */