Customization

Using CSS variables, you can change the font and the main colors of the components.

Variable	Info	Default value
--font-family	Сomponent font.	Noto Sans, sans-serif
--font-size	Сomponent base font size.	16px
--main-color	Button and frame color.	#7E57C5
--hover-color	Button hover color.	#7c45b4
--active-color	Button active color.	#7E57C5
--plate-color	Information plate color.	#E8E8E8
--target-sector-color	Target sector color (available only in the face-liveness component).	#BEABE2
--direction-sector-color	Direction sector color (available only in the face-liveness component).	#EAEAEA

CSS example:

.my-custom-style {
    --font-family: Arial, sans-serif;
    --main-color: green;
    --hover-color: red;
}

HTML example:

<face-capture class="my-custom-style"></face-capture>