Theme variant enables you to create multiples Keycloak theme with a single codebase.
{% tabs %} {% tab title="Vite" %} {% code title="vite.config.ts" %}
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { keycloakify } from "keycloakify/vite-plugin";
export default defineConfig({
plugins: [
react(),
keycloakify({
themeName: ["keycloakify-starter", "keycloakify-starter-variant-1"],
}),
],
});
{% endcode %} {% endtab %}
{% tab title="Webpack" %} {% code title="package.json" %}
{
"keycloakify": {
"themeName": ["keycloakify-starter", "keycloakify-starter-variant-1"]
}
}
{% endcode %} {% endtab %} {% endtabs %}
This will make the theme variant appear in the Keycloak admin select input:
In your code you'll be able to load different styles based on the value of kcContext.themeName
:
NOTE: You need to run npm run dev
, npm run storybook
or npm run build-keycloak-theme
for the types to be updated.
{% embed url="https://youtu.be/Nkoz1iD-HOA" %} Tutorial video {% endembed %}
{% embed url="https://github.com/keycloakify/keycloakify-starter/tree/theme_variant" %} Branch of the starter where the changes of the video have been applied {% endembed %}