Login/Register
Extensive list of Lumo Variables in Vaadin
Asked Answered
Solved vaadinvaadin-flowvaadin-lumo
J

3

7

I would like to do custom theme variations for my Vaadin 20 app. For that I am going to give custom values to Lumo CSS variables available, like --lumo-base-color and --lumo-primary-color. The problem is that I can't find an extensive list of variables that are available.

My questions are:

  1. Where can I find a list of all the variables that are themeable?
  2. Is there a good theme example with a lot of these variables set, that I could use as an example?
Judge answered 11/5, 2021 at 7:57 Comment(0)
C
7

This is an excellent question, as it is often a best practice to start customization of the application on high level by redefining values of the Lumo CSS variables.

Take for example elements like ComboBox drop down button, text field clear icon, DatePicker popup button all use variable --lumo-contrast-60pct. It is easy to define its value in shared global css, and the new color will be consistently used by all the components. This is better approach than defining a custom css per component basis. See example below, where original graphite grey color has been changed to blue.

enter image description here

  1. In the design system foundation documentation, each sub-section will list the available variables.

Additionally, if you inspect the <html> element in your browser development tools, you can see them listed there also.

enter image description here

  1. In the Lumo theme editor demo you can change as many styles as you wish. It then lets you download a file that lists all the variables that you changed.

Another option is going to https://start.vaadin.com, where you can also customize some aspects of the theme, and the downloaded application will include those definitions.

Ciapha answered 11/5, 2021 at 8:43 Comment(0)
C
5

In your running application, you could paste something like the following ugly snippet into your DevTools console to output all the Lumo custom variables and their current value:

[...document.styleSheets].forEach((sheet) =>
  [...sheet.cssRules]
    .filter((rule) => rule.type === 1)
    .forEach((rule) =>
      [...rule.style]
        .filter((style) => style.startsWith("--lumo"))
        .forEach((style) => console.log(style + ": " + rule.style.getPropertyValue(style)))
    )
);

This will spam your console with something like

--lumo-border-radius-s:  1em
--lumo-base-color:  hsl(214, 35%, 21%)
--lumo-tint-5pct:  hsla(214, 65%, 85%, 0.06)
--lumo-tint-10pct:  hsla(214, 60%, 80%, 0.14)
...

You might want to adjust the snippet to produce something more useful, depending on if you want to just use it as reference, or copy & paste into your theme.

Cambell answered 11/5, 2021 at 11:28 Comment(1)
Wow, that was quite a nifty tool. Nice that it gives both the list of variables, as well as the current value. – Judge
T
0

There is now a compilation of Lumo Style Properties in the official documentation for Vaadin V24. Whether this covers all available Lumo variables, that's to be determinated.

Treenatreenail answered 6/4, 2023 at 10:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.