Skip to content
<hrc />

Customize Theme

Each component of <hrc /> handles its own CSS variables, but you can use the following to customize its color variants:

:root {
  /* COLOR: primary | secondary | error | warning | info | success */
  --[COLOR]: <color>; /* main */
  --[COLOR]-hover: <color>;
  --[COLOR]-text: <color>;
  --[COLOR]-transparent: <color>;




  /* EXAMPLE */
  --primary: lightblue;
  --seconday-hover: lightgray;
  --error-transparent: #ff0000a6;
  --warning-text: black;
  --info: skyblue;
  --success-hover: darkgreen;
}