79 lines
3.5 KiB
Markdown
79 lines
3.5 KiB
Markdown
# 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
|
||
`<link id="theme-link">` or by pressing **T** if the deck has a
|
||
`data-themes="a,b,c"` attribute on `<body>` or `<html>`.
|
||
|
||
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
|
||
<link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
|
||
```
|
||
|
||
Or enable `T`-cycling by listing themes on the body:
|
||
|
||
```html
|
||
<body data-themes="minimal-white,aurora,catppuccin-mocha" data-theme-base="../assets/themes/">
|
||
```
|
||
|
||
## 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.
|