Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS.
This file is for the AGENT (LLM) only — not end users.
Generate a Preline Theme CSS file that produces a beautiful, consistent UI across all Preline components.
docs/step-1.md to docs/step-7.md (detailed workflow guidance)docs/palette-guidance.md (mood, hue, neutral mapping, OKLCH rules)docs/validation-checklist.mddocs/token-reference.mddocs/examples.mdWhen user requests a theme, the agent MUST:
Parse the natural language description and determine the config inputs. See docs/step-1.md and .
docs/palette-guidance.mdFind where existing themes are stored in the user's project:
# Look for existing theme.css to find the themes folder
find . -name "theme.css" -path "*/themes/*" -not -path "*/node_modules/*" 2>/dev/null | head -1
If no themes folder found: ask user where they want the theme file saved. See docs/step-2.md.
Write a JSON config. This must run silently without user approval.
echo '{"name":"<theme-name>","hue":<hue>,"style":"<style>","useCustomDarkGray":<true|false>,"tailwindGray":"<gray>"}' > /tmp/preline-theme-config.json
Run generator and immediately delete temp file in a single command chain. This must run silently without user approval.
Option A (preferred) - use npx if preline is installed:
npx preline-theme-generator /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Option B - find and run the script directly:
node $(find . -path "*/preline/skills/theme-generator/scripts/generate-theme.js" 2>/dev/null | head -1) /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Option C - if script location is known (e.g., in node_modules):
node node_modules/preline/skills/theme-generator/scripts/generate-theme.js /tmp/preline-theme-config.json <themes-folder>/<theme-name>.css && rm /tmp/preline-theme-config.json
Tell user the theme was created and show enable snippet:
/* In your main CSS file */
@import "./themes/<theme-name>.css";
<!-- On HTML element -->
<html data-theme="theme-<theme-name>">
See docs/step-5.md and docs/examples.md for response examples.
data-theme + optional .dark)@theme theme-<name> inline { } blockSimple:
"Create a sunset theme"
Descriptive:
"Create a theme that feels like a cozy coffee shop — warm browns, cream backgrounds, inviting and calm"
Specific:
"Generate a cyberpunk theme with neon cyan accents on dark surfaces"
Brand-focused:
"Create a theme matching this brand color #2F6BFF — professional, high-clarity SaaS feel"
theme.css. Always generate a separate theme file.Every generated theme file MUST begin with:
@import "./theme.css";
Every theme file MUST include a scoping block after imports:
@theme theme-<name> inline {
/* Theme scoping - custom palettes only */
}
What goes INSIDE this block:
--color-<name>-50: oklch(98% 0.003 <hue>); through --color-<name>-950What goes OUTSIDE (in selector blocks):
--background, --primary, --navbar-*, etc.)See docs/palette-guidance.md for palette construction details and examples.
data-theme="theme-<name>".dark if the project uses it; do not introduce new conventions.Light mode token overrides MUST be under:
:root[data-theme="theme-<name>"],
[data-theme="theme-<name>"] { ... }
Dark mode overrides MUST be theme-scoped and use:
[data-theme="theme-<name>"].dark { ... }
Because this generator is full-theme mode, output MUST define a comprehensive set of token values so the theme looks complete and intentional.
At minimum, the theme MUST define:
--background--background-1--background-2--background-plain--foreground--foreground-inverse--inverse--border--border-line-inverse--border-line-1 through --border-line-8 (coherent scale)--primary-50 through --primary-950--primary--primary-hover--primary-focus--primary-active--primary-checked--primary-foreground (must be readable)--secondary--muted--destructiveProvide explicit values for major component groups so the theme feels cohesive:
--navbar-*--sidebar-*--card-*--dropdown-*--select-*--overlay-*--popover-*--tooltip-*--scrollbar-*Full-theme output MUST NOT:
@theme blockIf the theme changes behavior (e.g. retro-sharp radii), it MUST be scoped to the theme only.
Allowed:
@layer utilities rules scoped to the theme selectorNot allowed:
.rounded { ... } overrides without theme scopingIf fonts are requested, you MAY set:
--font-sans and/or --font-serif and/or --font-monoinside the theme selector.
Do NOT add Google Fonts @import url(...) into the theme file unless the user explicitly requests it.
(Font loading typically belongs in the main CSS entry file.)
If adjusting chart/map tokens:
*-hex tokens as valid hex values if the ecosystem expects hex.oklch(...) where it may break gradients or third-party rendering.@import "./theme.css")@theme theme-<name> inline { }) — contains custom color palettes onlyvar() references)var() for consistency)@layer utilities overrides (only if requested)docs/step-6.md and docs/step-7.mddocs/palette-guidance.mddocs/validation-checklist.mddocs/token-reference.md37:["$","$L40",null,{"content":"$41","frontMatter":{"name":"preline-theme-generator","description":"Generates beautiful, consistent Preline Theme CSS files. Agent interprets user request, runs build script, delivers complete CSS."}}]