# Themes — Preset Theme Configuration

Each theme = a set of colors + a set of fonts + mood tags. Once a theme is selected, all colors are automatically derived according to the color scale rules in `design-system.md`.

---

## Theme Selection Rules

1. AI selects the theme based on scene classification and content tone
2. Each PPT deck uses only one theme, **no switching throughout**
3. If the user specifies a color or style preference, select the closest theme or customize accordingly (still must follow color scale rules)

---

## Preset Themes

### 1. Ocean (Deep Sea Blue)

| Property | Value |
|------|-----|
| **Mood** | Professional, trustworthy |
| **Suitable for** | Work reports, business proposals, company introductions |
| **Primary** | `#1B2A4A` |
| **Accent (A — default)** | `#2A9D8F` (teal) |
| **Accent B** | `#D7A460` (warm gold) |
| **Accent C** | `#6C92E0` (bright blue) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Gill Sans MT Bold |
| **Latin Body Font** | Gill Sans MT |
| **Image Keywords** | ocean, deep blue, corporate, skyline, technology, water, aerial city |
| **Mask Color** | `rgba(18,32,64,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value | Usage Example |
|------|------|---------|
| primary-100 | `#0D1525` | Dark mode background |
| primary-90 | `#122040` | Title bar background |
| primary-80 | `#1B2A4A` | Title text |
| primary-60 | `#3D5A80` | Subtitle / icons |
| primary-40 | `#6B8AB0` | Secondary text |
| primary-20 | `#B0C4DE` | Light decoration |
| primary-10 | `#DFE8F2` | Card background / border |
| primary-5 | `#F0F4F8` | Surface base color |

---

### 2. Graphite (Graphite Gray)

| Property | Value |
|------|-----|
| **Mood** | Modern, restrained, clean and sharp |
| **Suitable for** | Tech products, weekly/monthly reports, technical sharing |
| **Primary** | `#2D3436` |
| **Accent (A — default)** | `#D77860` (coral red) |
| **Accent B** | `#6BCB77` (emerald green) |
| **Accent C** | `#9B8EC4` (light purple) |
| **CJK Title Font** | SimHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Century Gothic Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | architecture, minimal, concrete, technology, geometric, monochrome, server room |
| **Mask Color** | `rgba(34,40,41,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value |
|------|------|
| primary-100 | `#161A1B` |
| primary-90 | `#222829` |
| primary-80 | `#2D3436` |
| primary-60 | `#576163` |
| primary-40 | `#8D9496` |
| primary-20 | `#C3C8CA` |
| primary-10 | `#E4E7E8` |
| primary-5 | `#F3F4F5` |

---

### 3. Forest (Forest Green)

| Property | Value |
|------|-----|
| **Mood** | Natural, serene, organic and gentle |
| **Suitable for** | Educational courseware, humanities/liberal arts academic, ESG/sustainability |
| **Primary** | `#264653` |
| **Accent (A — default)** | `#DCBD74` (golden) |
| **Accent B** | `#E18C70` (coral) |
| **Accent C** | `#7EC8B0` (mint) |
| **CJK Title Font** | SimSun Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Palatino Linotype Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | forest, nature, leaves, green, organic, sustainability, botanical, meadow |
| **Mask Color** | `rgba(26,51,64,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value |
|------|------|
| primary-100 | `#0F1C22` |
| primary-90 | `#1A3340` |
| primary-80 | `#264653` |
| primary-60 | `#4A7A8A` |
| primary-40 | `#7FAABB` |
| primary-20 | `#B8D4DE` |
| primary-10 | `#DFECF0` |
| primary-5 | `#F1F6F8` |

---

### 4. Twilight (Dark Night Purple)

