๐ŸŽญTheme Variants

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

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

This will make the theme variant appear in the Keycloak admin select input:

In your code you'll be able to load different styles basesd on the value of kcContext.themeName:

Tutorial video

Last updated