SUMMARY.md

Table of contents

• Quick Start
• CSS Customization
• Testing your Theme
  • Outside of Keycloak
  • Inside of Keycloak
  • Outside of Keycloak - Without Storybook
• 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
• Changing the background image - CSS-in-JS
• 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