| Property | Value |
|------|-----|
| **Mood** | Creative, unique, personality-driven |
| **Suitable for** | Creative proposals, brand planning, design sharing |
| **Primary** | `#2D2B55` |
| **Accent (A — default)** | `#A77BCA` (lavender) |
| **Accent B** | `#E3B27D` (warm orange) |
| **Accent C** | `#5EC4D4` (sky blue) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Candara Bold |
| **Latin Body Font** | Candara |
| **Image Keywords** | galaxy, night sky, aurora, creative, neon, abstract art, purple gradient |
| **Mask Color** | `rgba(33,31,64,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value |
|------|------|
| primary-100 | `#15142A` |
| primary-90 | `#211F40` |
| primary-80 | `#2D2B55` |
| primary-60 | `#555380` |
| primary-40 | `#8886AB` |
| primary-20 | `#BFBED6` |
| primary-10 | `#E2E1ED` |
| primary-5 | `#F2F2F7` |

---

### 5. Sandstone (Warm Sand)

| Property | Value |
|------|-----|
| **Mood** | Premium, warm, composed and grand |
| **Suitable for** | Investment roadshows, real estate, luxury goods, finance |
| **Primary** | `#3C2415` |
| **Accent (A — default)** | `#C09E30` (gold) |
| **Accent B** | `#D4766A` (ochre red) |
| **Accent C** | `#8BB174` (olive) |
| **CJK Title Font** | SimSun Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Palatino Linotype Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | luxury, gold, marble, architecture, warm light, classical, elegant interior |
| **Mask Color** | `rgba(45,27,16,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value |
|------|------|
| primary-100 | `#1E120A` |
| primary-90 | `#2D1B10` |
| primary-80 | `#3C2415` |
| primary-60 | `#6B5443` |
| primary-40 | `#9E8A7A` |
| primary-20 | `#CEBFB5` |
| primary-10 | `#E9E2DC` |
| primary-5 | `#F5F2F0` |

---

### 6. Mono (Minimalist Black)

| Property | Value |
|------|-----|
| **Mood** | Sharp, minimalist, visual impact |
| **Suitable for** | Product launches, minimalist style, photography showcases |
| **Primary** | `#1A1A1A` |
| **Accent (A — default)** | `#E6754C` (burnt orange) |
| **Accent B** | `#4ECDC4` (cyan) |
| **Accent C** | `#C44569` (rose) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Arial Bold |
| **Latin Body Font** | Arial |
| **Image Keywords** | minimal, black white, contrast, product, clean, abstract, studio lighting |
| **Mask Color** | `rgba(20,20,20,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value |
|------|------|
| primary-100 | `#0A0A0A` |
| primary-90 | `#141414` |
| primary-80 | `#1A1A1A` |
| primary-60 | `#4A4A4A` |
| primary-40 | `#808080` |
| primary-20 | `#B8B8B8` |
| primary-10 | `#E0E0E0` |
| primary-5 | `#F2F2F2` |

---

### 7. Deep Mineral (Dark Night Blue)

| Property | Value |
|------|-----|
| **Mood** | High-end, immersive, cinematic depth |
| **Suitable for** | Tech launches, keynotes, data dashboards, night-mode presentations |
| **Primary** | `#FFFFFF` |
| **Accent (A — default)** | `#44D1E4` (electric cyan) |
| **Accent B** | `#EDCD82` (warm yellow) |
| **Accent C** | `#E65174` (rose) |
| **Background Override** | `#162235` (replaces default `#FFFFFF`) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Trebuchet MS Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | dark blue, night city, deep ocean, space, data visualization, neon glow |
| **Mask Color** | `rgba(16,26,40,0.70)` (primary-100 based) |

**Dark theme notes**: This is a dark-background theme — the color logic is inverted:
- `background` = `#162235` (dark), `surface` = `#1E2D45` (slightly lighter), `surface-card` = `#243550` (card layer)
- `text-primary` = `#FFFFFF`, `text-secondary` = `rgba(255,255,255,0.75)`, `text-muted` = `rgba(255,255,255,0.45)`
- Cards use `surface-card` with no shadow (shadows invisible on dark backgrounds)
- Accent (`#44D1E4`) is used for highlights, KPI numbers, accent bars, and emphasis elements

Color Scale (inverted — lighter values are "darker" in visual weight):

