neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend/backend: add accent color support in theme configuration and update related components

Browse Source
This commit is contained in:
Carlos Santos 2025-10-01 12:08:25 +02:00
parent 116e709f25
commit bfb1736b35
7 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/controllers/global-config/appearance-config.controller.ts
View File

@ -22,6 +22,7 @@ export const updateRoomsAppearanceConfig = async (req: Request, res: Response) =
newTheme.backgroundColor = newTheme.backgroundColor || existingTheme.backgroundColor;
newTheme.primaryColor = newTheme.primaryColor || existingTheme.primaryColor;
newTheme.secondaryColor = newTheme.secondaryColor || existingTheme.secondaryColor;
newTheme.accentColor = newTheme.accentColor || existingTheme.accentColor;
newTheme.surfaceColor = newTheme.surfaceColor || existingTheme.surfaceColor;
}

1
backend/src/middlewares/request-validators/room-validator.middleware.ts
View File

@ -105,6 +105,7 @@ const RoomThemeSchema = z.object({
backgroundColor: hexColorSchema.optional(),
primaryColor: hexColorSchema.optional(),
secondaryColor: hexColorSchema.optional(),
accentColor: hexColorSchema.optional(),
surfaceColor: hexColorSchema.optional()
});

1
backend/tests/integration/api/global-config/appearance.test.ts
View File

@ -31,6 +31,7 @@ describe('Rooms Appearance Config API Tests', () => {
backgroundColor: '#121212',
primaryColor: '#bb86fc',
secondaryColor: '#03dac6',
accentColor: '#09554dff',
surfaceColor: '#1f1f1f'
}
]

4
frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss
View File

@ -49,13 +49,13 @@
// Color picker grid layout - responsive and clean
.color-picker-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(5, 1fr);
gap: var(--ov-meet-spacing-xl);
margin: var(--ov-meet-spacing-lg) 0;
// Tablet and larger - maintain 4 columns
@include ov-tablet-up {
gap: var(--ov-meet-spacing-xxl);
gap: var(--ov-meet-spacing-xs);
}
// Small tablets - 2 columns

18
frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.ts
View File

@ -14,12 +14,13 @@ import { GlobalConfigService, NotificationService } from '@lib/services';
import { MeetAppearanceConfig, MeetRoomTheme, MeetRoomThemeMode } from '@lib/typings/ce';
import { OPENVIDU_COMPONENTS_DARK_THEME, OPENVIDU_COMPONENTS_LIGHT_THEME } from 'openvidu-components-angular';
type ColorField = 'backgroundColor' | 'primaryColor' | 'secondaryColor' | 'surfaceColor';
type ColorField = 'backgroundColor' | 'primaryColor' | 'secondaryColor' | 'accentColor' | 'surfaceColor';
interface ThemeColors {
backgroundColor: string;
primaryColor: string;
secondaryColor: string;
accentColor: string;
surfaceColor: string;
}
@ -56,6 +57,7 @@ export class ConfigComponent implements OnInit {
backgroundColor: new FormControl<string>('', { nonNullable: true }),
primaryColor: new FormControl<string>('', { nonNullable: true }),
secondaryColor: new FormControl<string>('', { nonNullable: true }),
accentColor: new FormControl<string>('', { nonNullable: true }),
surfaceColor: new FormControl<string>('', { nonNullable: true })
});
@ -75,8 +77,13 @@ export class ConfigComponent implements OnInit {
},
{
key: 'secondaryColor',
label: 'Secondary buttons',
description: 'Colors for secondary elements such as logo and icons backgrounds, borders and other subtle details'
},
{
key: 'accentColor',
label: 'Highlights & accents',
description: 'Colors for active states, borders, and participant names'
description: 'Colors for active states, highlights and interactive elements'
},
{
key: 'surfaceColor',
@ -93,12 +100,14 @@ export class ConfigComponent implements OnInit {
backgroundColor: OPENVIDU_COMPONENTS_LIGHT_THEME['--ov-background-color'] as string,
primaryColor: OPENVIDU_COMPONENTS_LIGHT_THEME['--ov-primary-action-color'] as string,
secondaryColor: OPENVIDU_COMPONENTS_LIGHT_THEME['--ov-secondary-action-color'] as string,
accentColor: OPENVIDU_COMPONENTS_LIGHT_THEME['--ov-accent-action-color'] as string,
surfaceColor: OPENVIDU_COMPONENTS_LIGHT_THEME['--ov-surface-color'] as string
},
[MeetRoomThemeMode.DARK]: {
backgroundColor: OPENVIDU_COMPONENTS_DARK_THEME['--ov-background-color'] as string,
primaryColor: OPENVIDU_COMPONENTS_DARK_THEME['--ov-primary-action-color'] as string,
secondaryColor: OPENVIDU_COMPONENTS_DARK_THEME['--ov-secondary-action-color'] as string,
accentColor: OPENVIDU_COMPONENTS_DARK_THEME['--ov-accent-action-color'] as string,
surfaceColor: OPENVIDU_COMPONENTS_DARK_THEME['--ov-surface-color'] as string
}
};
@ -191,6 +200,7 @@ export class ConfigComponent implements OnInit {
backgroundColor: themeConfig.backgroundColor || '',
primaryColor: themeConfig.primaryColor || '',
secondaryColor: themeConfig.secondaryColor || '',
accentColor: themeConfig.accentColor || '',
surfaceColor: themeConfig.surfaceColor || ''
});
} else {
@ -201,6 +211,7 @@ export class ConfigComponent implements OnInit {
backgroundColor: '',
primaryColor: '',
secondaryColor: '',
accentColor: '',
surfaceColor: ''
});
}
@ -214,6 +225,7 @@ export class ConfigComponent implements OnInit {
backgroundColor: '',
primaryColor: '',
secondaryColor: '',
accentColor: '',
surfaceColor: ''
});
this.storeInitialValues();
@ -305,6 +317,7 @@ export class ConfigComponent implements OnInit {
backgroundColor: this.initialFormValue.backgroundColor,
primaryColor: this.initialFormValue.primaryColor,
secondaryColor: this.initialFormValue.secondaryColor,
accentColor: this.initialFormValue.accentColor,
surfaceColor: this.initialFormValue.surfaceColor
});
this.hasColorChanges.set(false);
@ -344,6 +357,7 @@ export class ConfigComponent implements OnInit {
backgroundColor: formData.backgroundColor?.trim() || defaults.backgroundColor,
primaryColor: formData.primaryColor?.trim() || defaults.primaryColor,
secondaryColor: formData.secondaryColor?.trim() || defaults.secondaryColor,
accentColor: formData.accentColor?.trim() || defaults.accentColor,
surfaceColor: formData.surfaceColor?.trim() || defaults.surfaceColor
};
}

1
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
View File

@ -143,6 +143,7 @@ export class MeetingComponent implements OnInit {
this.ovThemeService.updateThemeVariables({
'--ov-primary-action-color': theme?.primaryColor,
'--ov-secondary-action-color': theme?.secondaryColor,
'--ov-accent-action-color': theme?.accentColor,
'--ov-background-color': theme?.backgroundColor,
'--ov-surface-color': theme?.surfaceColor
});

1
typings/src/room-config.ts
View File

@ -41,6 +41,7 @@ export interface MeetRoomTheme {
backgroundColor?: string;
primaryColor?: string;
secondaryColor?: string;
accentColor?: string;
surfaceColor?: string;
}