Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11 (Legacy)
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11 (Legacy)
  • 👨‍💻Quick start
  • 🧪Testing your Theme
    • In Storybook
    • In a Keycloak Docker Container
    • With Vite or Webpack in dev mode
  • 🔩Integrating Keycloakify in your Codebase
    • In your React Project
      • In your Vite Project
      • In your Webpack Project
    • As a Subproject of your Monorepo
      • Turborepo
      • Nx Integrated Monorepo
      • Package Manager Workspaces
  • 🎨Customization Strategies
    • CSS Level Customization
      • Basic example
      • Removing the default styles
      • Applying your own classes
      • Page specific styles
      • Using Tailwind
      • Using custom assets
        • .css, .sass or .less
        • CSS-in-JS
    • Component Level Customization
      • Using custom assets
  • 🖋️Custom Fonts
  • 🌎Internationalization and Translations
    • Base principles
    • Adding Support for Extra Languages
    • Previewing you Pages In Different Languages
    • Adding New Translation Messages Or Changing The Default Ones
  • 🎭Theme Variants
  • 📝Customizing the Register Page
  • 👤Account Theme
    • Single-Page
    • Multi-Page
  • 📄Terms and conditions
  • 🖇️Styling a Custom Page Not Included In Base Keycloak
  • 🔧Accessing the Server Environment Variables
  • 🎯Targetting Specific Keycloak Versions
  • 📧Email Customization
  • 🚛Passing URL Parameters to your Theme
  • 🤵Admin theme
  • 📥Importing the JAR of Your Theme Into Keycloak
  • 🔛Enabling your Theme in the Keycloak Admin Console
  • 🤓Taking ownership of the kcContext
  • 📖Configuration Options
    • --project
    • keycloakVersionTargets
    • environmentVariables
    • themeName
    • startKeycloakOptions
    • themeVersion
    • postBuild
    • XDG_CACHE_HOME
    • kcContextExclusionsFtl
    • keycloakifyBuildDirPath
    • groupId
    • artifactId
    • Webpack specific options
      • projectBuildDirPath
      • staticDirPathInProjectBuildDirPath
      • publicDirPath
  • FAQ & HELP
    • 🤝Comunity resources
    • ⬆️Migration Guides
      • ⬆️v10->v11
      • ⬆️v9 -> v10
      • ⬆️CRA -> Vite
      • ⬆️v8 -> v9
      • ⬆️v7 -> v8
      • ⬆️v6 -> v7
      • ⬆️v6.x -> v6.12
      • ⬆️v5 -> v6
    • 😞Can't identify the page to customize?
    • 🤔How it Works
    • 😖Some values you need are missing from in kcContext type definitions?
    • ❓Can I use it with Vue or Angular
      • Angular
    • ⚠️Limitations
    • 🛑Errors Keycloak in Logs
    • 🙋How do I add extra pages?
    • 🤓Can I use react-hooks-form?
    • 🚀Redirecting your users to the login/register pages
    • 💟Contributing
    • 🍪Google reCaptcha and End of third-party Cookies
    • 🔖Accessing the Realm Attributes
  • ⭐Sponsors
Powered by GitBook
On this page
  • Enabeling globaly on your realm
  • Enabling a theme for a specific client

Was this helpful?

Edit on GitHub

Enabling your Theme in the Keycloak Admin Console

Was this helpful?

Let's see how to enable your theme once you have sucessfully imported it in your Keycloak instance.

Enabeling globaly on your realm

In any senario you should never use the Keycloak reserved realm (master) for your application. You should create one.

The first options is to enable the your themes at the realm level, which mean every applications that uses this realm will get this theme applied.

  • Select your realm it the top left corner

  • -> Realm settings

  • -> "Themes" tab

Here you'll be able to select your login, account and email theme.

Enabling a theme for a specific client

To enable a login theme on one of your client:

  • Select your realm in the top left corner

  • -> Clients

  • -> Select your client in the list

  • -> Scroll down to "Login Theme" and select your theme.

The account theme can only be enabled at the realm level; however, accessing the account pages requires authentication. If you don't want your user to inadvertently come across the default login theme when navigating to the account pages after their session has expired, you might want to enable your login theme on the "account-console" client.

  • Select your realm in the top left corner

  • -> Clients

  • -> Select "account console"

  • -> Scroll down to "Login Theme" and select one of your login theme.

The login theme can be applied at the client level. You have typically one Keycloak client per web applications. Setting the login theme at the client level means that each application of your realm can have different login/register pages. This comes in handy if you're implementing .

🔛
Theme Variants