openvidu/openvidu-components-angular/src/styles.scss

@use '@angular/material' as mat;

@include mat.core();

// Define the theme
$openvidu-theme: mat.define-theme();

html {
	// Emit theme-dependent styles for common features used across multiple components.
	@include mat.core-theme($openvidu-theme);
	// @include mat.button-theme($theme);
	@include mat.all-component-bases($openvidu-theme);
	@include mat.all-component-colors($openvidu-theme);
	@include mat.all-component-typographies($openvidu-theme);
	@include mat.all-component-densities($openvidu-theme);
}

html,
body {
	height: 100%;
	overflow: hidden;
}
body {
	margin: 0;
	font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
}

// Custom openvidu-components styles
:root {
	--ov-background-color: #1f2020;
	--ov-surface-color: #ffffff;

	--ov-primary-action-color: #273235;
	--ov-secondary-action-color: #f1f1f1;
	--ov-accent-action-color: #0089ab;

	--ov-error-color: #eb5144;
	--ov-warn-color: #ffba53;

	--ov-text-primary-color: #ffffff;
	--ov-text-surface-color: #1d1d1d;

	--ov-buttons-radius: 50%;
	--ov-leave-button-radius: 10px;
	--ov-video-radius: 5px;
	--ov-surface-radius: 5px;
}