必须从设计阶段启用变量系统并绑定主题逻辑，否则导出的React代码无CSS变量切换机制或useTheme hooks；需创建ThemeColors变量组并为bg-primary等4个变量设双模式值，全量UI组件样式须绑定变量，配置开关并预览验证，最后导出时勾选主题逻辑选项。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在墨刀AI中生成支持暗黑模式的代码，必须从设计阶段就启用变量系统并绑定主题逻辑，否则导出的React代码里不会包含CSS变量切换机制或useTheme等 hooks 调用。
创建带暗黑模式变量的设计项目
打开墨刀设计 → 新建项目 → 选择「空白画布」或「移动端APP模板」→ 进入编辑界面后，点击左侧边栏底部「变量」图标，新建一个「颜色变量组」命名为「ThemeColors」。
在该组下添加至少4个关键变量：【bg-primary】、【text-primary】、【border-normal】、【brand-accent】，每个变量都分别定义「浅色模式值」和「深色模式值」。比如 bg-primary 浅色填 #ffffff，深色填 #121212。
这一步不能跳过——如果只设单值，后续导出的代码将无法响应系统偏好或手动切换，所有样式都会固化为一个状态。
用变量重写全部UI组件样式
选中首页的导航栏 → 在右侧属性面板中，把背景色、文字色、图标色全部从具体色值（如#333333）改为绑定到刚才创建的 ThemeColors 变量。
方法一：点击颜色拾取器右侧的「绑定变量」小链子图标 → 选择对应变量项；方法二：直接在颜色输入框里输入变量名，如 var(--bg-primary) —— 墨刀会自动识别并高亮为绑定状态。
注意：按钮、卡片、输入框、列表项等所有可交互/视觉显著的组件，必须逐个绑定。漏掉任何一个，暗黑模式切换时就会出现局部错色或对比度崩塌。
配置模式切换开关并预览效果
第一步：在画布右上角点击「预览」→ 开启「设备模拟」→ 点击右上角「模式」按钮，手动切换「浅色 / 深色」，确认所有绑定组件实时变色。
第二步：回到编辑态 → 在任意页面拖入一个「开关组件」→ 右键 → 「设置交互」→ 添加「点击时」动作 → 选择「切换主题模式」→ 保存。
第三步：再次预览 → 点击开关，验证是否全局同步响应。这一步是硬性校验点，不通过说明有组件未绑定变量或变量组命名不一致。
导出含暗黑模式逻辑的React工程代码
点击顶部菜单「文件」→ 「导出」→ 选择「React（Vite + TypeScript）」→ 勾选「包含主题切换逻辑」和「生成useTheme自定义Hook」→ 点击「开始导出」。
导出包解压后，你会看到 src/hooks/useTheme.ts 已存在，App.css 中定义了 :root 和 .dark 两套 CSS 变量作用域，main.tsx 已注入 themeProvider 包裹根组件。这些不是注释或占位符，是真实可运行的工程化实现。
运行 npm run dev 启动本地服务，访问 http://localhost:5173，浏览器开发者工具里修改 document.documentElement.classList.add('dark')，页面立刻响应——证明导出代码已具备生产级暗黑模式支持能力。
