Using Lumo theme on components

Hello all,

I’m having trouble using lumo on components/elements such as Div or H1.

I created a shared-style.html and included it in my webapps/frontend folder as per instructions in the theme vaadin8 migration guide
https://vaadin.com/docs/v10/flow/migration/6-theming.html

If I add the code below I can select primary styles but I can’t use the other styles included in lumo-color.

<custom-style>
  <style include="lumo-color"></style>
   <style>
    .primary-10pct {
      background-color: var(--lumo-primary-color-10pct);
      color: var(--lumo-primary-text-color);
    }

    .primary-50pct {
      background-color: var(--lumo-primary-color-50pct);
      color: var(--lumo-primary-contrast-color);
    }

    .primary {
      background-color: var(--lumo-primary-color);
      color: var(--lumo-primary-contrast-color);
    }
  </style> */
</custom-style>

If I just add

<custom-style>
  <style include="lumo-color"></style>
</custom-style>

as per the lumo styles documentation, below, then I can’t use the primary or any colours what so ever.
https://cdn.vaadin.com/vaadin-lumo-styles/1.0.0/demo/colors.html

As I understand it themes are applied to Vaadin Flow components and not the html components such as Div or H1

I use getClassList().add(“primary”) to set the style.

I’m just missing something simple. Maybe I’m confused on the intended use.

Are we meant to choose the classes from the Vaadin Lumo theme and apply them using getClassList() or is it expected that we would describe our own es in the shared-style.html?

Thankyou for any help.

P.S. Vaadin 10 is amazing!!

Have you imported the lumo color dependency in your polymer template file?

<link rel="import" href="bower_components/vaadin-lumo-styles/color.html">

The class “primary” is settable by using myDivObject.addClassName("primary").

*edit: If you added the dependency, you may have to update the relative path of “href”, when placing your file in subdirectories of frontend, e. g. like your file is placed under “frontend/src/” then you need to update the dependency to “…/bower_components/…”.

Thanks Stefan,

if I inspect the page I can see the import link is included in the header. see attachment.

If i click on the link it takes me to the colour definitions but not the class definitions. I can’t find the set of CSS class definitions anywhere except on the lumo documentation. see other attachment, class definitons.

By using the chrome inspector I have confirmed that addClassName() or getClassList.add() both work.

Also I’m not making a Polymer template, just trying to set some global style. Thanks for the suggestion maybe there will be more information in the polymer component how to’s. As I understand it the custom-style is applied to content withing the encapsulated dom or shadow dom? so by including the custom style lumo colour then it should include everything contained withing the color.html.

Out of curiosity, If you open the import you mentioned can you see the class definitions?

For the sake of it I added the link import you mentioned above to my shared-styles.html but still no luck.

Having trouble finding the class definitions.

Thanks again.

Hayden

17147633.jpg
17147636.jpg

I assume that by “class definitions” you mean the .primary-10pct etc. CSS classes.

Those CSS classes are only for demonstration purposes in the Lumo documentation, how the colors look and how you can use the Lumo CSS custom properties in your own code. That’s why the class definitions show up in the code example (vs. just the usage like class="primary-10pct").

So, those CSS classes are not part of the built-in Lumo style modules. Sorry for not making it clear in the documentation.

ahhh, so simple. I don’t mind them though. I’ve pretty much cut and pasted them all. I’m a noob at the theming side of Vaadin so I was a little stuck at the methodology. Thankyou very much.

So Just to clear it up we should create our global shared-style.html and create our own Class definitions with the lumo theme then use getClassList().add() to set the CSS class on the element. Or I suppose I can directly use the getElement() to set the property directly??

Thanks again!