frontend: Improve theme config feature and apply base theme in components

This commit is contained in:
Carlos Santos 2025-09-30 12:06:32 +02:00
parent 0a97f05c58
commit 693de3aa15
2 changed files with 6 additions and 13 deletions

View File

@ -48,6 +48,7 @@ import {
DataPacket_Kind, DataPacket_Kind,
OpenViduComponentsUiModule, OpenViduComponentsUiModule,
OpenViduService, OpenViduService,
OpenViduThemeMode,
OpenViduThemeService, OpenViduThemeService,
ParticipantLeftEvent, ParticipantLeftEvent,
ParticipantLeftReason, ParticipantLeftReason,
@ -135,9 +136,10 @@ export class MeetingComponent implements OnInit {
this.features = this.featureConfService.features; this.features = this.featureConfService.features;
// Change theme variables when custom theme is enabled // Change theme variables when custom theme is enabled
effect(async () => { effect(() => {
if (this.features().hasCustomTheme) { if (this.features().hasCustomTheme) {
const theme = this.features().themeConfig; const theme = this.features().themeConfig;
this.ovThemeService.setTheme(theme!.baseTheme as unknown as OpenViduThemeMode);
this.ovThemeService.updateThemeVariables({ this.ovThemeService.updateThemeVariables({
'--ov-primary-action-color': theme?.primaryColor, '--ov-primary-action-color': theme?.primaryColor,
'--ov-secondary-action-color': theme?.secondaryColor, '--ov-secondary-action-color': theme?.secondaryColor,

View File

@ -2,6 +2,7 @@ import { computed, Injectable, signal } from '@angular/core';
import { import {
MeetAppearanceConfig, MeetAppearanceConfig,
MeetRoomConfig, MeetRoomConfig,
MeetRoomTheme,
ParticipantPermissions, ParticipantPermissions,
ParticipantRole, ParticipantRole,
RecordingPermissions, RecordingPermissions,
@ -36,12 +37,7 @@ export interface ApplicationFeatures {
// Appearance // Appearance
hasCustomTheme: boolean; hasCustomTheme: boolean;
themeConfig?: { themeConfig?: MeetRoomTheme;
primaryColor?: string;
secondaryColor?: string;
backgroundColor?: string;
surfaceColor?: string;
};
} }
/** /**
@ -204,12 +200,7 @@ export class FeatureConfigurationService {
features.showThemeSelector = !hasEnabledTheme; features.showThemeSelector = !hasEnabledTheme;
if (hasEnabledTheme) { if (hasEnabledTheme) {
features.themeConfig = { features.themeConfig = theme;
primaryColor: theme.primaryColor,
secondaryColor: theme.secondaryColor,
backgroundColor: theme.backgroundColor,
surfaceColor: theme.surfaceColor
};
} }
} }