When customizing the theme of the Application User Interface, use the exposed variables of the themes if possible.

If further customization is required, create your own theme. Consider setting up the sass compiler to be able to preview your changes instantly in the browser.

Creating a Custom Theme

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

In workspace with the sources of your Application User Interface, create the theme resource:
1. Open <YOUR_APP>-vaadin-war/src/main/webapp/VAADIN/themes with default themes.
2. Create a copy of the lsps-valo, lsps-dark or lsps-blue.
3. Rename the directory to the theme name.
4. In the theme directory in styles.scss, change the theme class name:
```
.my-theme {
  @include addons;
  @include lsps-valo-base;
  @include theme-app;
}
```
Register the theme so it is available in the Settings of your application: open the Constants.java class located in <YOUR_APP>-vaadin/src/main/java/<YOUR-PCKG>/vaadin/util/ and add the theme name to THEMES. Set it as default in the DEFAULT_THEME constant.
```
public static final List<String> THEMES = Arrays.asList("lsps-valo", "lsps-dark", "lsps-blue", "lsps-custom");
```
New default theme setting
Change to the theme directory and edit the respective scss files.

The default themes have a style.scss file that import the relevant scss files. 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 file.

Make sure none of your custom classes clash with system classes (Vaadin and GWT classes).
Consider setting up the run configuration for the Sass compiler so you don't have to rebuild the entire application to see the theme changes:

Once set up, you simply introduce your change to the scss files and run the saas compiler configuration to preview your changes. If you are running the SDK Embedded server with the application, the new css files are hot-deployed so it is not necessary to compile and re-deploy the application.
By default, the Application User Interface is in production mode, which does not support this live-preview feature. To apply the css changes instantly, run the application in debug mode: set the productionMode parameter in web.xml in the <YOUR_APP>-vaadin-war project to false.

Adding a Sass Rule

To create a new rule in your theme, do the following:

Create an scss file in the sass directory of your theme, for example, *_textarea.scss*.

Create the rule in the file as a mixin.

@mixin _textarea {
  .v-textarea {
    width: 100% !important;
    min-width: 100px;
  }
}

Import the file and rule in the theme's styles.scss:

   
...
@import "../../../VAADIN/themes/wtpdfviewer/wtpdfviewer.scss";
@import "sass/_textarea.scss";
 
.my-theme {
  @include addons;
  @include lsps-valo-base;
  @include theme-app;
  @include _textarea;
}
...

Run the Sass compiler or maven build configuration.

Compiling a Modified Theme

If you want to preview the changes in LSPS Application often without recompiling other themes, do the following:

Set the Application User Interface to run in debug mode: set the productionMode parameter in <YOUR_APP>-vaadin-war/src/main/webapp/WEB-INF/web.xml to false.
Set up a Sass compiler configuration that will run mvn exec:java -Dexec.mainClass="com.vaadin.sass.SassCompiler" -Dexec.args="<INPUT_SCSS> <OUTPUT_CSS>":
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
    
    Run configuration for Sass compiler
4. Switch to the Arguments tab and define the input scss file and output css file as input Program arguments: the output css file must be located in the theme directory of the target directory and have the name styles.css.
The main scss is the style.sccs file with the relevant scss-files imports so the arguments are defined as follows:
```
src/main/webapp/VAADIN/themes/<THEME_NAME>/styles.scss
src/main/webapp/VAADIN/themes/<THEME_NAME>/styles.css
```
Introduce your scss rules.
Run the Saas compiler configuration.
Open and refresh the browser with the application. Make sure the correct theme is used: check the selected theme on the Settings page of the application.

Important: In Google Chrome, make sure to have the Chrome DevTools displayed (press the F12 key) and caching is disabled (go to the Network tab and select Disable cache)

Modifying General Theme Settings

The application default style is based on Vaadin's Valo and extends this theme: The theme's Settings are exposed in the src/main/webapp/VAADIN/themes/\<THEME_NAME>/sass/_variables.scss file of the *<YOUR_APP>-vaadin-war* project. Therefore if you want to change only the general theme properties, do so in the _variables.scss file:

The application themes are located in the src/main/webapp/VAADIN/themes/ directory.

Setting the Default Theme

To set the default theme for your application, open the Constants.java class locate 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.