<!-- Place these in your index.html -->
<link rel="import" href="bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/sizing.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/spacing.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/style.html">
<link rel="import" href="bower_components/vaadin-lumo-styles/typography.html">
<!-- Include the main style modules in global scope (index.html) -->
<custom-style>
<style include="lumo-color lumo-typography"></style>
</custom-style>
to my shared-style.html and included this file to my MainView as follow:
@Route("")
@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends VerticalLayout {
....
This was not working. How do I create it correctly? I want to create a new theme based on this theme.
What are you trying to do? The Lumo theme should be enabled by default, you shouldn’t need to do any of that in the first place.
Hi Jouni,
Yeah the built in Lumo is working. I want to create my own theme to modify a lot of the internals. I tried to understand how it works by importing lumo by hand.
Thank you for your reply. I had my difficulty to understand this documentation for theming. I tried the @NoTheme Option, because I do not want the built in theme.
Why I need a custom MyTheme Class and not just a @HtmlImport? What is in this path? Where is this path? (Source from your link)
@Override
public String getThemeUrl() {
return "/theme/myTheme/";
}
The documentation around theming is unfortunately lacking. Apologies for that. The Lumo theme docs are very much oriented towards pure frontend projects, so the instructions do not account for any Flow-specifics.
Why I need a custom MyTheme Class and not just a @HtmlImport? What is in this path? Where is this path
All Vaadin components have 2 built-in themes, Lumo and Material. You import different HTML files depending on the theme you use, e.g. vaadin-button/theme/lumo/vaadin-button.html or vaadin-button/theme/material/vaadin-button.html. The theme class defines the location where the component imports should be loaded from.
I’m not that familiar how things work in Flow (more focused on the frontend myself), so I’ll have to ask a colleague if they have some good advice.
Just piggy-backing on this thread, with both a contribution and a question.
Contribution: according to the documentation indicated by Jouni above, we should be able to modify some key aspects of Lumo with CSS variables such as
--lumo-font-size-m: 0.625rem;
Question: under Vaadin Flow, I found that the HTML and CSS files deployed by the boot code appear in the ‘wrong’ order, in the sense that my custom styles appear BEFORE the Lumo imports, which in practice causes the actual DOM to ignore my custom styles.
I tried both:
@Theme(Lumo.class)
@HtmlImport("styles/shared-styles.html")
public class FspWebUi extends UI {
...
and
@HtmlImport("styles/shared-styles.html")
@Theme(Lumo.class)
public class FspWebUi extends UI {
...
In both cases a browser inspection shows my styles import overridden by Lumo’s.
The one designer, who has been looking into creating a new custom theme for Flow more closely, is currently really busy with a customer project. He said he would try to take a look at this thread this week.
Reuben, that’s one of the known issues we are trying to solve (Rolf is the designer who has the most experience regarding these): https://github.com/vaadin/flow/issues/4602
I also have the same problem. I tried the same @HtmlImport(“frontend://styles/my-lumo-theme.html”) and placed the html under C:\Vaadin\my-starter-project\frontend\styles.