# Themes catalog Every theme is a short CSS file in `assets/themes/` that overrides tokens defined in `assets/base.css`. Switch themes by changing the `href` of `` or by pressing **T** if the deck has a `data-themes="a,b,c"` attribute on `
` or ``. All themes define the same variables: `--bg`, `--bg-soft`, `--surface`, `--surface-2`, `--border`, `--text-1/2/3`, `--accent`, `--accent-2/3`, `--good`, `--warn`, `--bad`, `--grad`, `--grad-soft`, `--radius*`, `--shadow*`, `--font-sans`, `--font-display`. ## Light & calm | name | description | when to use | |---|---|---| | `minimal-white` | 极简白,克制高级。Inter,强文字层级,极低阴影。 | 内部汇报、一对一技术评审、不抢内容的严肃话题 | | `editorial-serif` | 杂志风 Playfair 衬线 + 奶油底。 | 品牌故事、文字密度大的长文演讲 | | `soft-pastel` | 柔和马卡龙三色渐变。 | 产品发布、面向消费者、轻松话题 | | `xiaohongshu-white` | 小红书白底 + 暖红 accent + 衬线标题。 | 小红书图文、生活/美学类内容 | | `solarized-light` | 经典低眩光配色。 | 长时间观看的工作坊、教学 | | `catppuccin-latte` | catppuccin 浅色。 | 开发者、极客友好的技术分享 | ## Bold & statement | name | description | when to use | |---|---|---| | `sharp-mono` | 纯黑白 + Archivo Black + 硬阴影。 | 宣言类、极具冲击力的视觉 | | `neo-brutalism` | 厚描边、硬阴影、明黄 accent。 | 创业路演、敢说敢做的调性 | | `bauhaus` | 几何 + 红黄蓝原色。 | 设计 talk、艺术史/产品美学主题 | | `swiss-grid` | 瑞士网格 + Helvetica 感 + 12 栏底纹。 | 严肃排版、设计行业 | | `memphis-pop` | 孟菲斯波普背景点 + 大字标题。 | 年轻、潮流、品牌合作 | ## Cool & dark | name | description | when to use | |---|---|---| | `catppuccin-mocha` | catppuccin 深。 | 开发者内部分享、长时间观看 | | `dracula` | 经典 Dracula 紫红主色。 | 代码密集的技术分享 | | `tokyo-night` | Tokyo Night 蓝夜。 | 偏冷技术分享、基础设施 | | `nord` | 北欧清冷蓝白。 | 基础设施、云产品 | | `gruvbox-dark` | 温暖复古深色。 | Terminal / vim / *nix 社群 | | `rose-pine` | 玫瑰松,柔和暗色。 | 设计+开发交界、审美向技术 | | `arctic-cool` | 蓝/青/石板灰 浅色版。 | 商业分析、金融、冷静理性 | ## Warm & vibrant | name | description | when to use | |---|---|---| | `sunset-warm` | 橘 / 珊瑚 / 琥珀三色渐变。 | 生活方式、奖项颁发、情绪正向 | ## Effect-heavy | name | description | when to use | |---|---|---| | `glassmorphism` | 毛玻璃 + 多色光斑背景。 | Apple 式发布会、产品特性展示 | | `aurora` | 极光渐变 + blur + saturate。 | 封面 / CTA / 结语页 | | `rainbow-gradient` | 白底 + 彩虹流动渐变 accent。 | 欢乐向、节日、庆祝页 | | `blueprint` | 蓝图工程 + 网格底纹 + 蒙太奇字体。 | 系统架构、工程蓝图 | | `terminal-green` | 绿屏终端 + 等宽 + 发光文字。 | CLI/black-hat/复古朋克 | ## How to apply ```html ``` Or enable `T`-cycling by listing themes on the body: ```html ``` ## How to extend Copy an existing theme, rename it, and override only the variables you want to change. Keep each theme under ~200 lines. Prefer adjusting tokens to adding new selectors.