How to adapt Vaadin theme

Support
#1

Hi,

I’ve read this topic, cause I have similar problem. I would like to use external theme.
But for now it would be fine if I could use this Vaadin theme.

But I have no idea how to adopt it into my existing project. Any tutorial for it? I believe there is some easy way to import and use it.

Thank you so much,
CC

1 Like
#3

Hi,

You can integrate this theme into your application using the approach described here: Creating a Custom Theme - CUBA Platform. Developer’s Manual Basically, custom theme requires two main files: custom-theme.properties in web sources and styles.scss in modules/web/themes/custom/.

I’d recommend that you simply extract SCSS files from the material.jar into your modules/web/themes/material directory and create material-theme.properties file in src/com/company/demo directory. Then add custom-theme.properties to web-app.properties:

cuba.themeConfig = +com/company/material/material-theme.properties
cuba.web.theme = material

Unfortunately, you have to provide all the CSS for CUBA UI components since Vaadin themes does not support them. For instance, SideMenu or GroupBox.

I’ve created a small demo of this theme. It works, but looks bad, requires additional styling. See: GitHub - cuba-labs/material-theme-sandbox and this commit: Material theme integration · cuba-labs/material-theme-sandbox@0154fbb · GitHub

#4

I’ve slightly improved the solution, just change imports in “material” from valo to halo.

material-login

material-ui

See this commit: Base material theme on Halo · cuba-labs/material-theme-sandbox@4e418a7 · GitHub

1 Like
#6

Hello,

I tried to adapt the theme like described in the documentation and based on your project, but when I rebuild the app and start the server, on page open I get a “Unexpected error. Please contact system administrator”, and in server log I see this:

08:57:56.974 ERROR com.haulmont.cuba.web.AppUI - Unable to init ui 
com.haulmont.cuba.core.global.DevelopmentException: Unable to load theme constants for: 'material-theme.properties'
    at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.loadThemeProperties(ThemeConstantsRepository.java:100)
    at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.init(ThemeConstantsRepository.java:79)
    at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.checkInitialized(ThemeConstantsRepository.java:57)
    at com.haulmont.cuba.gui.theme.ThemeConstantsRepository.getConstants(ThemeConstantsRepository.java:145)
    at com.haulmont.cuba.web.App.loadTheme(App.java:149)
    at com.haulmont.cuba.web.App.init(App.java:245)
    at com.haulmont.cuba.web.AppUI.init(AppUI.java:191)
    at com.vaadin.ui.UI.doInit(UI.java:693)
    at com.vaadin.server.communication.UIInitHandler.getBrowserDetailsUI(UIInitHandler.java:216)
    at com.vaadin.server.communication.UIInitHandler.synchronizedHandleRequest(UIInitHandler.java:74)
    at com.vaadin.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:41)
    at com.vaadin.server.VaadinService.handleRequest(VaadinService.java:1436)
    at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:385)
    at com.haulmont.cuba.web.sys.CubaApplicationServlet.serviceAppRequest(CubaApplicationServlet.java:301)
    at com.haulmont.cuba.web.sys.CubaApplicationServlet.service(CubaApplicationServlet.java:192)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at com.haulmont.cuba.web.sys.CubaHttpFilter.handleNotFiltered(CubaHttpFilter.java:108)
    at com.haulmont.cuba.web.sys.CubaHttpFilter.doFilter(CubaHttpFilter.java:95)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:198)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
    at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:478)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:80)
    at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:624)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342)
    at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:799)
    at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
    at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:861)
    at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1455)
    at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
    at java.lang.Thread.run(Thread.java:745)

What I’ve missed?

#7

You have missed additional file material-theme.properties that should be created in project and mentioned in web-app.properties:

cuba.themeConfig = +com/company/material/material-theme.properties
1 Like