skills.rest
I-Synergy
I-SynergyOFFICIAL
Explore all skills by this author →
GitHub

keycloak-theme-colors

Derive light and dark color tokens from a base hex and rewrite Keycloak login.css.

Updated Feb 16, 2026
Search Tags:#automation#branding#theming#css#keycloak#color-derivation
One-click install
npx skills add https://github.com/I-Synergy/AI --skill keycloak-theme-colors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: keycloak-theme-colors
Source: https://github.com/I-Synergy/AI/tree/main/.github/skills/keycloak-theme-colors
Command: npx skills add https://github.com/I-Synergy/AI --skill keycloak-theme-colors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the process of aligning a Keycloak login theme's color tokens across light and dark modes from a single base hex color, ensuring brand-consistent theming and reducing manual CSS editing.

Core Features & Use Cases

  • Derives light and dark mode color tokens from a single base hex and updates the Keycloak login theme to match branding.
  • Automatically updates the i-synergy-{theme} theme by rewriting the relevant CSS tokens in the theme's login.css.
  • Infers branding from an optional logo to guide base color selection and ensures two-token-block updates stay isolated to the login CSS.

Quick Start

Provide a base hex color and the i-synergy theme name to automatically rewrite the CSS tokens for that theme.

Frequently Asked Questions about keycloak-theme-colors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I change Keycloak login theme colors from a single hex value?▼

You can change Keycloak login theme colors by providing a single base hex value, which automatically derives light and dark mode color tokens and rewrites the theme's login.css to match your branding.

Does Keycloak theming support automatic light and dark color derivation?▼

Yes, Keycloak theming can automatically derive both light and dark color tokens from one base hex color, updating PatternFly 4/5 variables and CSS root tokens to ensure brand consistency without manual editing.

How do I update CSS tokens in a Keycloak login theme for branding?▼

To update CSS tokens for Keycloak branding, the Skill isolates changes to two specific token blocks in the login.css file, ensuring safe and localized updates to the i-synergy theme.

Can I use a logo to determine the base color for Keycloak CSS theming?▼

Yes, you can provide an optional logo which the Skill uses to infer branding and guide the selection of the base hex color before rewriting the Keycloak CSS tokens.

What Keycloak theme versions are compatible with automated CSS color updates?▼

Automated CSS color updates support Keycloak themes using both PatternFly 4 and PatternFly 5 variables, alongside standard CSS root tokens, ensuring broad compatibility across recent Keycloak versions.

Related Skills

Explore More Software Engineering Skills→
aiunlocked1412aiunlocked1412
14

logo-designer

Create logo systems with color specs and export-ready file formats.

Community
Intermediate
needle-mirrorneedle-mirror
9

app-ui-theming

Centralize Unity UI theming tokens and switch themes at runtime.

Official
Advanced
markus41markus41
18

keycloak-theming

Apply realm-specific Keycloak authentication theming using FreeMarker templates and JWT claims.

Community
Advanced
archview-aiarchview-ai

openwebf-host-theming-sync

Synchronize Flutter and WebF theming via CSS variables and prefers-color-scheme.

Official
Intermediate