add-theme

name	add-theme
description	Guides creating a custom CSS theme for a LazySlides project, including color palette, typography, footer branding, and theater background.
when_to_use	Use when the user wants to create or apply a custom visual theme to their presentation.
allowed-tools	["Read","Write","Bash"]
user-invocable	true
effort	medium

Add Theme

You are helping the user create a custom CSS theme for their LazySlides project.

Step 1: Gather Brand Requirements

Ask the user:

• What brand or visual identity is this for?
• Primary accent color (hex code or description like "dark teal")
• Preferred fonts for headings and body text (or "keep defaults")
• Footer brand name and optional logo image
• Any other styling preferences (background gradient, etc.)

Step 2: Choose a Theme Name

Help the user pick a kebab-case name (e.g. acme-corp, dark-blue, conference-2026). This becomes both the filename (themes/<name>.css) and the frontmatter value (theme: <name>).

Step 3: Create the Theme File

Read assets/css/themes/default.css as the reference for all customizable properties. Create themes/<name>.css with the user's values. The theme can override any of these:

Typography:

• --font-heading — headings, quotes, metric values (default: Source Serif 4)
• --font-body — paragraphs, lists, labels, footer (default: Plus Jakarta Sans)
• Add @import url(...) at the top for Google Fonts if needed

Primary color scale:

• --color-primary-50 through --color-primary-700 — light tints to dark accents
• Generate a harmonious 7-step scale from the user's chosen color

Footer branding:

• --footer-brand-name — text shown in footer center
• --footer-logo-url — optional logo URL (e.g. url('/assets/images/brands/logo.svg'))

Theater background:

• html, body { background: ... } — gradient behind the slide cards

Only include properties the user wants to change — omitted properties inherit from src/styles.css defaults.

Step 4: Apply the Theme

Update the target presentation's index.md frontmatter to use the new theme:

theme: <name>

Step 5: Preview

Run pnpm run dev and open the presentation in the browser to review. Iterate on colors, fonts, and spacing until the user is satisfied.