Skip to content

Custom Text Color

The button has a default text color of var(--o-text-1) in dark mode, var(--o-text-1) in light mode. You can change this value by using the following CSS custom properties:

descriptioncustom property
Text color in light mode --o_text-light
Text color in light mode on hover --o_text-light-hover
Text color in dark mode --o_text-dark-hover
Text color in dark mode on hover --o_text-dark-hover
Text color --o_text
Custom text color site wide
.o-btn {
  --o_text-light: forestgreen;
  --o_text-light-hover: darkgreen;
  --o_text-dark: chocolate;
  --o_text-dark-hover: coral;
}
Custom text color modifier class
.o-btn-fancy {
  --o_text-light: forestgreen;
  --o_text-light-hover: darkgreen;
  --o_text-dark: chocolate;
  --o_text-dark-hover: coral;
}