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 里的一个目标它会处理好依赖安装并输出两张 SVGassets/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#ffffffborder卡片描边#30363d#d0d7dename仓库标题颜色#58a6ff#0969datext描述正文颜色#c9d1d9#1f2328muted作者等次要信息#8b949e#656d76pill_bg右上角分类标签底色#21262d#f6f8faaccent强调点缀色#3fb950#1a7f37记忆口诀深色主题深底浅字浅色主题白底深字。你只需要替换对应列的取值字段名一个都不用动。进阶三连招改完直接能用下面三招都不需要额外造轮子轮播图自动跟随读者系统模式、你的配色可以单独导出、弱渲染环境有天然兜底。跟随系统自动切换深浅原理来自 HTML 里两个标签的配合picture是按条件加载不同图片的容器prefers-color-scheme是浏览器用来报告读者系统处于浅色还是深色模式的接口。templates/README.template.md 用的正是这套组合所以 README 生成后谁打开它谁就自动看到自己系统模式下合适的那张图。picture source media(prefers-color-scheme: light) srcsetassets/recently-added-light.svg img srcassets/recently-added.svg width100% /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.pyTHEMES色值字典与 SVG 渲染全流程Makefilemake recently-added、make generate、make ticker等全部入口templates/README.template.mdpicture深浅双图嵌入的模板出处【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考