| Scale | Color Value | Usage |
|------|------|---------|
| primary-100 | `#0D1525` | Deepest background |
| primary-90 | `#122040` | Title bar background |
| primary-80 | `#FFFFFF` | Title text / primary elements |
| primary-60 | `rgba(255,255,255,0.75)` | Subtitle / secondary text |
| primary-40 | `rgba(255,255,255,0.45)` | Muted text / annotations |
| primary-20 | `#2A3F5F` | Card borders / subtle decorations |
| primary-10 | `#1E2D45` | Surface / content area base |
| primary-5 | `#162235` | Page background |

---

### 8. Warm Retro (Vintage Warmth)

| Property | Value |
|------|-----|
| **Mood** | Vintage, cultured, warm and grounded |
| **Suitable for** | Cultural events, humanities, food/lifestyle, brand storytelling |
| **Primary** | `#2A4A3A` |
| **Accent (A — default)** | `#C89F62` (antique gold) |
| **Accent B** | `#C06C58` (copper red) |
| **Accent C** | `#7BA68C` (moss green) |
| **Background Override** | `#F4F1E9` (warm off-white, replaces default `#FFFFFF`) |
| **CJK Title Font** | SimSun Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Palatino Linotype Bold |
| **Latin Body Font** | Garamond |
| **Image Keywords** | vintage, warm light, craft, leather, coffee, botanical, old book, linen texture |
| **Mask Color** | `rgba(30,40,34,0.75)` (primary-90 based) |

**Warm background notes**: This theme uses a warm off-white (`#F4F1E9`) instead of pure white:
- `background` = `#F4F1E9`, `surface` = `#EDE9DF` (slightly darker warm), `surface-card` = `#FEFDFB` (near-white card)
- The warm base gives a cozy, analog feel — avoid pure white elements that would look jarring

Color Scale:

| Scale | Color Value | Usage |
|------|------|---------|
| primary-100 | `#0F1C15` | Darkest (rarely used) |
| primary-90 | `#1E2822` | Title bar background |
| primary-80 | `#2A4A3A` | Title text / primary elements |
| primary-60 | `#4A7A62` | Subtitle / icons |
| primary-40 | `#7AAA90` | Secondary text |
| primary-20 | `#B5D4C2` | Light decoration |
| primary-10 | `#DCE9E0` | Card background / border |
| primary-5 | `#F0F5F1` | Surface base (use `#EDE9DF` for warm surface) |

---

### 9. Deep Forest (Dark Green)

| Property | Value |
|------|-----|
| **Mood** | Calm, grounded, nature-tech fusion |
| **Suitable for** | ESG reports, sustainability, ecology, green tech |
| **Primary** | `#FFFFFF` |
| **Accent (A — default)** | `#D7D968` (electric lime) |
| **Accent B** | `#E18C70` (coral orange) |
| **Accent C** | `#85C5E0` (sky blue) |
| **Background Override** | `#193328` (deep forest green, replaces default `#FFFFFF`) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Gill Sans MT Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | dark forest, moss, fern, green nature, sustainability, eco technology, rain forest |
| **Mask Color** | `rgba(18,38,30,0.70)` (primary-100 based) |

**Dark theme notes**: Same inverted logic as Deep Mineral — see its notes above.
- `background` = `#193328`, `surface` = `#1F3F32`, `surface-card` = `#264A3C`
- `text-primary` = `#FFFFFF`, `text-secondary` = `rgba(255,255,255,0.75)`, `text-muted` = `rgba(255,255,255,0.45)`

Color Scale (inverted):

| Scale | Color Value | Usage |
|------|------|---------|
| primary-100 | `#0D1A14` | Deepest background |
| primary-90 | `#12261E` | Title bar background |
| primary-80 | `#FFFFFF` | Title text / primary elements |
| primary-60 | `rgba(255,255,255,0.75)` | Subtitle / secondary text |
| primary-40 | `rgba(255,255,255,0.45)` | Muted text / annotations |
| primary-20 | `#2A5040` | Card borders / subtle decorations |
| primary-10 | `#1F3F32` | Surface / content area base |
| primary-5 | `#193328` | Page background |

---

### 10. Coral (Coral Pink)

