Customizing Lumo

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

Prerequisites

You should be familiar with Using Themes, Importing Style Sheets, writing CSS, and CSS Custom Properties and Variables.

Fonts and Colors

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

CSS

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