Custom theme
Custom theme
Customising component colours
Some components can have their theme colour changed by using either of the methods below. When the theme colour is changed, components will automatically update.
Other styles on affected components will also adapt accordingly, such as the colour of text or icons.
CSS variables
You can set the theme colour by using the three CSS variables (one for each of the RGB values for the colour) shown below:
:root {
--ic-theme-primary-r: 92;
--ic-theme-primary-g: 9;
--ic-theme-primary-b: 72;
}Theme component
Alternatively, you can include theic-theme
component and set thecolor
property:
<ic-theme color="rgb(92, 9, 72)"></ic-theme>
<ic-theme color="#5c0949"></ic-theme>