| Property | Value |
|------|-----|
| **Mood** | Warm, vibrant, youthful |
| **Suitable for** | Brand marketing, consumer products, lifestyle, female-audience presentations |
| **Primary** | `#8B3A4A` |
| **Accent (A — default)** | `#E2A574` (warm peach) |
| **Accent B** | `#DC755B` (burnt sienna) |
| **Accent C** | `#6BC5B8` (mint contrast) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Candara Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | pink, flowers, beauty, lifestyle, warm light, cafe, fashion, soft texture |
| **Mask Color** | `rgba(100,42,54,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value | Usage |
|------|------|---------|
| primary-100 | `#3D1A22` | Deepest background |
| primary-90 | `#642A36` | Title bar background |
| primary-80 | `#8B3A4A` | Title text / primary elements |
| primary-60 | `#B06070` | Subtitle / icons |
| primary-40 | `#D08A96` | Secondary text |
| primary-20 | `#E8BAC2` | Light decoration |
| primary-10 | `#F3DDE1` | Card background / border |
| primary-5 | `#FAF0F2` | Surface base color |

---

### 11. Mint (Mint Green)

| Property | Value |
|------|-----|
| **Mood** | Fresh, clean, health-oriented |
| **Suitable for** | Healthcare, wellness, eco-friendly, food & beverage |
| **Primary** | `#1A6B5A` |
| **Accent (A — default)** | `#E3987D` (warm coral) |
| **Accent B** | `#DEC363` (golden yellow) |
| **Accent C** | `#8574E2` (medium slate blue) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Gill Sans MT Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | mint, fresh, health, botanical, clean, green smoothie, spa, herbal |
| **Mask Color** | `rgba(18,78,64,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value | Usage |
|------|------|---------|
| primary-100 | `#0A3028` | Deepest background |
| primary-90 | `#124E40` | Title bar background |
| primary-80 | `#1A6B5A` | Title text / primary elements |
| primary-60 | `#3D9B86` | Subtitle / icons |
| primary-40 | `#6DBFAB` | Secondary text |
| primary-20 | `#A8DACE` | Light decoration |
| primary-10 | `#D6EDE7` | Card background / border |
| primary-5 | `#EFF8F5` | Surface base color |

---

### 12. Azure (Sky Blue)

| Property | Value |
|------|-----|
| **Mood** | Open, lightweight, approachable technology |
| **Suitable for** | SaaS products, AI/tech, onboarding, training materials |
| **Primary** | `#1E5F8C` |
| **Accent (A — default)** | `#D7A042` (amber) |
| **Accent B** | `#DD5F5F` (red) |
| **Accent C** | `#9270E1` (violet) |
| **CJK Title Font** | Microsoft YaHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Trebuchet MS Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | sky, cloud, technology, light blue, software, digital, clean interface |
| **Mask Color** | `rgba(20,68,104,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value | Usage |
|------|------|---------|
| primary-100 | `#0C2A40` | Deepest background |
| primary-90 | `#144468` | Title bar background |
| primary-80 | `#1E5F8C` | Title text / primary elements |
| primary-60 | `#4085B0` | Subtitle / icons |
| primary-40 | `#70AAD0` | Secondary text |
| primary-20 | `#A8CEE5` | Light decoration |
| primary-10 | `#D8E9F3` | Card background / border |
| primary-5 | `#F0F6FA` | Surface base color |

---

### 13. Ember (Amber Red)

| Property | Value |
|------|-----|
| **Mood** | Bold, energetic, high-impact |
| **Suitable for** | Annual events, product launches, sales campaigns, motivational presentations |
| **Primary** | `#8B2500` |
| **Accent (A — default)** | `#E4A744` (golden amber) |
| **Accent B** | `#2EC4B6` (teal contrast) |
| **Accent C** | `#EC7979` (coral red) |
| **CJK Title Font** | SimHei Bold |
| **CJK Body Font** | Microsoft YaHei |
| **Latin Title Font** | Arial Bold |
| **Latin Body Font** | Corbel |
| **Image Keywords** | fire, red, energy, stage light, celebration, bold, dynamic, explosion |
| **Mask Color** | `rgba(100,26,0,0.75)` (primary-90 based) |

