尧图网页设计 
1. UniApp 多端主题系统为什么总是改一处崩三端UniApp 主题系统这件事说简单也简单说坑也真能坑到人。它本质上是一套「把颜色、字号、间距、圆角、阴影这些视觉原子抽出来集中管理再在运行时按主题名动态注入到页面」的机制能做什么一句话让换肤、大字体模式、深色模式这些需求从「改十几处代码」变成「改一个配置对象」。适合谁适合正在做中大型 UniApp 项目、被小程序 / H5 / App-vue / App-nvue 四端样式差异折磨过的同学。我见过太多项目的换肤实现是这样的pages/index/index.vue里写死background: #ffffffcomponents/card.vue里写死font-size: 28rpxpages/user/user.vue里又写死padding: 30rpx。等到产品说「加一套深色主题」你打开全局搜索#ffffff出现 87 次28rpx出现 143 次改到一半发现漏了一个弹窗组件上线后用户截图发过来深色模式下有个白块。更麻烦的是字体和间距。很多所谓的「换肤」只换颜色字号边距完全不动。产品要做「老年大字体模式」你只能再写一套large-font的样式覆盖页面里到处if (isLargeFont)判断业务代码和样式逻辑搅在一起可读性直接崩掉。核心矛盾在于视觉原子散落在业务代码里没有单一数据源。颜色是一套字号是一套间距又是一套三套东西各改各的主题数量一多维护成本就线性上涨。解法思路其实很清晰分三层第一层是主题配置层用一个 JS 对象维护多套主题每套主题里包含完整的颜色池、字号池、间距系统、圆角、阴影。这是唯一的数据源。第二层是运行时注入层把 JS 配置转成 CSS 变量全局挂载。页面和组件里只写var(--fontSizeBase)不写具体数值。第三层是状态管理层用全局 store 保存当前主题名切换时重新注入变量并持久化到本地存储。这三层搭好之后新增一套主题只需要在配置对象里加一个 key业务页面一行都不用动。而 Claude Code 这类 AI 编码智能体在这里的价值是帮你批量扫描硬编码样式、生成配置代码、检查多端兼容问题——尤其是 nvue 页面不能用 CSS 变量这种坑人工排查很容易漏让 AI 遍历一遍效率高得多。下面我从配置、注入、切换、验证、排障完整走一遍代码都可以直接复制。2. 用 TaoToken 统一通道接入 Claude Code 做主题代码生成在开始写代码之前先把 AI 辅助这条链路搭好。Claude Code 在终端里跑能直接读写你项目里的文件让它扫描硬编码样式、生成主题配置、批量改造组件比在网页对话框里复制粘贴高效得多。接入的关键是统一 API 通道。TaoToken 提供统一的 Key 和 API 入口Claude Code、Codex 这类工具都可以走同一个通道不用每个工具单独配一套凭证。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。具体操作路径先去控制台创建 API Key地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面生成一个 Key复制保存好。Key 的管理页面在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。然后配置 Claude Code。Claude Code 读取的是环境变量或者配置文件核心三件套是 Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiKey 填你刚生成的那串Model ID 按你实际使用的模型填。如果你用的是 Claude Code 的 Anthropic 兼容模式配置入口参考 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里的说明。配置好之后在项目根目录启动 Claude Code它就能读取你的 UniApp 工程文件了。你可以直接对它说「遍历 src 目录下所有 vue 文件找出所有写死的 font-size、padding、margin、border-radius、background、color输出文件路径和行号。」这一步是后面批量改造的基础。如果你更习惯在对话界面里验证模型输出可以先在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 里试几条提示词确认模型对 UniApp 多端差异的理解到位再放到 Claude Code 里跑批量任务。对于长期做编码和 Agent 任务的场景Coding Plan 会更划算入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它适合这种「反复扫描、反复生成、反复调试」的主题系统搭建过程不用每次单独算额度。有一点要提醒Claude Code 生成代码后一定要自己 review 再提交。尤其是 nvue 页面的改造AI 有时候会惯性写成var(--xxx)而 nvue 根本不支持 CSS 变量这个必须人工确认。后面第五节会专门讲这个报错怎么排查。3. 可复制的主题配置与 CSS 变量注入代码这一节是核心所有代码都可以直接复制到项目里用。目录结构建议这样src/ common/ theme.js # 主题配置 变量生成 store/ theme.js # 主题状态管理 App.vue # 初始化注入 pages/ index/index.vue # 示例页面3.1 主题配置文件 theme.js先定义三套主题light、dark、large-font老年大字体模式。注意字号和间距的 key 名称在三套主题里必须完全一致只改值。// src/common/theme.js export const themeList { light: { // 颜色体系 colorPrimary: #2979ff, colorSuccess: #07c160, colorWarning: #ff9500, colorError: #f53f3f, textMain: #333333, textSecondary: #666666, textPlaceholder: #999999, bgPage: #f5f5f5, bgCard: #ffffff, borderColor: #eeeeee, // 字号系统 fontSizeXs: 22rpx, fontSizeSm: 24rpx, fontSizeBase: 28rpx, fontSizeLg: 32rpx, fontSizeXl: 36rpx, // 间距系统 spaceXs: 10rpx, spaceSm: 20rpx, spaceBase: 30rpx, spaceLg: 40rpx, spaceXl: 60rpx, // 圆角 radiusSm: 8rpx, radiusBase: 12rpx, radiusLg: 20rpx }, dark: { colorPrimary: #4096ff, colorSuccess: #26c97c, colorWarning: #ffa940, colorError: #ff4d4f, textMain: #e5e5e5, textSecondary: #bbbbbb, textPlaceholder: #888888, bgPage: #121212, bgCard: #1e1e1e, borderColor: #333333, fontSizeXs: 22rpx, fontSizeSm: 24rpx, fontSizeBase: 28rpx, fontSizeLg: 32rpx, fontSizeXl: 36rpx, spaceXs: 10rpx, spaceSm: 20rpx, spaceBase: 30rpx, spaceLg: 40rpx, spaceXl: 60rpx, radiusSm: 8rpx, radiusBase: 12rpx, radiusLg: 20rpx }, large-font: { colorPrimary: #2979ff, colorSuccess: #07c160, colorWarning: #ff9500, colorError: #f53f3f, textMain: #333333, textSecondary: #666666, textPlaceholder: #999999, bgPage: #f5f5f5, bgCard: #ffffff, borderColor: #eeeeee, // 字号整体放大 fontSizeXs: 28rpx, fontSizeSm: 32rpx, fontSizeBase: 38rpx, fontSizeLg: 44rpx, fontSizeXl: 50rpx, // 间距整体放大 spaceXs: 16rpx, spaceSm: 28rpx, spaceBase: 40rpx, spaceLg: 56rpx, spaceXl: 80rpx, radiusSm: 8rpx, radiusBase: 12rpx, radiusLg: 20rpx } }; // 生成 CSS 变量字符串 export function buildCssVars(themeName) { const theme themeList[themeName]; if (!theme) return ; let cssText ; Object.keys(theme).forEach(key { cssText --${key}:${theme[key]};; }); return cssText; }3.2 状态管理 store用 Pinia 或 Vuex 都行这里用 Pinia 示例// src/store/theme.js import { defineStore } from pinia; import { buildCssVars } from /common/theme.js; export const useThemeStore defineStore(theme, { state: () ({ currentTheme: light }), actions: { setCurrentTheme(name) { this.currentTheme name; } } });3.3 主题切换工具函数// src/common/themeSwitch.js import { useThemeStore } from /store/theme.js; import { buildCssVars } from /common/theme.js; export function toggleTheme(themeName) { const store useThemeStore(); store.setCurrentTheme(themeName); uni.setStorageSync(app_theme, themeName); const cssVars buildCssVars(themeName); // #ifdef H5 // H5 直接操作 document const styleId app-theme-vars; let styleEl document.getElementById(styleId); if (!styleEl) { styleEl document.createElement(style); styleEl.id styleId; document.head.appendChild(styleEl); } styleEl.innerHTML :root{${cssVars}}; // #endif // #ifndef H5 // 小程序 / App-vue 通过动态 style 挂载到根节点 // 这里用 uni.$emit 通知根组件更新 uni.$emit(theme-change, cssVars); // #endif uni.showToast({ title: 主题切换成功, icon: none }); }3.4 App.vue 初始化!-- src/App.vue -- script import { useThemeStore } from /store/theme.js; import { buildCssVars } from /common/theme.js; export default { onLaunch() { const store useThemeStore(); const saved uni.getStorageSync(app_theme) || light; store.setCurrentTheme(saved); const cssVars buildCssVars(saved); uni.$emit(theme-change, cssVars); } }; /script style /* 全局默认变量防止首屏闪烁 */ page { --colorPrimary: #2979ff; --textMain: #333333; --bgPage: #f5f5f5; --bgCard: #ffffff; --fontSizeBase: 28rpx; --spaceBase: 30rpx; --radiusBase: 12rpx; } /style3.5 页面使用示例!-- src/pages/index/index.vue -- template view classpage view classcard text classtitle主题系统演示/text text classdesc当前主题{{ currentTheme }}/text button clickswitchTheme(light)浅色/button button clickswitchTheme(dark)深色/button button clickswitchTheme(large-font)大字体/button /view /view /template script import { useThemeStore } from /store/theme.js; import { toggleTheme } from /common/themeSwitch.js; export default { computed: { currentTheme() { return useThemeStore().currentTheme; } }, methods: { switchTheme(name) { toggleTheme(name); } } }; /script style .page { background: var(--bgPage); min-height: 100vh; padding: var(--spaceBase); } .card { background: var(--bgCard); color: var(--textMain); font-size: var(--fontSizeBase); padding: var(--spaceBase); margin-bottom: var(--spaceSm); border-radius: var(--radiusBase); border: 1rpx solid var(--borderColor); } .title { font-size: var(--fontSizeXl); color: var(--textMain); } .desc { font-size: var(--fontSizeSm); color: var(--textSecondary); margin-top: var(--spaceSm); } /style3.6 nvue 页面兼容写法nvue 不支持 CSS 变量必须用 JS 读取主题对象绑定内联 style!-- src/pages/nvue-page/nvue-page.nvue -- template view :stylecardStyle text :styletitleStylenvue 页面/text /view /template script import { themeList } from /common/theme.js; import { useThemeStore } from /store/theme.js; export default { computed: { theme() { const name useThemeStore().currentTheme; return themeList[name] || themeList.light; }, cardStyle() { return { backgroundColor: this.theme.bgCard, padding: this.theme.spaceBase, borderRadius: this.theme.radiusBase }; }, titleStyle() { return { color: this.theme.textMain, fontSize: this.theme.fontSizeXl }; } } }; /script这套代码搭好之后新增主题只需要在themeList里加一个 key业务页面零改动。4. 验证主题切换与多端生效的完整步骤代码写完不算完得验证。我按 H5、微信小程序、App-vue、App-nvue 四端分别说验证方法。4.1 H5 端验证H5 端最直观因为可以直接打开浏览器开发者工具看 CSS 变量。第一步运行npm run dev:h5打开页面。第二步按 F12 打开开发者工具在 Elements 面板里选中html或head里的style idapp-theme-vars你应该能看到类似这样的内容:root { --colorPrimary: #2979ff; --textMain: #333333; --bgPage: #f5f5f5; --fontSizeBase: 28rpx; --spaceBase: 30rpx; }第三步点击页面上的「深色」按钮观察这个 style 标签的内容是否实时变成了 dark 主题的值。同时页面背景应该立刻变深。第四步刷新页面确认主题是否从 localStorage 恢复。在 Application 面板的 Local Storage 里应该能看到app_theme: dark。4.2 微信小程序验证小程序不能直接操作 document所以走的是uni.$emit通知根组件更新这条路。验证方法第一步运行npm run dev:mp-weixin用微信开发者工具打开。第二步在调试器的 Wxml 面板里选中页面根节点看它的 style 属性里是否挂上了 CSS 变量。如果根节点没有检查你的根组件是否监听了theme-change事件并绑定了动态 style。第三步点击切换按钮观察页面颜色变化。如果颜色变了但字号没变说明字号变量没注入成功检查buildCssVars是否把所有 key 都遍历到了。第四步重点检查基础库版本。在微信开发者工具的「详情」-「本地设置」里把调试基础库调到 2.10.0 以下看 CSS 变量是否失效。如果失效说明你的项目需要提示用户升级微信版本或者在低版本基础库下做降级。4.3 App-vue 验证App-vue 页面支持 CSS 变量验证方式和 H5 类似但要用真机或模拟器。运行npm run dev:app-plus用 HBuilderX 打开到手机模拟器。切换主题观察页面变化。如果 App 打包后样式错乱大概率是 CSS 变量注入时机太晚首屏用了默认值。解决办法是在App.vue的onLaunch里同步注入不要等异步请求。4.4 App-nvue 验证nvue 页面是重点。因为 nvue 不支持 CSS 变量你如果写了var(--bgCard)它不会报错但样式就是不生效页面会是默认的白色背景。验证方法打开 nvue 页面切换主题观察背景色和字号是否变化。如果没变检查这个页面的 style 里是不是还有var(--xxx)。正确的做法是全部改成:stylecardStyle这种 JS 绑定形式。4.5 用 Claude Code 批量验证手动一页页验证太慢可以让 Claude Code 帮你扫。在项目根目录启动 Claude Code输入遍历 src 目录下所有 .vue 和 .nvue 文件检查 1. .vue 文件里是否有写死的 font-size、padding、margin、border-radius、background、color排除 var() 形式 2. .nvue 文件里是否使用了 var(--xxx) 语法 输出文件路径、行号、问题类型。它会给你一份清单你按清单逐个改。这比全局搜索靠谱因为它能区分.vue和.nvue不会把 nvue 里的var()漏掉。5. 主题系统常见报错与多端兼容排查这一节列几个我实际踩过的坑以及对应的报错信息和排查路径。5.1 切换主题后部分页面不生效现象点了切换按钮首页变了但某个弹窗组件还是旧颜色。排查打开那个组件的 vue 文件搜索#和rpx看是不是有写死的色值和尺寸。常见的是background: #fff这种它不跟随主题变量走。修复把#fff改成var(--bgCard)把font-size: 28rpx改成var(--fontSizeBase)。如果组件是第三方 UI 库的比如 uView、uni-ui它们的内部样式可能写死了颜色。这种情况要么用::v-deep覆盖要么在主题配置里额外定义一套映射变量。5.2 nvue 页面报var is not defined或样式完全失效现象nvue 页面白屏或者样式全丢控制台可能没有明显报错但页面就是不对。原因nvue 使用原生渲染不支持 CSS 变量。你写color: var(--textMain)它解析不了直接忽略这条样式。修复把 nvue 页面里所有var(--xxx)删掉改成:style绑定 JS 对象。参考 3.6 节的写法。这个坑最容易在批量改造时出现。让 Claude Code 扫描时一定要明确告诉它「nvue 文件禁止输出 var() 语法」。5.3 小程序报local proxy failed或请求 401这个报错通常出现在你用 Claude Code 或者其它 AI 工具走 API 通道时。401表示 Key 无效或没带上local proxy failed表示本地代理配置有问题。排查步骤第一确认你的 API Key 是否正确复制有没有多余空格。去 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 重新生成一个试试。第二确认 Base URL 填的是https://taotoken.net/api不要多加斜杠或者路径。第三确认 Model ID 填对了。不同工具对模型名的写法可能不一样参考 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里的对照表。第四如果你用的是 Claude Code 的 Anthropic 兼容模式检查配置文件里的base_url和api_key字段名是否正确。有些版本要求写ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY环境变量。5.4 报错reading choices或返回结构解析失败这个报错说明请求发出去了但返回的 JSON 结构和你预期的不一样。常见原因是 Model ID 填错了或者通道返回的是流式格式而你的客户端按非流式解析。排查先用 curl 直接测一下通道是否通curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer 你的Key \ -d { model: 你的ModelID, messages: [{role: user, content: hello}] }如果返回正常说明通道没问题是客户端配置问题。如果返回 401检查 Key。如果返回 404检查 Model ID。5.5 OAuth 相关报错如果你用的是 Claude Code 的 OAuth 登录模式可能会遇到 token 过期或者回调失败。这种情况建议改用 API Key 模式走统一的 Base URL Key Model ID 三件套更稳定。5.6 主题切换后首屏闪烁现象页面打开瞬间是浅色然后闪一下变成深色。原因CSS 变量注入是异步的首屏渲染时变量还没挂上。修复在App.vue的style里写一套默认变量参考 3.4 节让首屏有个兜底。然后在onLaunch里同步读取缓存并注入尽量缩短闪烁时间。如果还是闪可以考虑把主题名写进pages.json的globalStyle里但这样就不支持运行时切换了看你的需求取舍。6. 把主题系统沉淀成团队规范并持续用 AI 维护主题系统搭好只是第一步真正省心的是把它变成团队规范让 AI 帮你守着。规范可以定这么几条所有颜色、字号、padding、margin、border-radius一律读主题变量禁止写死 rpx 或 px。这条是底线破了这条主题系统就形同虚设。.vue页面用 CSS 变量.nvue页面禁止用var()全部走 JS 读取主题对象绑定内联 style。这条是 UniApp 多端差异决定的没有商量余地。新增主题只改theme.js配置对象不改任何业务页面代码。如果发现新增主题需要改业务代码说明有硬编码没清理干净。切换主题只调用统一的toggleTheme函数业务页面不写条件判断。这样切换逻辑只有一处出问题好排查。提交代码前让 Claude Code 扫一遍组件检查是否有硬编码样式。可以把这个扫描做成一个固定提示词每次提交前跑一次。具体操作上你可以在项目根目录放一个CLAUDE.md文件把上面这些规范写进去。Claude Code 启动时会自动读取这个文件作为上下文这样你每次让它改代码它都会遵守这些约束不用反复交代。CLAUDE.md内容示例# UniApp 主题系统开发规范 ## 样式规范 - 所有颜色、字号、padding、margin、border-radius 必须使用 CSS 变量禁止写死数值 - 变量定义在 src/common/theme.js通过 buildCssVars 生成 - .vue 文件使用 var(--xxx) 语法 - .nvue 文件禁止使用 var()必须用 :style 绑定 JS 对象 ## 主题切换 - 只调用 src/common/themeSwitch.js 里的 toggleTheme 函数 - 业务页面不写主题条件判断 ## 新增主题 - 只修改 themeList 对象保持 key 名称一致 - 不改动任何业务页面代码 ## 提交前检查 - 扫描所有 .vue 和 .nvue 文件确认无硬编码样式 - 确认 nvue 文件无 var() 语法有了这个文件Claude Code 每次生成代码都会自动遵守规范。你甚至可以让它定期跑一次全项目扫描把新出现的硬编码样式揪出来。最后说一个实际收益我经手的一个项目主题从 2 套扩到 5 套浅色、深色、大字体、护眼绿、高对比度业务页面改动量为零全部在theme.js里加配置。这就是把视觉原子抽干净之后的效果。前期多花两天搭系统后期每次加主题省一周项目越大越划算。如果你还没配 Claude Code 的通道可以从 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 生成一个 Key按第二节的步骤接上然后让 AI 帮你把现有项目的硬编码样式扫一遍。扫出来的清单可能会让你有点意外但改完之后主题系统就真的弹性了。 UniApp 结合 Claude Code 构建弹性可扩展主题系统：一键换肤、间距字体统一管控实战
1. UniApp 多端主题系统为什么总是改一处崩三端UniApp 主题系统这件事说简单也简单说坑也真能坑到人。它本质上是一套「把颜色、字号、间距、圆角、阴影这些视觉原子抽出来集中管理再在运行时按主题名动态注入到页面」的机制能做什么一句话让换肤、大字体模式、深色模式这些需求从「改十几处代码」变成「改一个配置对象」。适合谁适合正在做中大型 UniApp 项目、被小程序 / H5 / App-vue / App-nvue 四端样式差异折磨过的同学。我见过太多项目的换肤实现是这样的pages/index/index.vue里写死background: #ffffffcomponents/card.vue里写死font-size: 28rpxpages/user/user.vue里又写死padding: 30rpx。等到产品说「加一套深色主题」你打开全局搜索#ffffff出现 87 次28rpx出现 143 次改到一半发现漏了一个弹窗组件上线后用户截图发过来深色模式下有个白块。更麻烦的是字体和间距。很多所谓的「换肤」只换颜色字号边距完全不动。产品要做「老年大字体模式」你只能再写一套large-font的样式覆盖页面里到处if (isLargeFont)判断业务代码和样式逻辑搅在一起可读性直接崩掉。核心矛盾在于视觉原子散落在业务代码里没有单一数据源。颜色是一套字号是一套间距又是一套三套东西各改各的主题数量一多维护成本就线性上涨。解法思路其实很清晰分三层第一层是主题配置层用一个 JS 对象维护多套主题每套主题里包含完整的颜色池、字号池、间距系统、圆角、阴影。这是唯一的数据源。第二层是运行时注入层把 JS 配置转成 CSS 变量全局挂载。页面和组件里只写var(--fontSizeBase)不写具体数值。第三层是状态管理层用全局 store 保存当前主题名切换时重新注入变量并持久化到本地存储。这三层搭好之后新增一套主题只需要在配置对象里加一个 key业务页面一行都不用动。而 Claude Code 这类 AI 编码智能体在这里的价值是帮你批量扫描硬编码样式、生成配置代码、检查多端兼容问题——尤其是 nvue 页面不能用 CSS 变量这种坑人工排查很容易漏让 AI 遍历一遍效率高得多。下面我从配置、注入、切换、验证、排障完整走一遍代码都可以直接复制。2. 用 TaoToken 统一通道接入 Claude Code 做主题代码生成在开始写代码之前先把 AI 辅助这条链路搭好。Claude Code 在终端里跑能直接读写你项目里的文件让它扫描硬编码样式、生成主题配置、批量改造组件比在网页对话框里复制粘贴高效得多。接入的关键是统一 API 通道。TaoToken 提供统一的 Key 和 API 入口Claude Code、Codex 这类工具都可以走同一个通道不用每个工具单独配一套凭证。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。具体操作路径先去控制台创建 API Key地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面生成一个 Key复制保存好。Key 的管理页面在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。然后配置 Claude Code。Claude Code 读取的是环境变量或者配置文件核心三件套是 Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiKey 填你刚生成的那串Model ID 按你实际使用的模型填。如果你用的是 Claude Code 的 Anthropic 兼容模式配置入口参考 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里的说明。配置好之后在项目根目录启动 Claude Code它就能读取你的 UniApp 工程文件了。你可以直接对它说「遍历 src 目录下所有 vue 文件找出所有写死的 font-size、padding、margin、border-radius、background、color输出文件路径和行号。」这一步是后面批量改造的基础。如果你更习惯在对话界面里验证模型输出可以先在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 里试几条提示词确认模型对 UniApp 多端差异的理解到位再放到 Claude Code 里跑批量任务。对于长期做编码和 Agent 任务的场景Coding Plan 会更划算入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它适合这种「反复扫描、反复生成、反复调试」的主题系统搭建过程不用每次单独算额度。有一点要提醒Claude Code 生成代码后一定要自己 review 再提交。尤其是 nvue 页面的改造AI 有时候会惯性写成var(--xxx)而 nvue 根本不支持 CSS 变量这个必须人工确认。后面第五节会专门讲这个报错怎么排查。3. 可复制的主题配置与 CSS 变量注入代码这一节是核心所有代码都可以直接复制到项目里用。目录结构建议这样src/ common/ theme.js # 主题配置 变量生成 store/ theme.js # 主题状态管理 App.vue # 初始化注入 pages/ index/index.vue # 示例页面3.1 主题配置文件 theme.js先定义三套主题light、dark、large-font老年大字体模式。注意字号和间距的 key 名称在三套主题里必须完全一致只改值。// src/common/theme.js export const themeList { light: { // 颜色体系 colorPrimary: #2979ff, colorSuccess: #07c160, colorWarning: #ff9500, colorError: #f53f3f, textMain: #333333, textSecondary: #666666, textPlaceholder: #999999, bgPage: #f5f5f5, bgCard: #ffffff, borderColor: #eeeeee, // 字号系统 fontSizeXs: 22rpx, fontSizeSm: 24rpx, fontSizeBase: 28rpx, fontSizeLg: 32rpx, fontSizeXl: 36rpx, // 间距系统 spaceXs: 10rpx, spaceSm: 20rpx, spaceBase: 30rpx, spaceLg: 40rpx, spaceXl: 60rpx, // 圆角 radiusSm: 8rpx, radiusBase: 12rpx, radiusLg: 20rpx }, dark: { colorPrimary: #4096ff, colorSuccess: #26c97c, colorWarning: #ffa940, colorError: #ff4d4f, textMain: #e5e5e5, textSecondary: #bbbbbb, textPlaceholder: #888888, bgPage: #121212, bgCard: #1e1e1e, borderColor: #333333, fontSizeXs: 22rpx, fontSizeSm: 24rpx, fontSizeBase: 28rpx, fontSizeLg: 32rpx, fontSizeXl: 36rpx, spaceXs: 10rpx, spaceSm: 20rpx, spaceBase: 30rpx, spaceLg: 40rpx, spaceXl: 60rpx, radiusSm: 8rpx, radiusBase: 12rpx, radiusLg: 20rpx }, large-font: { colorPrimary: #2979ff, colorSuccess: #07c160, colorWarning: #ff9500, colorError: #f53f3f, textMain: #333333, textSecondary: #666666, textPlaceholder: #999999, bgPage: #f5f5f5, bgCard: #ffffff, borderColor: #eeeeee, // 字号整体放大 fontSizeXs: 28rpx, fontSizeSm: 32rpx, fontSizeBase: 38rpx, fontSizeLg: 44rpx, fontSizeXl: 50rpx, // 间距整体放大 spaceXs: 16rpx, spaceSm: 28rpx, spaceBase: 40rpx, spaceLg: 56rpx, spaceXl: 80rpx, radiusSm: 8rpx, radiusBase: 12rpx, radiusLg: 20rpx } }; // 生成 CSS 变量字符串 export function buildCssVars(themeName) { const theme themeList[themeName]; if (!theme) return ; let cssText ; Object.keys(theme).forEach(key { cssText --${key}:${theme[key]};; }); return cssText; }3.2 状态管理 store用 Pinia 或 Vuex 都行这里用 Pinia 示例// src/store/theme.js import { defineStore } from pinia; import { buildCssVars } from /common/theme.js; export const useThemeStore defineStore(theme, { state: () ({ currentTheme: light }), actions: { setCurrentTheme(name) { this.currentTheme name; } } });3.3 主题切换工具函数// src/common/themeSwitch.js import { useThemeStore } from /store/theme.js; import { buildCssVars } from /common/theme.js; export function toggleTheme(themeName) { const store useThemeStore(); store.setCurrentTheme(themeName); uni.setStorageSync(app_theme, themeName); const cssVars buildCssVars(themeName); // #ifdef H5 // H5 直接操作 document const styleId app-theme-vars; let styleEl document.getElementById(styleId); if (!styleEl) { styleEl document.createElement(style); styleEl.id styleId; document.head.appendChild(styleEl); } styleEl.innerHTML :root{${cssVars}}; // #endif // #ifndef H5 // 小程序 / App-vue 通过动态 style 挂载到根节点 // 这里用 uni.$emit 通知根组件更新 uni.$emit(theme-change, cssVars); // #endif uni.showToast({ title: 主题切换成功, icon: none }); }3.4 App.vue 初始化!-- src/App.vue -- script import { useThemeStore } from /store/theme.js; import { buildCssVars } from /common/theme.js; export default { onLaunch() { const store useThemeStore(); const saved uni.getStorageSync(app_theme) || light; store.setCurrentTheme(saved); const cssVars buildCssVars(saved); uni.$emit(theme-change, cssVars); } }; /script style /* 全局默认变量防止首屏闪烁 */ page { --colorPrimary: #2979ff; --textMain: #333333; --bgPage: #f5f5f5; --bgCard: #ffffff; --fontSizeBase: 28rpx; --spaceBase: 30rpx; --radiusBase: 12rpx; } /style3.5 页面使用示例!-- src/pages/index/index.vue -- template view classpage view classcard text classtitle主题系统演示/text text classdesc当前主题{{ currentTheme }}/text button clickswitchTheme(light)浅色/button button clickswitchTheme(dark)深色/button button clickswitchTheme(large-font)大字体/button /view /view /template script import { useThemeStore } from /store/theme.js; import { toggleTheme } from /common/themeSwitch.js; export default { computed: { currentTheme() { return useThemeStore().currentTheme; } }, methods: { switchTheme(name) { toggleTheme(name); } } }; /script style .page { background: var(--bgPage); min-height: 100vh; padding: var(--spaceBase); } .card { background: var(--bgCard); color: var(--textMain); font-size: var(--fontSizeBase); padding: var(--spaceBase); margin-bottom: var(--spaceSm); border-radius: var(--radiusBase); border: 1rpx solid var(--borderColor); } .title { font-size: var(--fontSizeXl); color: var(--textMain); } .desc { font-size: var(--fontSizeSm); color: var(--textSecondary); margin-top: var(--spaceSm); } /style3.6 nvue 页面兼容写法nvue 不支持 CSS 变量必须用 JS 读取主题对象绑定内联 style!-- src/pages/nvue-page/nvue-page.nvue -- template view :stylecardStyle text :styletitleStylenvue 页面/text /view /template script import { themeList } from /common/theme.js; import { useThemeStore } from /store/theme.js; export default { computed: { theme() { const name useThemeStore().currentTheme; return themeList[name] || themeList.light; }, cardStyle() { return { backgroundColor: this.theme.bgCard, padding: this.theme.spaceBase, borderRadius: this.theme.radiusBase }; }, titleStyle() { return { color: this.theme.textMain, fontSize: this.theme.fontSizeXl }; } } }; /script这套代码搭好之后新增主题只需要在themeList里加一个 key业务页面零改动。4. 验证主题切换与多端生效的完整步骤代码写完不算完得验证。我按 H5、微信小程序、App-vue、App-nvue 四端分别说验证方法。4.1 H5 端验证H5 端最直观因为可以直接打开浏览器开发者工具看 CSS 变量。第一步运行npm run dev:h5打开页面。第二步按 F12 打开开发者工具在 Elements 面板里选中html或head里的style idapp-theme-vars你应该能看到类似这样的内容:root { --colorPrimary: #2979ff; --textMain: #333333; --bgPage: #f5f5f5; --fontSizeBase: 28rpx; --spaceBase: 30rpx; }第三步点击页面上的「深色」按钮观察这个 style 标签的内容是否实时变成了 dark 主题的值。同时页面背景应该立刻变深。第四步刷新页面确认主题是否从 localStorage 恢复。在 Application 面板的 Local Storage 里应该能看到app_theme: dark。4.2 微信小程序验证小程序不能直接操作 document所以走的是uni.$emit通知根组件更新这条路。验证方法第一步运行npm run dev:mp-weixin用微信开发者工具打开。第二步在调试器的 Wxml 面板里选中页面根节点看它的 style 属性里是否挂上了 CSS 变量。如果根节点没有检查你的根组件是否监听了theme-change事件并绑定了动态 style。第三步点击切换按钮观察页面颜色变化。如果颜色变了但字号没变说明字号变量没注入成功检查buildCssVars是否把所有 key 都遍历到了。第四步重点检查基础库版本。在微信开发者工具的「详情」-「本地设置」里把调试基础库调到 2.10.0 以下看 CSS 变量是否失效。如果失效说明你的项目需要提示用户升级微信版本或者在低版本基础库下做降级。4.3 App-vue 验证App-vue 页面支持 CSS 变量验证方式和 H5 类似但要用真机或模拟器。运行npm run dev:app-plus用 HBuilderX 打开到手机模拟器。切换主题观察页面变化。如果 App 打包后样式错乱大概率是 CSS 变量注入时机太晚首屏用了默认值。解决办法是在App.vue的onLaunch里同步注入不要等异步请求。4.4 App-nvue 验证nvue 页面是重点。因为 nvue 不支持 CSS 变量你如果写了var(--bgCard)它不会报错但样式就是不生效页面会是默认的白色背景。验证方法打开 nvue 页面切换主题观察背景色和字号是否变化。如果没变检查这个页面的 style 里是不是还有var(--xxx)。正确的做法是全部改成:stylecardStyle这种 JS 绑定形式。4.5 用 Claude Code 批量验证手动一页页验证太慢可以让 Claude Code 帮你扫。在项目根目录启动 Claude Code输入遍历 src 目录下所有 .vue 和 .nvue 文件检查 1. .vue 文件里是否有写死的 font-size、padding、margin、border-radius、background、color排除 var() 形式 2. .nvue 文件里是否使用了 var(--xxx) 语法 输出文件路径、行号、问题类型。它会给你一份清单你按清单逐个改。这比全局搜索靠谱因为它能区分.vue和.nvue不会把 nvue 里的var()漏掉。5. 主题系统常见报错与多端兼容排查这一节列几个我实际踩过的坑以及对应的报错信息和排查路径。5.1 切换主题后部分页面不生效现象点了切换按钮首页变了但某个弹窗组件还是旧颜色。排查打开那个组件的 vue 文件搜索#和rpx看是不是有写死的色值和尺寸。常见的是background: #fff这种它不跟随主题变量走。修复把#fff改成var(--bgCard)把font-size: 28rpx改成var(--fontSizeBase)。如果组件是第三方 UI 库的比如 uView、uni-ui它们的内部样式可能写死了颜色。这种情况要么用::v-deep覆盖要么在主题配置里额外定义一套映射变量。5.2 nvue 页面报var is not defined或样式完全失效现象nvue 页面白屏或者样式全丢控制台可能没有明显报错但页面就是不对。原因nvue 使用原生渲染不支持 CSS 变量。你写color: var(--textMain)它解析不了直接忽略这条样式。修复把 nvue 页面里所有var(--xxx)删掉改成:style绑定 JS 对象。参考 3.6 节的写法。这个坑最容易在批量改造时出现。让 Claude Code 扫描时一定要明确告诉它「nvue 文件禁止输出 var() 语法」。5.3 小程序报local proxy failed或请求 401这个报错通常出现在你用 Claude Code 或者其它 AI 工具走 API 通道时。401表示 Key 无效或没带上local proxy failed表示本地代理配置有问题。排查步骤第一确认你的 API Key 是否正确复制有没有多余空格。去 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 重新生成一个试试。第二确认 Base URL 填的是https://taotoken.net/api不要多加斜杠或者路径。第三确认 Model ID 填对了。不同工具对模型名的写法可能不一样参考 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里的对照表。第四如果你用的是 Claude Code 的 Anthropic 兼容模式检查配置文件里的base_url和api_key字段名是否正确。有些版本要求写ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY环境变量。5.4 报错reading choices或返回结构解析失败这个报错说明请求发出去了但返回的 JSON 结构和你预期的不一样。常见原因是 Model ID 填错了或者通道返回的是流式格式而你的客户端按非流式解析。排查先用 curl 直接测一下通道是否通curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer 你的Key \ -d { model: 你的ModelID, messages: [{role: user, content: hello}] }如果返回正常说明通道没问题是客户端配置问题。如果返回 401检查 Key。如果返回 404检查 Model ID。5.5 OAuth 相关报错如果你用的是 Claude Code 的 OAuth 登录模式可能会遇到 token 过期或者回调失败。这种情况建议改用 API Key 模式走统一的 Base URL Key Model ID 三件套更稳定。5.6 主题切换后首屏闪烁现象页面打开瞬间是浅色然后闪一下变成深色。原因CSS 变量注入是异步的首屏渲染时变量还没挂上。修复在App.vue的style里写一套默认变量参考 3.4 节让首屏有个兜底。然后在onLaunch里同步读取缓存并注入尽量缩短闪烁时间。如果还是闪可以考虑把主题名写进pages.json的globalStyle里但这样就不支持运行时切换了看你的需求取舍。6. 把主题系统沉淀成团队规范并持续用 AI 维护主题系统搭好只是第一步真正省心的是把它变成团队规范让 AI 帮你守着。规范可以定这么几条所有颜色、字号、padding、margin、border-radius一律读主题变量禁止写死 rpx 或 px。这条是底线破了这条主题系统就形同虚设。.vue页面用 CSS 变量.nvue页面禁止用var()全部走 JS 读取主题对象绑定内联 style。这条是 UniApp 多端差异决定的没有商量余地。新增主题只改theme.js配置对象不改任何业务页面代码。如果发现新增主题需要改业务代码说明有硬编码没清理干净。切换主题只调用统一的toggleTheme函数业务页面不写条件判断。这样切换逻辑只有一处出问题好排查。提交代码前让 Claude Code 扫一遍组件检查是否有硬编码样式。可以把这个扫描做成一个固定提示词每次提交前跑一次。具体操作上你可以在项目根目录放一个CLAUDE.md文件把上面这些规范写进去。Claude Code 启动时会自动读取这个文件作为上下文这样你每次让它改代码它都会遵守这些约束不用反复交代。CLAUDE.md内容示例# UniApp 主题系统开发规范 ## 样式规范 - 所有颜色、字号、padding、margin、border-radius 必须使用 CSS 变量禁止写死数值 - 变量定义在 src/common/theme.js通过 buildCssVars 生成 - .vue 文件使用 var(--xxx) 语法 - .nvue 文件禁止使用 var()必须用 :style 绑定 JS 对象 ## 主题切换 - 只调用 src/common/themeSwitch.js 里的 toggleTheme 函数 - 业务页面不写主题条件判断 ## 新增主题 - 只修改 themeList 对象保持 key 名称一致 - 不改动任何业务页面代码 ## 提交前检查 - 扫描所有 .vue 和 .nvue 文件确认无硬编码样式 - 确认 nvue 文件无 var() 语法有了这个文件Claude Code 每次生成代码都会自动遵守规范。你甚至可以让它定期跑一次全项目扫描把新出现的硬编码样式揪出来。最后说一个实际收益我经手的一个项目主题从 2 套扩到 5 套浅色、深色、大字体、护眼绿、高对比度业务页面改动量为零全部在theme.js里加配置。这就是把视觉原子抽干净之后的效果。前期多花两天搭系统后期每次加主题省一周项目越大越划算。如果你还没配 Claude Code 的通道可以从 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 生成一个 Key按第二节的步骤接上然后让 AI 帮你把现有项目的硬编码样式扫一遍。扫出来的清单可能会让你有点意外但改完之后主题系统就真的弹性了。