Spinel

A neo-brutalist Keycloak theme with automatic dark mode support.

Live Demo - Browse all themed pages in Storybook

Features

• Neo-Brutalist Design - Bold typography, sharp geometric shapes, heavy 3px borders with offset shadows
• Automatic Dark Mode - Theme switches based on system preference
• Fully Responsive - Optimized for desktop, tablet, and mobile
• Complete Theme Coverage - Login and Email themes included
• Built with Keycloakify v11 - React-based theming with Tailwind CSS v4

Screenshots

Desktop

Light Mode	Dark Mode

Mobile

Light Mode	Dark Mode

Installation

Option 1: Download JAR

Download the latest JAR from Releases:

Latest version: 1.0.2

• spinel-theme-v{version}-for-kc-22-to-25.jar - For Keycloak 22-25
• spinel-theme-v{version}-for-kc-all-other-versions.jar - For Keycloak 26+

Option 2: Build from Source

git clone https://github.com/for-keycloak/spinel-theme.git
cd spinel-theme
yarn install
yarn build-keycloak-theme

The JAR files will be in the dist_keycloak/ directory.

Deploy to Keycloak

Copy the JAR to your Keycloak's providers directory:

cp spinel-*.jar /opt/keycloak/providers/

Restart Keycloak, then:

1. Go to Keycloak Admin Console
2. Select your realm
3. Navigate to Realm Settings → Themes
4. Set Login theme to spinel
5. (Optional) Set Email theme to spinel
6. Save

Customization

Colors

Edit the CSS variables in src/index.css:

@theme {
  --color-cream: #FFFDF7;  /* Background */
  --color-accent: #E64C4C; /* Primary accent (red) */
  --color-black: #0D0D0D;  /* Text & borders */
  --color-white: #FFFFFF;  /* Card background */
}

Dark mode colors are in the @media (prefers-color-scheme: dark) block.

Theme Name

To create your own branded version, change the theme name in vite.config.ts:

keycloakify({
  themeName: "your-theme-name",
})

Development

Prerequisites

• Docker & Docker Compose
• Just command runner

Commands

# Install dependencies
just install

# Start Storybook for development
just up

# Open shell in container
just shell

# Build the theme JAR
just build

# Run tests
just test

Project Structure

src/
├── login/              # Login theme (React)
│   ├── KcPage.tsx      # Page router
│   ├── Template.tsx    # Main template
│   └── pages/          # Custom pages
├── email/              # Email theme (FreeMarker)
│   └── theme.properties
└── index.css           # Neo-brutalist styles

Supported Pages

All standard Keycloak login pages are styled:

• Login (username/password)
• Register
• Forgot/Reset Password
• Update Password
• Email Verification
• OTP/2FA Setup & Login
• Recovery Codes
• Passkey Setup & Login
• OAuth Consent
• Update Profile
• And more...

Tech Stack

• Keycloakify v11 - React-based Keycloak theming
• Tailwind CSS v4 - Utility-first CSS
• Vite - Build tool
• Storybook - Component development

License

This project is released into the public domain under the UNLICENSE.

Font License

This theme uses Basement Grotesque font, licensed under the SIL Open Font License 1.1.