When to use this skill
Use this skill whenever the user wants to:
- Apply a consistent color/font theme to a slide deck, document, report, or landing page
- Preview available themes before choosing one
- Generate a custom theme from a description (e.g., "warm corporate" or "playful startup")
- Re-theme an existing artifact with a different visual identity
How to use this skill
Workflow
- Show the theme showcase - Display
theme-showcase.pdfso the user can visually compare all 10 themes - Ask for their choice - Let the user pick a theme or describe a custom one
- Wait for confirmation - Get explicit approval before applying
- Apply the theme - Read the theme file from
themes/and apply colors/fonts consistently
Available Themes
| # | Theme | Style | Primary Color |
|---|---|---|---|
| 1 | Ocean Depths | Professional, calming | Maritime blues |
| 2 | Sunset Boulevard | Warm, vibrant | Orange/coral |
| 3 | Forest Canopy | Natural, grounded | Earth greens |
| 4 | Modern Minimalist | Clean, contemporary | Grayscale |
| 5 | Golden Hour | Rich, warm | Autumnal golds |
| 6 | Arctic Frost | Cool, crisp | Winter blues |
| 7 | Desert Rose | Soft, sophisticated | Dusty pinks |
| 8 | Tech Innovation | Bold, modern | Electric blues |
| 9 | Botanical Garden | Fresh, organic | Garden greens |
| 10 | Midnight Galaxy | Dramatic, cosmic | Deep purples |
Applying a Theme (example)
/* Example: Ocean Depths theme applied via CSS variables */
:root {
--color-primary: #1B4F72;
--color-secondary: #2E86C1;
--color-accent: #AED6F1;
--color-background: #EBF5FB;
--color-text: #1C2833;
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;
}Custom Theme Generation
When no preset fits, create a custom theme:
- Ask the user for a mood/description (e.g., "energetic tech startup")
- Generate a palette of 4-5 harmonious hex colors
- Select complementary heading and body fonts
- Name the theme descriptively
- Show for review, then apply
Best Practices
- Contrast check - Ensure text/background combinations meet WCAG AA contrast ratios
- Consistency - Apply the same theme tokens to every slide/page, never mix themes
- Font pairing - Use one display font for headings and one readable font for body text
- Accent sparingly - Use accent colors for highlights and CTAs, not large surfaces
Keywords
theme, styling, color palette, font pairing, slides, presentation, design, visual identity, 主题, 配色, 样式