awesome-claude-code 主题渲染指南10 分钟看懂明暗双主题横幅【免费下载链接】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-codeawesome-claude-code 是一份人工精选的 Claude Code 资源清单。这篇文章以它的明暗横幅系统为样本带你走一遍同一份 CSV 数据如何渲染出两套配色、再按页面主题自动切换的完整链路。看完你能复现这套主题定制的做法。让清单页自动跟随浏览器的明暗主题这一节解决一个问题为什么同一份清单在浅色浏览器和深色浏览器里都好看白底卡片放在深色页面上会很刺眼。项目的做法是两套横幅一起备着暗色版和亮色版。关键在 HTML 的picture标签浏览器根据条件挑图片来加载的容器。下面这段来自项目 README.mdpicture source media(prefers-color-scheme: light) srcsetassets/recently-added-light.svg img srcassets/recently-added.svg altRecently Added Resources width100% /picture效果系统是浅色就加载亮色横幅否则用暗色横幅。不写一行 JavaScript。prefers-color-scheme 是怎么判断的prefers-color-scheme是 CSS 媒体查询浏览器自动判断的条件表达式。系统主题设为 light 时命中第一条规则其余情况落到img的默认值。切换系统主题刷新页面即可换装。在一处找到横幅的全部 7 个颜色这一节解决主题定制的第一步颜色定义在哪一共几个。全部色值集中在ticker/generate_recently_added_svg.py的 THEMES 字典里。每个主题只有 7 个字段THEMES: dict[str, dict[str, str]] { dark: { card_bg: #0d1117, # 卡片底色 border: #30363d, # 描边 name: #58a6ff, # 标题 text: #c9d1d9, # 正文 muted: #8b949e, # 次要文字 pill_bg: #21262d, # 分类徽章底 accent: #3fb950, # 强调色 }, light: { ... } # 亮色版同样 7 个字段 }效果横幅上的每一处颜色都能对回这 7 个值。改主题就是换一套字典。 颜色值从哪来暗色版的 7 个值取自 GitHub 暗色界面本身的配色比如 #0d1117 就是 GitHub 暗色模式的页面底色。这样横幅嵌进页面里不突兀。做主题定制时“从宿主界面取色”是一条实用原则。一条命令重新生成双主题横幅这一节解决主题定制的第二步从色值到两张 SVG 文件中间发生了什么。整条流水线只有三步项目 README.md 的嵌入方式在图里也能看到在本地克隆里跑一条命令就全部完成make recently-added效果重新读取资源表按明暗两套配色各写出一张 SVG 到assets/目录。 为什么输出稳定可复现取数逻辑select_recent()只按“Date Added”字段排序取最新的 6 条。同样的数据进同样的文件出。项目 Makefile 注释里把这叫幂等同一命令跑多次结果逐字节一致。横幅不是画出来的素材而是构建产物。这是它能进版本控制、能随时重跑的原因。让横幅适配任意屏幕分辨率这一节解决第三个问题一张 SVG 怎么在手机窄屏和 4K 宽屏上都清晰。第一招在根元素上svg viewBox0 0 800 240 width100% xmlnshttp://www.w3.org/2000/svgviewBox 是 SVG 的内部坐标系一张固定的虚拟画布尺寸。配上width100%浏览器按容器宽度整体缩放任何分辨率下文字都不糊。 轮播为什么是“停—滑—停”横幅是 6 张卡片的轮播。每张卡片先停住让人读完再缓动滑向下一张。参数就两个常量SECONDS_PER_CARD 6.5 # 每张卡片 6.5 秒 HOLD_RATIO 0.90 # 90% 时间静止10% 用来滑动效果每张卡片静止约 5.8 秒最后 0.7 秒滑动。读者不用追着文字跑。为什么不用滤镜和光晕脚本顶部注释给了答案GitHub 对 SVG 的模糊和光晕渲染很差手机端尤其明显。所以整套轮播只用纯色块加描边。牺牲一点“效果”换所有环境里的一致显示。给滚动走马灯加一套固定亮色板这一节换个对象首页的滚动 ticker看颜色处理的另一种思路。为什么 ticker 不做双主题因为它被设计成白底组件调色板直接写死在ticker/generate_ticker_svg.py里bg_color #ffffff # 底色 border_color #e1e4e8 # 上下描边 label_bg #f6f8fa # 左侧标签块 fade_color #ffffff # 两端渐隐色效果ticker 两端用白色渐变渐隐放在浅色背景上才干净。它和双主题横幅共享同一套主题定制思路色值写进代码交给渲染流水线。涨跌用红绿不靠自定义星标增加用 #22863a 绿减少用 #cb2431 红。这两个值取自 GitHub 界面自身的涨跌色。读者对这些颜色有肌肉记忆比任何自定义色板都直观。重跑 ticker 要两步先取数再画图make ticker-data # 拉取数据到 data/repo-ticker.csv需要 GITHUB_TOKEN make ticker-svg # 重画 assets/repo-ticker.svg快速上手清单按顺序复制执行本地走通完整流程git clone https://gitcode.com/GitHub_Trending/aw/awesome-claude-code cd awesome-claude-code make help # 查看所有本地命令 make recently-added # 在本地克隆重生成明暗双主题横幅 make test # 跑项目测试套件验证环境 /parameter注意make recently-added和make ticker-svg只在你的本地克隆里重写assets/下的 SVG数据不变时产物与仓库里的完全一致。【免费下载链接】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），仅供参考 awesome-claude-code 主题渲染指南：10 分钟看懂明暗双主题横幅
awesome-claude-code 主题渲染指南10 分钟看懂明暗双主题横幅【免费下载链接】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-codeawesome-claude-code 是一份人工精选的 Claude Code 资源清单。这篇文章以它的明暗横幅系统为样本带你走一遍同一份 CSV 数据如何渲染出两套配色、再按页面主题自动切换的完整链路。看完你能复现这套主题定制的做法。让清单页自动跟随浏览器的明暗主题这一节解决一个问题为什么同一份清单在浅色浏览器和深色浏览器里都好看白底卡片放在深色页面上会很刺眼。项目的做法是两套横幅一起备着暗色版和亮色版。关键在 HTML 的picture标签浏览器根据条件挑图片来加载的容器。下面这段来自项目 README.mdpicture source media(prefers-color-scheme: light) srcsetassets/recently-added-light.svg img srcassets/recently-added.svg altRecently Added Resources width100% /picture效果系统是浅色就加载亮色横幅否则用暗色横幅。不写一行 JavaScript。prefers-color-scheme 是怎么判断的prefers-color-scheme是 CSS 媒体查询浏览器自动判断的条件表达式。系统主题设为 light 时命中第一条规则其余情况落到img的默认值。切换系统主题刷新页面即可换装。在一处找到横幅的全部 7 个颜色这一节解决主题定制的第一步颜色定义在哪一共几个。全部色值集中在ticker/generate_recently_added_svg.py的 THEMES 字典里。每个主题只有 7 个字段THEMES: dict[str, dict[str, str]] { dark: { card_bg: #0d1117, # 卡片底色 border: #30363d, # 描边 name: #58a6ff, # 标题 text: #c9d1d9, # 正文 muted: #8b949e, # 次要文字 pill_bg: #21262d, # 分类徽章底 accent: #3fb950, # 强调色 }, light: { ... } # 亮色版同样 7 个字段 }效果横幅上的每一处颜色都能对回这 7 个值。改主题就是换一套字典。 颜色值从哪来暗色版的 7 个值取自 GitHub 暗色界面本身的配色比如 #0d1117 就是 GitHub 暗色模式的页面底色。这样横幅嵌进页面里不突兀。做主题定制时“从宿主界面取色”是一条实用原则。一条命令重新生成双主题横幅这一节解决主题定制的第二步从色值到两张 SVG 文件中间发生了什么。整条流水线只有三步项目 README.md 的嵌入方式在图里也能看到在本地克隆里跑一条命令就全部完成make recently-added效果重新读取资源表按明暗两套配色各写出一张 SVG 到assets/目录。 为什么输出稳定可复现取数逻辑select_recent()只按“Date Added”字段排序取最新的 6 条。同样的数据进同样的文件出。项目 Makefile 注释里把这叫幂等同一命令跑多次结果逐字节一致。横幅不是画出来的素材而是构建产物。这是它能进版本控制、能随时重跑的原因。让横幅适配任意屏幕分辨率这一节解决第三个问题一张 SVG 怎么在手机窄屏和 4K 宽屏上都清晰。第一招在根元素上svg viewBox0 0 800 240 width100% xmlnshttp://www.w3.org/2000/svgviewBox 是 SVG 的内部坐标系一张固定的虚拟画布尺寸。配上width100%浏览器按容器宽度整体缩放任何分辨率下文字都不糊。 轮播为什么是“停—滑—停”横幅是 6 张卡片的轮播。每张卡片先停住让人读完再缓动滑向下一张。参数就两个常量SECONDS_PER_CARD 6.5 # 每张卡片 6.5 秒 HOLD_RATIO 0.90 # 90% 时间静止10% 用来滑动效果每张卡片静止约 5.8 秒最后 0.7 秒滑动。读者不用追着文字跑。为什么不用滤镜和光晕脚本顶部注释给了答案GitHub 对 SVG 的模糊和光晕渲染很差手机端尤其明显。所以整套轮播只用纯色块加描边。牺牲一点“效果”换所有环境里的一致显示。给滚动走马灯加一套固定亮色板这一节换个对象首页的滚动 ticker看颜色处理的另一种思路。为什么 ticker 不做双主题因为它被设计成白底组件调色板直接写死在ticker/generate_ticker_svg.py里bg_color #ffffff # 底色 border_color #e1e4e8 # 上下描边 label_bg #f6f8fa # 左侧标签块 fade_color #ffffff # 两端渐隐色效果ticker 两端用白色渐变渐隐放在浅色背景上才干净。它和双主题横幅共享同一套主题定制思路色值写进代码交给渲染流水线。涨跌用红绿不靠自定义星标增加用 #22863a 绿减少用 #cb2431 红。这两个值取自 GitHub 界面自身的涨跌色。读者对这些颜色有肌肉记忆比任何自定义色板都直观。重跑 ticker 要两步先取数再画图make ticker-data # 拉取数据到 data/repo-ticker.csv需要 GITHUB_TOKEN make ticker-svg # 重画 assets/repo-ticker.svg快速上手清单按顺序复制执行本地走通完整流程git clone https://gitcode.com/GitHub_Trending/aw/awesome-claude-code cd awesome-claude-code make help # 查看所有本地命令 make recently-added # 在本地克隆重生成明暗双主题横幅 make test # 跑项目测试套件验证环境 /parameter注意make recently-added和make ticker-svg只在你的本地克隆里重写assets/下的 SVG数据不变时产物与仓库里的完全一致。【免费下载链接】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），仅供参考