22 KiB
Executable File
22 KiB
Executable File
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
- AI selects the theme based on scene classification and content tone
- Each PPT deck uses only one theme, no switching throughout
- 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 | #1B4332 |
| 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(18,45,31,0.75) (primary-90 based) |
Color Scale:
| Scale | Color Value |
|---|---|
| primary-100 | #0B1E14 |
| primary-90 | #122D1F |
| primary-80 | #1B4332 |
| primary-60 | #2E6B4F |
| primary-40 | #60A882 |
| primary-20 | #A8D4BC |
| primary-10 | #D8EEE2 |
| primary-5 | #EEF7F1 |
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) | #9B50F5 (electric purple) |
| 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-cardwith 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=#264A3Ctext-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) | #FF6B2B (electric orange) |
| 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) | #F04828 (fire orange) |
| 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 |
14. Volt (Electric / Startup Dark)
| Property | Value |
|---|---|
| Mood | Electric, aggressive, high-energy |
| Suitable for | AI/tech product launches, startup pitches, youth tech brands, digital innovation |
| Primary | #FFFFFF |
| Accent (A — default) | #00F5A0 (electric mint-green) |
| Accent B | #FF5E3A (electric orange) |
| Accent C | #A855F7 (electric purple) |
| Background Override | #080B14 (near-black with blue tint, 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 | neon, circuit board, futuristic, dark ui, electric glow, startup, code, data stream |
| Mask Color | rgba(5,7,16,0.70) (primary-100 based) |
Dark theme notes: Same inverted logic as Deep Mineral — see its notes above.
background=#080B14,surface=#0F1424,surface-card=#162033text-primary=#FFFFFF,text-secondary=rgba(255,255,255,0.75),text-muted=rgba(255,255,255,0.45)- Accents are extremely vivid by design — use sparingly (bars, numbers, key labels only)
Color Scale (inverted):
| Scale | Color Value | Usage |
|---|---|---|
| primary-100 | #050710 |
Deepest background |
| primary-90 | #0D1320 |
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 | #1E2E48 |
Card borders / subtle decorations |
| primary-10 | #0F1424 |
Surface / content area base |
| primary-5 | #080B14 |
Page background |
15. Vermillion (Chinese Red)
| Property | Value |
|---|---|
| Mood | Ceremonial, festive, culturally resonant |
| Suitable for | Chinese cultural events, Spring Festival, traditional ceremonies, brand storytelling with Chinese aesthetics |
| Primary | #8B1A1A |
| Accent (A — default) | #D4AF37 (Chinese gold) |
| Accent B | #C4762A (copper bronze) |
| Accent C | #2D6B8A (cool blue contrast) |
| Background Override | #FDF8F2 (warm rice-paper white, replaces default #FFFFFF) |
| CJK Title Font | SimSun Bold |
| CJK Body Font | Microsoft YaHei |
| Latin Title Font | Palatino Linotype Bold |
| Latin Body Font | Corbel |
| Image Keywords | red lantern, Chinese architecture, traditional culture, festival, gold ornament, calligraphy, temple, Spring Festival |
| Mask Color | rgba(107,20,20,0.75) (primary-90 based) |
Warm background notes: Uses warm rice-paper white #FDF8F2 instead of pure white:
background=#FDF8F2,surface=#F5EDE0(warm tint),surface-card=#FEFDFB(near-white card)- Avoid pure white elements that would look jarring against the warm base
Color Scale:
| Scale | Color Value | Usage |
|---|---|---|
| primary-100 | #450D0D |
Deepest background / dramatic pages |
| primary-90 | #6B1414 |
Title bar background |
| primary-80 | #8B1A1A |
Title text / primary elements |
| primary-60 | #B84040 |
Subtitle / icons |
| primary-40 | #D57070 |
Secondary text |
| primary-20 | #EDB0B0 |
Light decoration |
| primary-10 | #F8E0E0 |
Card background / border |
| primary-5 | #FDF4F4 |
Surface base color |
Custom Themes
If the user specifies a particular color, create a custom theme following these steps:
- Use the user-specified color as
primary-80 - Derive the full 8-level color scale according to the color scale generation rules in section 3.1 of
design-system.md - 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.
- Choose the most suitable font pairing from the presets, or use the user-specified fonts
- 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):
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.