awesome-claude-code 主题配色定制指南：1 条命令出深浅双主题，7 个色值改出自己的风格-港品优选

awesome-claude-code 主题配色定制指南：1 条命令出深浅双主题，7 个色值改出自己的风格

【免费下载链接】awesome-claude-codeA hand-picked collection of the finest of resources for the most awesome of agents, Claude Code, the undisputed champion of coding companions, from the unstoppable team at Anthropic PBC. A delectable showcase of top tier skills, ambidextrous agents, scintillating status lines, top notch developer tooling, and also we have plugins项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-claude-code

为什么把系统切成浅色模式后，README 里"Recently Added"轮播图会自动换成白底？这不是什么魔法，而是 awesome-claude-code 把主题配色做成了代码：深浅两套色板就写在源码的一个字典里，一条命令就能重新渲染出两套 SVG 图。读完这篇指南，你可以把轮播图改成自己的配色，并把同一套风格推给整个团队。

从改一行开始：最快的深浅色切换

这一节的目标是 30 秒看到效果 🚀 先 clone 仓库，然后跑 Makefile 里的一个目标，它会处理好依赖安装，并输出两张 SVG：assets/recently-added.svg（深色）和assets/recently-added-light.svg（浅色）。SVG 是矢量图，放大缩小都不糊，你在浏览器里左右对照打开，就能看到完整的主题效果。

git clone https://gitcode.com/GitHub_Trending/aw/awesome-claude-code cd awesome-claude-code make recently-added

想连顶部滚动横幅一起更新可以跑make ticker，它需要GITHUB_TOKEN环境变量，新手可以先跳过。

摸清配色：主题配置文件里有什么

这一节回答"改哪里"。全部色值定义在 ticker/generate_recently_added_svg.py 的THEMES字典里，每个主题 7 个色值。改之前先看这张表 🎨 HEX 色值就是#0d1117这样的六位颜色写法，你只需要认得它。

字段	作用	dark 取值	light 取值
`card_bg`	卡片背景	`#0d1117`	`#ffffff`
`border`	卡片描边	`#30363d`	`#d0d7de`
`name`	仓库标题颜色	`#58a6ff`	`#0969da`
`text`	描述正文颜色	`#c9d1d9`	`#1f2328`
`muted`	作者等次要信息	`#8b949e`	`#656d76`
`pill_bg`	右上角分类标签底色	`#21262d`	`#f6f8fa`
`accent`	强调点缀色	`#3fb950`	`#1a7f37`

记忆口诀：深色主题=深底浅字，浅色主题=白底深字。你只需要替换对应列的取值，字段名一个都不用动。

进阶三连招：改完直接能用

下面三招都不需要额外造轮子：轮播图自动跟随读者系统模式、你的配色可以单独导出、弱渲染环境有天然兜底。

跟随系统自动切换深浅

原理来自 HTML 里两个标签的配合：<picture>是"按条件加载不同图片"的容器，prefers-color-scheme是浏览器用来报告读者系统处于浅色还是深色模式的接口。templates/README.template.md 用的正是这套组合，所以 README 生成后，谁打开它，谁就自动看到自己系统模式下合适的那张图。

<picture> <source media="(prefers-color-scheme: light)" srcset="assets/recently-added-light.svg"> <img src="assets/recently-added.svg" width="100%"> </picture>

也就是说，你不用提醒读者做任何切换，图会自己挑色板。

导出并分享自己的配色

如果你不想动assets/里的原图，可以借助RECENT_ASSETS_DIR这个环境变量把输出目录指到自己名下。改完THEMES后执行下面一条命令，定制好的深浅两套图会落到你的目录里，直接发给同事即可。

RECENT_ASSETS_DIR=./my-theme make recently-added

低色深终端自动降级

这套"降级"其实是项目的设计选择：SVG 里只用纯色 HEX 值，源码注释里明确写了 GitHub 对模糊、发光这类滤镜渲染效果差（移动端尤其明显），所以这些容易在弱渲染环境翻车的效果一概不用。再叠加 SVG 是矢量图的特性，同一张图在窄终端和宽屏上都不会糊，弱环境里自然退化成"能看清的纯色矢量图"，而不是"花屏"。

团队场景：一条命令统一大家的终端风格

配色改动落在共享分支后，不用挨个跑脚本，make generate会一次性重建全部派生产物：轮播 SVG、issue 表单下拉项、README。这个目标是幂等的（幂等指跑一次和跑十次结果完全一致），所以放心反复执行。跑完把重新生成的assets/文件提交上去，所有人打开仓库看到的就是同一套风格。

避坑清单：颜色不生效的几种情况

现象	常见原因	解决办法
改了`THEMES`还是旧配色	忘记重新生成，页面仍引用旧 SVG	执行`make recently-added`，并强刷浏览器清缓存
目标直接报依赖错误	依赖还没装进 venv	先单独跑`make deps`
深浅两张图长得一样	打开的是同一个文件	浅色版文件叫`recently-added-light.svg`，核对文件名
本地浏览器正常，平台渲染发虚	用了弱渲染环境不支持的效果	保持只用纯色 HEX 值，重新生成

收尾与资源

配色放字典、切换放命令、兼容放一个<picture>，这就是这个仓库主题系统的全部骨架 ⚙️ 想继续动手，下面三个入口够用：

ticker/generate_recently_added_svg.py：THEMES色值字典与 SVG 渲染全流程
Makefile：make recently-added、make generate、make ticker等全部入口
templates/README.template.md：<picture>深浅双图嵌入的模板出处

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析