# themeName

This is the name that will appear in the select input of the Keycloak Admin UI that let's you select the theme.

<figure><img src="https://2643300760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4Ls5iTdfTS2xECgBfw90%2Fuploads%2Fgit-blob-b0c93d9ca2ed22f4a885197ef657c27d6708d56c%2Fimage%20(94).png?alt=media" alt="" width="375"><figcaption><p>Here the theme name is "my-react-app"</p></figcaption></figure>

By default it's `package.json["name"]`

{% tabs %}
{% tab title="Vite" %}

<pre class="language-typescript" data-title="vite.config.ts"><code class="lang-typescript">import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { keycloakify } from "keycloakify/vite-plugin";

export default defineConfig({
  plugins: [
    react(), 
    keycloakify({
<strong>      themeName: "my-custom-name"
</strong>    })
  ],
})
</code></pre>

{% endtab %}

{% tab title="Webpack" %}
{% code title="package.json" %}

```json
{
    "keycloakify": {
        "themeName": "my-custom-name"
    }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

The theme name is also in `kcContext.themeName`

Providing an array enables you to implement theme variant. See:

{% content-ref url="../theme-variants" %}
[theme-variants](https://docs.keycloakify.dev/features/theme-variants)
{% endcontent-ref %}