I am having trouble with the HTMLImport and applying color changes to the Lumo theme. It appears to work properly when run in production mode and deployed to my server (which is runnng Tomcat). But when i run locally using the jetty:run command, it does’t appear to apply the theme changes called out in the HTMLImport.
Here is the main code:
@Route("")
@Push()
@PWA(name = "Barron Lighting", shortName = "Barron Lighting")
@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends HorizontalLayout implements PageConfigurator, RouterLayout {
@Override
public void configurePage(InitialPageSettings initialPageSettings) {
LoadingIndicatorConfiguration conf = initialPageSettings.getLoadingIndicatorConfiguration();
// disable default theme -> loading indicator will not be shown
conf.setApplyDefaultTheme(false);
}
LoginOverlay loginOverlay = new LoginOverlay();
public MainView() {
setWidth("100vw");
setHeight("100vh");
setSpacing(false);
setPadding(false);
H1 title = new H1();
Image logo = new Image("img/barron-logo.png", "");
logo.setWidth("174px");
logo.setHeight("48px");
title.add(logo);
title.add(new Text(""));
loginOverlay.setTitle(title);
loginOverlay.setDescription("");
loginOverlay.addLoginListener(loginEvent -> {
add(new DevicesView());
loginOverlay.close();
});
loginOverlay.setOpened(true);
}
}
The shared-styles.html is in the webapp/frontend/styles directory. It worked prior to adding the login form, in debug mode, but stopped when i added the login form.
Here is the shared-styles.html (very simple):
<custom-style>
<style>
html {
/* Example global custom CSS property definition */
--lumo-primary-color: #ed1c2d;
}
</style>
</custom-style>
I’ve attached the local debug mode version and the server vesion (the server vesion is in red which is what i want). Any thoughts?
