🎭Theme Variants

Theme variant enables you to create multiples Keycloak theme with a single codebase.

Vite

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"],
    }),
  ],
});

Webpack

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.

Tutorial video

Different text for each of your theme variants

Keycloakify lets you provide custom tranlations on a per-theme variant basis.

Read this first for context.

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 };

"my-theme-1" view

"my-theme-2" view

Email theme

Your emails can be adapted based on the active theme variant. In the .ftl files located in the src/email directory, you can use the FreeMarker variable: xKeycloakify.themeName. This variable holds the name of the currently enabled theme as a string, for example: "my-theme-1", "my-theme-2", etc.