> Markdown version of [Theming](https://vaadin.com/docs/v23/tools/sso/theming). Section index: [llms.txt](https://vaadin.com/docs/v23/tools/llms.txt)

# Theming

## <a id="keycloak"></a>Keycloak

Keycloak offers the most control over what can be customized, from the login page to the administration and user dashboards. SSO Kit offers a custom theme for Keycloak based on [Lumo](https://vaadin.com/docs/v23/styling/lumo.md). It gives the provider’s login page a look and feel similar to what a Vaadin developer would experience using the [Login component](https://vaadin.com/docs/v23/components/login.md).

### <a id="installation"></a>Installation

To use the Keycloak Lumo theme, you need to do a few things:

1. First, download the [`sso-kit-keycloak-lumo`](https://tools.vaadin.com/nexus/content/repositories/vaadin-prereleases/com/vaadin/sso-kit-keycloak-theme/) JAR file from Maven.

2. Next, copy the JAR file into the `/providers` directory of your Keycloak installation.

Once you’ve done that, you can either set the theme for all or some clients in a realm.

- To set the theme for all clients, go to "Realm settings", "Themes". At the "Login theme" selector, choose `sso-kit-keycloak-lumo`.

- To set the theme on a specific client, go to "Clients" and find the client. At the "Login settings" section, select `sso-kit-keycloak-lumo` as the "Login theme".

### <a id="customizing-the-lumo-theme"></a>Customizing the Lumo Theme

You can also customize the Lumo theme to suit your application’s branding. To customize the theme, you need to do a couple of things:

1. Create this directory structure under the `/themes` directory of your Keycloak installation:

   ```
   themes/
   └── your-theme/
       ├── resources/css/
       │  └── my-theme-styles.css
       └── themes.properties
   ```

2. In `themes.properties`, you need to define some properties such as the parent theme, and load the CSS files:

   themes.properties

   ```properties
   # Specify the parent theme
   parent=sso-kit-keycloak-lumo
   # Need also to load the files from the parent theme
   styles=css/lumo-common.css css/lumo-styles.css css/my-theme-styles.css
   ```

3. Next, in `my-theme-styles.css` you can add your styles. For example, you might change the primary color to suit your application’s branding.

   `my-theme-styles.css`

   `keycloak-theme-example.css`

   ```css
   html {
     --lumo-primary-color: rgb(22, 138, 72);
     --lumo-primary-color-50pct: rgba(22, 138, 72, 0.704);
   }
   ```

While working on a custom theme, you might want to disable Keycloak theme caching. You would do that like this:

**Windows**

```terminal
./bin/kc.bat start-dev --spi-theme-static-max-age=-1 --spi-theme-cache-themes=false --spi-theme-cache-templates=false
```

**macOS/Linux**

```terminal
./bin/kc.sh start-dev --spi-theme-static-max-age=-1 --spi-theme-cache-themes=false --spi-theme-cache-templates=false
```

For more instructions, see the [official Keycloak theme documentation](https://www.keycloak.org/docs/latest/server_development/index.html#_themes).