Application Theming Basics

Application specific theming specifies styles that only affect one application. Whenever you have styles that are shared across multiple applications, you should make the theming as a separate module and resource that can be shared as a dependency for multiple applications. This chapter focuses only on theming a single application

Application Theme - What and Where?

The application can be themed with using pure CSS, but to be able to theme Polymer web components, you should put the CSS in a HTML file. The recommended convention is to always put the application wide shared styles inside the frontend folder to subdirectory styles with the file name shared-styles.html, thus the full path should be src/main/webapp/frontend/styles/shared-styles.html.

This file needs to be imported by using @HtmlImport annotation. For CSS files, the @StyleSheet annotation can be used.

Sample of a importing the application theme file

@HtmlImport("frontend://styles/shared-styles.html")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
public class MainLayout extends Div implements RouterLayout {
}

The contents of the shared-styles.html are discussed further in the next chapter. The recommendation is that the file contains all the application global and view specific theming.

For any HTML template based components, it is fine to have the styling, that only applies to the HTML in that template, inside that template file. This is because of the ease of development when you have just one HTML file when creating the HTML and CSS. And it also allows you to more easily make that template a stand-alone component that you can reuse and distribute to others, since the styling is already coupled to the component HTML and you don’t have to look for it from elsewhere. There is an example of this in the Theming Crash Course chapter too.