🎭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

package.json

{
  "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:

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

GitHub - keycloakify/keycloakify-starter at theme_variantGitHub

Branch of the starter where the changes of the video have been applied