Theme variables from JSON should apply to CSS automatically

[kirkone]

Summary

Theme variables defined in heme.json (or manifest.json) are available in Scriban templates via {{ theme.variable_name }}, but they don't automatically apply to CSS files. Users expect to change a color in JSON and have it reflected in the generated site.

Current Behavior

1. Variables are loaded from theme manifest ✅
2. Variables are passed to templates as heme.* ✅
3. CSS files are static - variables don't reach them ❌

User Expectation

json // themes/Lumina/manifest.json { "variables": { "accent_color": "#8b5cf6", "background_color": "#0a0a0a" } }

Should automatically affect the site's accent color without manually editing CSS.

Proposed Solutions

Option A: CSS-in-Template (Quick Win)

Generate a <style> block in layout.revela that converts JSON variables to CSS custom properties:

`html

<style> :root { {{~ for var in theme ~}} --{{ var.key | string.replace "_" "-" }}: {{ var.value }}; {{~ end ~}} } </style>

`

Pros: Simple, works now, no new code needed
Cons: Inline styles, requires theme template changes

Option B: Generated CSS File

Revela automatically generates _assets/_theme-variables.css:

css /* Auto-generated from theme variables */ :root { --accent-color: #8b5cf6; --background-color: #0a0a0a; }

Pros: Clean separation, cacheable
Cons: Requires new generation step

Option C: CSS Template Processing

Allow .css.revela files that are processed through Scriban:

css /* main.css.revela */ :root { --accent-color: {{ theme.accent_color }}; }

Pros: Full flexibility
Cons: More complex, performance considerations

Recommendation

Option B seems cleanest - automatic CSS variable generation from theme manifest. The generated file would be included before theme CSS, allowing themes to use �ar(--accent-color) etc.

Related

• Theme customization documentation mentions variables but doesn't clarify this limitation
• revela-website currently uses manual CSS overrides as workaround