Early color scheme by garronej · Pull Request #983 · keycloakify/keycloakify

garronej · 2026-01-13T23:19:32Z

Summary by CodeRabbit

New Features
- Added support for early color-scheme scripts in themes to avoid color flashes during page load.
- Static resource processing now includes SPA (Single-Page Application) themes so extension assets are transformed for all theme types.
Chores
- Updated package version to 11.14.0-rc.1

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…early and avoid white flashes

coderabbitai · 2026-01-13T23:19:43Z

📝 Walkthrough

Walkthrough

Detects per-theme presence of an early-color-scheme.js file, exposes that info on BuildContext, injects the script into generated FTL head when present, removes an early SPA-only early-exit so extension static resources are processed for SPA themes, and annotates extension files referencing the early-color-scheme script.

Changes

Cohort / File(s)	Summary
Version Update `package.json`	Bumped package version to `11.14.0-rc.1`
Constants Definition `src/bin/shared/constants.ts`	Added `EARLY_COLOR_SCHEME_SCRIPT_BASENAME = "early-color-scheme.js"`
Build Context `src/bin/shared/buildContext.ts`	Added `hasEarlyColorSchemeScript` to `implementedThemeTypes` for `login`, `account`, `admin`; compute paths and check filesystem for early-color-scheme.js
FTL Generation `src/bin/keycloakify/generateFtl/generateFtl.ts`	`BuildContextLike` now includes `implementedThemeTypes`; conditionally injects `<script src=".../early-color-scheme.js">` into `<head>` when theme reports `hasEarlyColorSchemeScript`
Resource Processing `src/bin/keycloakify/generateResources/generateResources.ts`	Removed early-exit for SPA in extension static resource handling so extension public resources are processed for SPA themes too
Extension Sync `src/bin/sync-extensions/getExtensionModuleFileSourceCodeReadyToBeCopied.ts`	Detects early-color-scheme script files and appends related note to generated file comments (ownership/non-ownership paths)

Sequence Diagram(s)

sequenceDiagram
  participant CLI as Keycloakify CLI
  participant BC as BuildContext
  participant FS as FileSystem
  participant FTL as FTL Generator
  participant Resources as Resource Processor
  CLI->>BC: getBuildContext()
  BC->>FS: check theme public paths for early-color-scheme.js
  FS-->>BC: existence boolean per theme
  CLI->>FTL: generate FTL using BuildContext
  FTL->>BC: read implementedThemeTypes for theme
  FTL-->>FTL: inject early-color-scheme.js <script> if flagged
  CLI->>Resources: generateResources using BuildContext
  Resources->>FS: transform/copy extension public resources (no SPA early-exit)
  FS-->>Resources: copied resources (including early-color-scheme.js)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Sync extentions public #861: Modifies src/bin/sync-extensions/* and touches extension comment/handling—strongly related to the extension-file comment changes here.
Tokyo #866: Changes to src/bin/shared/buildContext.ts and BuildContext shape—related to the BuildContext type/logic updates in this PR.
Next #860: Adds calls/consumers of getBuildContext/implementedThemeTypes, likely affected by the new BuildContext field.

Poem

🐰 I sniffed the public path at dawn,
Found an early script to hop upon,
I told BuildContext, then I leapt—
Into heads it softly crept,
Themes awaken, colors drawn 🌈

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title "Early color scheme" directly reflects the main feature being implemented: automatic importing of early-color-scheme.js files into the of Keycloak pages.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 232c48d and ce53079.

📒 Files selected for processing (1)

src/bin/sync-extensions/getExtensionModuleFileSourceCodeReadyToBeCopied.ts

🚧 Files skipped from review as they are similar to previous changes (1)

src/bin/sync-extensions/getExtensionModuleFileSourceCodeReadyToBeCopied.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Test with Node v18 on ubuntu-latest

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

garronej · 2026-01-13T23:29:58Z

Hello @Oussemasahbeni,

This PR makes it so that if there is a file like public/keycloak-theme/[login|account|admin]/early-color-scheme.js it will be automatically imported in the <head/> of the pages rendered by keycloak.

If you update https://github.com/Oussemasahbeni/keycloakify-shadcn-starter so the NPM package includes include keycloak-theme/public/login/early-color-scheme.js, it will be automatically copied to the user's project in public/keycloak-theme/login/early-color-scheme.js and then automatically imported by Keycloakify.

Bottom line: The users won't have to edit the index.html.

Oussemasahbeni · 2026-01-14T10:57:20Z

Hello @garronej
Looks good to me, this will provide a better and easier UX. Do we need to mention this in the docs?

garronej · 2026-01-14T18:08:01Z

@Oussemasahbeni if you're reffering to this doc: https://docs.keycloakify.dev/starter-themes/shadcn-ui-tailwind

No, nothing need to be added, that's the point. However a new version of @oussemasahbeni/keycloakify-login-shadcn should be released that includes keycloak-theme/public/login/early-color-scheme.js

garronej added 2 commits January 14, 2026 00:18

Standardize an optional file to set the color scheme dark/light mode …

24a6e7f

…early and avoid white flashes

Release candidate

232c48d

Add more precise comment for early-color-scheme.js

ce53079

garronej merged commit e207bb1 into main Jan 14, 2026
3 checks passed

garronej deleted the early-color-scheme branch January 14, 2026 18:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Early color scheme#983

Early color scheme#983
garronej merged 3 commits intomainfrom
early-color-scheme

garronej commented Jan 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jan 13, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

garronej commented Jan 13, 2026 •

edited

Loading

Uh oh!

Oussemasahbeni commented Jan 14, 2026

Uh oh!

garronej commented Jan 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

garronej commented Jan 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Poem

Uh oh!

garronej commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Oussemasahbeni commented Jan 14, 2026

Uh oh!

garronej commented Jan 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

garronej commented Jan 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 13, 2026 •

edited

Loading

garronej commented Jan 13, 2026 •

edited

Loading