wehub-resource-sync
88 lines
2.4 KiB
Plaintext
88 lines
2.4 KiB
Plaintext
---
|
|
title: Themes
|
|
description: Reusable design systems shared across decks.
|
|
---
|
|
|
|
A theme is a **bundle of two paired files** under `themes/`:
|
|
|
|
- `themes/<id>.md` — agent-facing recipe: palette, typography, layout,
|
|
fixed components, motion. `create-slide` reads this before authoring.
|
|
- `themes/<id>.demo.tsx` — a runnable mini-slide that demonstrates the
|
|
theme. The dev UI's **Themes** panel imports it and renders it as the
|
|
theme's live preview card.
|
|
|
|
Both files share the same stem so the runtime can pair them automatically.
|
|
|
|
## Why themes
|
|
|
|
If you author more than two decks you'll want them to look related. A theme
|
|
captures the *recipe* — palette, type stack, layout vocabulary, motion
|
|
language — in one place that any deck can reference. The demo TSX makes
|
|
that recipe visible: you can flip through theme previews in the dev UI
|
|
before picking one.
|
|
|
|
## File layout
|
|
|
|
```text
|
|
themes/
|
|
├── corporate.md
|
|
├── corporate.demo.tsx
|
|
├── editorial.md
|
|
├── editorial.demo.tsx
|
|
├── retro-print.md
|
|
└── retro-print.demo.tsx
|
|
```
|
|
|
|
The markdown is free-form. A useful template:
|
|
|
|
```md title="themes/corporate.md"
|
|
# Corporate
|
|
|
|
## Palette
|
|
- ink: #0a0a0c
|
|
- accent: #4a52b5
|
|
- mint: #1f8458
|
|
|
|
## Typography
|
|
- display: 'Söhne', system-ui
|
|
- mono: 'JetBrains Mono'
|
|
|
|
## Voice
|
|
- Tight, declarative, never coy.
|
|
- One concept per slide.
|
|
```
|
|
|
|
The demo is a normal slide module — same shape as `slides/<id>/index.tsx`,
|
|
just placed under `themes/` so the runtime treats it as preview-only (it
|
|
does not appear in the slides list):
|
|
|
|
```tsx title="themes/corporate.demo.tsx"
|
|
import type { Page } from '@open-slide/core';
|
|
|
|
const Cover: Page = () => (/* …inline Title / Footer using theme tokens… */);
|
|
const Content: Page = () => (/* … */);
|
|
|
|
export default [Cover, Content];
|
|
```
|
|
|
|
Keep the demo's inline Title/Footer/Eyebrow components verbatim in sync
|
|
with the snippets in the markdown — what authors see in the Themes panel
|
|
should match what `create-slide` will paste into a real slide.
|
|
|
|
## Using a theme
|
|
|
|
When you call `/create-slide`, mention the theme by name:
|
|
|
|
```text
|
|
/create-slide for "Q3 board update — use the corporate theme"
|
|
```
|
|
|
|
The agent loads `themes/corporate.md`, applies the palette and type stack,
|
|
and writes pages that match.
|
|
|
|
## Extracting a theme
|
|
|
|
Already have a deck whose look you like? Use
|
|
[`/create-theme`](/docs/skills/create-theme) to extract its design tokens
|
|
into a reusable theme file.
|