From 0cdb46a79ce027799582bad940b7cc2c8fc98161 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 25 Sep 2025 13:13:19 +0200
Subject: [PATCH] ov-components: load predefined themes dynamically in
 ThemeSelectorComponent

---
 .../theme-selector/theme-selector.component.ts     |  6 +++++-
 .../src/lib/models/theme.model.ts                  | 14 ++++++++++++--
 .../src/lib/services/theme/theme.service.ts        |  4 ++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts
index 2143f756..1d0d6013 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts
@@ -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();
 	}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts
index cc437ac9..607a5ed3 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts
@@ -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'
 };
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/theme/theme.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/theme/theme.service.ts
index b7d19c42..7c02d7e2 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/theme/theme.service.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/theme/theme.service.ts
@@ -50,6 +50,10 @@ export class OpenViduThemeService {
 		this.currentThemeSubject.next(initialTheme);
 	}
 
+	getAllThemes(): OpenViduThemeMode[] {
+		return Object.values(OpenViduThemeMode);
+	}
+
 	/**
 	 * Gets the current theme mode
 	 */