Customizing Themes

To create and modify a themes in PDS with your application, we recommend to download the theme from the Sampler through the Process Management Console and import it into the vaadin-war project of your LSPS application.

You will need to set up the Sass compiler to compile your themes and register your scheme with the <YOUR_APP>.vaadin.util.Constants class.

Creating Themes

To create a custom theme for your application, proceed as follows:

1. Get the base code for your theme:
   • Create a copy of one of the theme directories in <YOUR_APP>-vaadin-war/src/main/webapp/VAADIN/themes.
   • Alternatively, download it from the Web Management Console:
     1. Run the application and download a theme from the Process Management Application:
     2. Go to <SERVER>/lsps-management and log in.
     3. Click the Dynamic Themes button in the sidebar.
     4. Click the Sampler ( ) button and then the Download ( ) button.
     5. Enter the target zip file name.
     6. Extract the content of the zip file to <PATH_TO_YOUR_APP>-vaadin-war/src/main/webapp/VAADIN/themes/<YOUR_THEME_NAME> folder.
     7. In PDS, go to <YOUR_APP>-vaadin-war/src/main/webapp/VAADIN/themes, refresh the directory.

2. Change to the theme directory and edit the main class name in the style.scss file.

   Every theme has a style.scss file that includes all relevant scss file in the theme. It is the included scss files you need to change: if possible, introduce your changes to the sass/theme-<THEME_NAME>_variables.scss file before modifying any other scss files.

3. Register your scheme with the <YOUR_APP>.vaadin.util.Constants class.
4. Set up the Sass Compiler configuration and compile your theme.

5. Compile and deploy your application.

   If you are running a server, the new css files are hot-deployed on sass compilation so it is not necessary to compile and re-deploy the application.

Setting up the Sass Compiler for a Theme

To compile the modified themes, you need to set up the Saas compiler.

To set up the run configuration of the Sass compiler in PDS, do the following:

1. Go to Run -> Run Configuration.
2. In the left pane, select Java Application and click the New button in the caption area of the pane.
3. On the right, define the following:
   1. Name: a name of the configuration
   2. Project: <YOUR_APP>-vaadin-war
   3. Main class: com.vaadin.sass.SassCompiler
      

      Sass Compiler Run Configuration For the blue Theme

4. Switch to the Arguments tab and define the input scss file and output css file as Program arguments (make sure to define the scss file as the first argument): the output css file must be located in the theme directory and have the name styles.css.

   For the provided themes, the main scss is the style.sccs file, which includes the relevant scss files so for the themes delivered with LSPS, the arguments are defined as follows:

   src/main/webapp/VAADIN/themes/<THEME_NAME>/styles.scss
   src/main/webapp/VAADIN/themes/<THEME_NAME>/styles.css

Setting the Default Theme

To set the default theme for your application, open the Constants.java class located in <YOUR_APP>-vaadin/src/main/java/<YOUR-PCKG>/vaadin/util/ and the DEFAULT_THEME value.

public static final String DEFAULT_THEME = "my_theme";

Make sure the theme is among the THEMES value.