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

View File

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

View File

@ -101,7 +101,12 @@ export const OPENVIDU_COMPONENTS_LIGHT_THEME: OpenViduThemeVariables = {
'--ov-border-focus-color': '#4285f4',
'--ov-activity-status-color': '#c8cdd6',
'--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-activity-status-color': '#c8cdd6ff',
'--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'
};

View File

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