Color Scale:

| Scale | Color Value | Usage |
|------|------|---------|
| primary-100 | `#3E1000` | Deepest background |
| primary-90 | `#641A00` | Title bar background |
| primary-80 | `#8B2500` | Title text / primary elements |
| primary-60 | `#B85030` | Subtitle / icons |
| primary-40 | `#D88060` | Secondary text |
| primary-20 | `#EBB8A0` | Light decoration |
| primary-10 | `#F5DCD0` | Card background / border |
| primary-5 | `#FBF0EB` | Surface base color |

---

## Custom Themes

If the user specifies a particular color, create a custom theme following these steps:

1. Use the user-specified color as `primary-80`
2. Derive the full 8-level color scale according to the color scale generation rules in section 3.1 of `design-system.md`
3. Select an Accent color with a hue difference of ≥ 30° from the Primary (to ensure visual distinction). Recommended range: 60°–180°. Provide 3 accent variants (A/B/C) for variety.
4. Choose the most suitable font pairing from the presets, or use the user-specified fonts
5. Record the complete configuration in comments within the generated code to ensure consistency across the entire PPT deck

## Font Pairing Notes

Each theme has **4 font roles**:

| Role | HTML font-family Syntax | Usage |
|------|----------------------|------|
| CJK Title | Write PPT font name directly: `font-family:'SimHei','Microsoft YaHei',sans-serif` | h1, h2, cover title |
| CJK Body | Write PPT font name directly: `font-family:'Microsoft YaHei',sans-serif` | body, lists, annotations |
| Latin Title | Write PPT font name directly: `font-family:'Century Gothic','Corbel',sans-serif` | Pure Latin character titles |
| Latin Body | Write PPT font name directly: `font-family:'Corbel',sans-serif` | Pure Latin character body text |

**v3 Smart Font Mapping**: html2pptx.js automatically handles fonts:
- **PPT-safe fonts** (SimHei, Corbel, Palatino Linotype, etc. 40+) → Passed through directly, preserved as-is
- **macOS-exclusive fonts** (PingFang, Hiragino) → Automatically mapped to cross-platform equivalent fonts
- **Web fonts** (Roboto, Montserrat, Inter, etc.) → Automatically mapped to the visually closest PPT-safe font
- **fontConfig still available**: Serves as the final fallback default for CJK/Latin

**fontConfig can be passed when calling html2pptx()** (optional, used to override default fallback):
```javascript
const fontConfig = { cjk: 'SimHei', latin: 'Corbel' };
```

**Recommended practice**: Write the target PPT font name directly in HTML; do not rely on fontConfig for switching.

**PPT-safe Chinese fonts**: Microsoft YaHei / SimHei / SimSun / KaiTi / FangSong / DengXian
**PPT-safe English fonts**: Corbel / Arial / Times New Roman / Palatino Linotype / Gill Sans MT / Century Gothic / Garamond / Rockwell / Candara / Constantia / Cambria / Trebuchet MS

---

## Dark Mode Semantic Color Mapping

For themes that need a full dark-mode deck (not just individual dark slides), use these semantic overrides:

| Semantic Token | Light Mode Value | Dark Mode Value |
|---------------|-----------------|-----------------|
| `background` | `#FFFFFF` | `primary-100` |
| `surface` | `primary-5` | `primary-90` |
| `surface-card` | `#FFFFFF` | `primary-80` |
| `text-primary` | `primary-80` | `#FFFFFF` |
| `text-secondary` | `primary-60` | `rgba(255,255,255,0.75)` |
| `text-muted` | `primary-40` | `rgba(255,255,255,0.45)` |
| `border` | `primary-10` | `primary-60` |
| `on-dark` | `#FFFFFF` | `#FFFFFF` (unchanged) |

Deep Mineral and Deep Forest themes already use dark mode by default. For any other theme, apply this mapping to create a dark variant.

Cards in dark mode use `surface-card` background with **no shadow** (shadows invisible on dark backgrounds). Use subtle `border: 1pt solid primary-60` instead for card definition.
