| 1 | # Themes catalog |
| 2 | |
| 3 | Every theme is a short CSS file in `assets/themes/` that overrides tokens |
| 4 | defined in `assets/base.css`. Switch themes by changing the `href` of |
| 5 | `<link id="theme-link">` or by pressing **T** if the deck has a |
| 6 | `data-themes="a,b,c"` attribute on `<body>` or `<html>`. |
| 7 | |
| 8 | All themes define the same variables: `--bg`, `--bg-soft`, `--surface`, |
| 9 | `--surface-2`, `--border`, `--text-1/2/3`, `--accent`, `--accent-ink`, `--accent-2/3`, |
| 10 | `--good`, `--warn`, `--bad`, `--grad`, `--grad-soft`, `--radius*`, `--shadow*`, |
| 11 | `--font-sans`, `--font-display`. |
| 12 | |
| 13 | ### `--accent-ink` — the text colour on an accent fill |
| 14 | |
| 15 | Anything that paints text *on top of* `--accent` (a filled button, a numbered |
| 16 | badge, a highlighted tag) must use `--accent-ink` for its `color`, never a |
| 17 | hardcoded `#fff` or `#000`. Accents across these 36 themes run from `#ffffff` |
| 18 | (`blueprint`) to `#000000` (`sharp-mono`), so no single literal is readable |
| 19 | against all of them: `#0b1024` on `minimal-white`'s near-black accent measured |
| 20 | **1.01:1** — invisible, and the layout still looked fine at a glance. |
| 21 | |
| 22 | Each theme sets `--accent-ink` to whichever of white / near-black clears WCAG |
| 23 | AA against its own accent. The tightest in the set is `y2k-chrome` at 4.54:1; |
| 24 | every other theme is higher. The `:root` fallback in `base.css` — what you get |
| 25 | with no theme linked — is `#000000`, which measures 4.77:1 against the default |
| 26 | `--accent` (white would be 4.40:1, below AA). |
| 27 | |
| 28 | ```css |
| 29 | .my-badge{background:var(--accent);color:var(--accent-ink)} |
| 30 | ``` |
| 31 | |
| 32 | If you add a theme, add `--accent-ink` with it. |
| 33 | |
| 34 | ## Light & calm |
| 35 | |
| 36 | | name | description | when to use | |
| 37 | |---|---|---| |
| 38 | | `minimal-white` | 极简白，克制高级。Inter，强文字层级，极低阴影。 | 内部汇报、一对一技术评审、不抢内容的严肃话题 | |
| 39 | | `editorial-serif` | 杂志风 Playfair 衬线 + 奶油底。 | 品牌故事、文字密度大的长文演讲 | |
| 40 | | `soft-pastel` | 柔和马卡龙三色渐变。 | 产品发布、面向消费者、轻松话题 | |
| 41 | | `xiaohongshu-white` | 小红书白底 + 暖红 accent + 衬线标题。 | 小红书图文、生活/美学类内容 | |
| 42 | | `solarized-light` | 经典低眩光配色。 | 长时间观看的工作坊、教学 | |
| 43 | | `catppuccin-latte` | catppuccin 浅色。 | 开发者、极客友好的技术分享 | |
| 44 | |
| 45 | ## Bold & statement |
| 46 | |
| 47 | | name | description | when to use | |
| 48 | |---|---|---| |
| 49 | | `sharp-mono` | 纯黑白 + Archivo Black + 硬阴影。 | 宣言类、极具冲击力的视觉 | |
| 50 | | `neo-brutalism` | 厚描边、硬阴影、明黄 accent。 | 创业路演、敢说敢做的调性 | |
| 51 | | `bauhaus` | 几何 + 红黄蓝原色。 | 设计 talk、艺术史/产品美学主题 | |
| 52 | | `swiss-grid` | 瑞士网格 + Helvetica 感 + 12 栏底纹。 | 严肃排版、设计行业 | |
| 53 | | `memphis-pop` | 孟菲斯波普背景点 + 大字标题。 | 年轻、潮流、品牌合作 | |
| 54 | |
| 55 | ## Cool & dark |
| 56 | |
| 57 | | name | description | when to use | |
| 58 | |---|---|---| |
| 59 | | `catppuccin-mocha` | catppuccin 深。 | 开发者内部分享、长时间观看 | |
| 60 | | `dracula` | 经典 Dracula 紫红主色。 | 代码密集的技术分享 | |
| 61 | | `tokyo-night` | Tokyo Night 蓝夜。 | 偏冷技术分享、基础设施 | |
| 62 | | `nord` | 北欧清冷蓝白。 | 基础设施、云产品 | |
| 63 | | `gruvbox-dark` | 温暖复古深色。 | Terminal / vim / *nix 社群 | |
| 64 | | `rose-pine` | 玫瑰松，柔和暗色。 | 设计+开发交界、审美向技术 | |
| 65 | | `arctic-cool` | 蓝/青/石板灰 浅色版。 | 商业分析、金融、冷静理性 | |
| 66 | |
| 67 | ## Warm & vibrant |
| 68 | |
| 69 | | name | description | when to use | |
| 70 | |---|---|---| |
| 71 | | `sunset-warm` | 橘 / 珊瑚 / 琥珀三色渐变。 | 生活方式、奖项颁发、情绪正向 | |
| 72 | |
| 73 | ## Effect-heavy |
| 74 | |
| 75 | | name | description | when to use | |
| 76 | |---|---|---| |
| 77 | | `glassmorphism` | 毛玻璃 + 多色光斑背景。 | Apple 式发布会、产品特性展示 | |
| 78 | | `aurora` | 极光渐变 + blur + saturate。 | 封面 / CTA / 结语页 | |
| 79 | | `rainbow-gradient` | 白底 + 彩虹流动渐变 accent。 | 欢乐向、节日、庆祝页 | |
| 80 | | `blueprint` | 蓝图工程 + 网格底纹 + 蒙太奇字体。 | 系统架构、工程蓝图 | |
| 81 | | `terminal-green` | 绿屏终端 + 等宽 + 发光文字。 | CLI/black-hat/复古朋克 | |
| 82 | |
| 83 | ## v2 additions |
| 84 | |
| 85 | ### Light & professional |
| 86 | |
| 87 | | name | description | when to use | |
| 88 | |---|---|---| |
| 89 | | `corporate-clean` | 纯白 + 海军蓝 accent + Inter + 保守边框。 | 董事会汇报、B2B 销售、金融保险 | |
| 90 | | `pitch-deck-vc` | YC 风白底 + 蓝紫渐变 accent + 大留白。 | 融资路演、种子轮、VC meeting | |
| 91 | | `academic-paper` | 论文白 + 衬线正文 + 黑墨 + 蓝链接。 | 学术报告、研究分享、会议论文 | |
| 92 | | `japanese-minimal` | 象牙白 + 朱红 accent + 极大留白 + Noto Serif。 | 品牌升级、匠人故事、禅意叙事 | |
| 93 | | `engineering-whiteprint` | 白底 + 坐标纸网格 + 海军墨线 + 等宽字。 | 系统设计、API 文档、架构白皮书 | |
| 94 | |
| 95 | ### Bold & editorial |
| 96 | |
| 97 | | name | description | when to use | |
| 98 | |---|---|---| |
| 99 | | `magazine-bold` | 奶油底 + 超大 Playfair 衬线 + 橙色 spot。 | 专栏文章、封面故事、品牌月刊 | |
| 100 | | `news-broadcast` | 白底 + 红色竖条 + Oswald 大写 + 硬阴影。 | 突发新闻、发布通稿、数据播报 | |
| 101 | | `midcentury` | 奶油底 + 芥末/青/焦橙 + 锐利几何。 | 设计史、家居美学、复古品牌 | |
| 102 | | `retro-tv` | 暖奶油 + CRT 扫描线 + 琥珀橙 accent。 | 怀旧叙事、八零九零年代主题 | |
| 103 | |
| 104 | ### Effect-heavy / dramatic |
| 105 | |
| 106 | | name | description | when to use | |
| 107 | |---|---|---| |
| 108 | | `cyberpunk-neon` | 纯黑 + 霓虹粉青黄 + 发光 + JetBrains Mono。 | 黑客、地下文化、赛博 talk | |
| 109 | | `vaporwave` | 深紫 + 粉红青蓝渐变 + 晕染光斑。 | 音乐、潮流艺术、A E S T H E T I C | |
| 110 | | `y2k-chrome` | 银铬渐变 + 彩虹 accent + 大圆角 + Space Grotesk。 | 千禧怀旧、时尚品牌、Gen-Z | |
| 111 | |
| 112 | ## How to apply |
| 113 | |
| 114 | ```html |
| 115 | <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css"> |
| 116 | ``` |
| 117 | |
| 118 | Or enable `T`-cycling by listing themes on the body: |
| 119 | |
| 120 | ```html |
| 121 | <body data-themes="minimal-white,aurora,catppuccin-mocha" data-theme-base="../assets/themes/"> |
| 122 | ``` |
| 123 | |
| 124 | ## How to extend |
| 125 | |
| 126 | Copy an existing theme, rename it, and override only the variables you want to |
| 127 | change. Keep each theme under ~200 lines. Prefer adjusting tokens to adding |
| 128 | new selectors. |
| 129 |