Theme Variants
Theme variant enables you to create multiples Keycloak theme with a single codebase.
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"],
}),
],
});
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
:

run npm run dev
, npm run storybook
or npm run build-keycloak-theme
for the types to be updated.Different text for each of your theme variants
Keycloakify lets you provide custom tranlations on a per-theme variant basis.
Example:
import { i18nBuilder } from "keycloakify/login";
import type { ThemeName } from "../kc.gen";
/** @see: https://docs.keycloakify.dev/i18n */
const { useI18n, ofTypeI18n } = i18nBuilder
.withThemeName<ThemeName>()
.withExtraLanguages({ /* ... */ })
.withCustomTranslations({
en: {
doLogIn: "Log in!",
loginAccountTitle: {
"my-theme-1": "Log in to your ACME1 account",
"my-theme-2": "Log in to your ACME2 account"
}
},
// cspell: disable
fr: {
doLogIn: "Se connecter!",
loginAccountTitle: {
"my-theme-1": "Connectez-vous à votre compte ACME1",
"my-theme-2": "Connectez-vous à votre compte ACME2"
}
}
// cspell: enable
})
.build();
type I18n = typeof ofTypeI18n;
export { useI18n, type I18n };


In Native Themes
For native Email Theme this video timestamp. For native Theme in general this video timestamp.
Last updated
Was this helpful?