Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11
  • Quick Start
  • CSS Customization
  • Testing your Theme
    • Outside of Keycloak
    • Inside of Keycloak
  • Deploying Your Theme
  • Integrating Keycloakify in your Codebase
    • Vite
    • Create-React-App / Webpack
    • yarn/npm/pnpm/bun Workspaces
    • Turborepo
    • Nx
    • Angular Workspace
  • Common Use Case Examples
    • Using a Component Library
    • Custom Fonts
    • Changing the background image
    • Adding your Logo
    • Using Tailwind
    • Dark Mode Persistence
  • Features
    • Internationalization and Translations
      • Basic principles
      • Previewing Your Pages in Different Languages
      • Adding New Translation Messages or Changing the Default Ones
      • Adding Support for Extra Languages
    • Theme Variants
    • Environment Variables
    • Styling a Custom Page Not Included in Base Keycloak
    • Integrating an Existing Theme into Your Keycloakify Project
    • Compiler Options
      • --project
      • keycloakVersionTargets
      • environmentVariables
      • themeName
      • startKeycloakOptions
      • themeVersion
      • accountThemeImplementation
      • postBuild
      • XDG_CACHE_HOME
      • kcContextExclusionsFtl
      • keycloakifyBuildDirPath
      • groupId
      • artifactId
      • Webpack specific options
        • projectBuildDirPath
        • staticDirPathInProjectBuildDirPath
        • publicDirPath
  • Page-Specific Guides
    • Registration Page
    • Terms and Conditions Page
  • Theme types
    • Differences Between Login Themes and Other Types of Themes
    • Account Theme
      • Single-Page
      • Multi-Page
    • Email Theme
    • Admin Theme
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Features
  2. Compiler Options

themeName

Was this helpful?

This is the name that will appear in the select input of the Keycloak Admin UI that let's you select the theme.

By default it's package.json["name"]

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: "my-custom-name"
    })
  ],
})
package.json
{
    "keycloakify": {
        "themeName": "my-custom-name"
    }
}

The theme name is also in kcContext.themeName

Providing an array enables you to implement theme variant. See:

Theme Variants
Here the theme name is "my-react-app"