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.
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);
}73296804-0318-42B6-80FB-5D57967FED3A