Customizing Lumo

Use CSS custom properties to adjust Lumo to fit the needs of your application.

Fonts and Colors

The most common theme customization is to adjust the global font and color properties.

html {
  --lumo-font-family: Arial, Helvetica, sans-serif;
  --lumo-primary-text-color: hsl(265, 88%, 44%);
  --lumo-primary-color: hsl(265, 90%, 52%);
  --lumo-primary-color-50pct: hsla(265, 90%, 52%, 0.5);
  --lumo-primary-color-10pct: hsla(265, 90%, 52%, 0.1);
}