Skip to content

Custom Highlight Color

The button has a default highlight color of hsl( var(--o-canvas-hue) var(--o-canvas-saturation) / 25%) in light mode, hsl(var(--o-shadow-color-dark) / 25%) in dark mode. You can change this value by using the following CSS custom properties:

descriptioncustom property
Highlight color in light mode --o_highlight-light
Highlight color in dark mode --o_highlight-dark
Custom highlight color site wide
.o-btn {
  --o_highlight-light: hsl(var(--o-indigo-500-hsl) / 50%);
  --o_highlight-dark: hsl(var(--o-indigo-300-hsl) / 50%);
}
Custom highlight color modifier class
.o-btn-fancy {
  --o_highlight-light: hsl(var(--o-purple-500-hsl) / 50%);
  --o_highlight-dark: hsl(var(--o-purple-300-hsl) / 50%);
}