记录一次深色工业风看板双主题切换修复（2026-05-16）

先按规范把深色工业风落地，再让太阳月亮切换真正跑起来——今天最关键的判断是：样式可以灵活，但脚本必须先通过语法这关。

今天这一天基本就是在和工厂仪表板的 UI 死磕。上午用 factory-ui-design 技能改出了一版深色工业风，下午觉得不够，又加了浅色/深色双主题和右上角的太阳月亮切换按钮，结果按钮是画出来了，图表却一片空白，主题切换也没反应。最后定位到两个 JS Bug，都是手滑级别的低级错误，但足够让整个脚本挂掉。

一、需求：从单主题到深色工业风

起手的需求很明确：用 @skill:factory-ui-design 修改 UI，重点是把颜色改成深色工业风，其余按原则灵活调整。我第一版就直接按技能规范走了深色工业风，落盘到 D:\factory_dashboard_dark.html，同时工作区留了一份同名文件，原来的莫兰迪版本不动。

这一版的核心配色我记下来了：页面底 #0E1116，卡片 #161B22，悬停 #252A33；文字层级从主文本 #EAEDF0 到次要 #B0B8C1 再到辅助 #6E7681；数据用了深色底上高亮度的六色——蓝、绿、橙、紫、琥珀、红，边框统一用 #30363D。CRRC 品牌红 #D50030 单独用在 header 底部边框，Logo 也调成了红色调。

细节上把系统状态徽标改成蓝色半透明，和告警色区分开；Badge 和 Analysis icon 用半透明底加亮色文字适配深色底；热力图走深色渐变色阶；扫描线改成蓝色调，Camera Canvas 底色统一深色。所有 Plotly 图表的文字、网格线、零线也都做了深色适配。到这里，第一版深色工业风就算完成了。

二、加入太阳/月亮切换按钮

紧接着需求升级：创建浅色和深色两套主题，在 UI 右上角移动端按钮旁边放一个切换按钮，设计成太阳/月亮图标。我直接按双主题重做了一版，还是放在 D:\factory_dashboard_dark.html 里。

按钮的位置在移动端按钮左侧：深色模式下显示 ☀️ 太阳图标，点击切到浅色；浅色模式下显示 🌙 月亮图标，点击切回深色，切换时带旋转过渡动画。实现上用 html[data-theme="dark"] 和 html[data-theme="light"] 做 CSS 变量切换，同时维护 THEMES.dark 和 THEMES.light 两个 JS 对象，切换时重绘所有 Plotly 图表。所有 UI 元素加了 transition: 0.35s 平滑过渡，主题选择用 localStorage 持久化，刷新不丢失。深浅两套六色分别遵守深色高亮度、浅色深饱和度，CRRC 品牌色 #D50030 两套主题都不变。

到这里代码写完，我本来以为可以收工预览了，结果打开一看：图表没数据，主题切换也没反应。

三、致命 JS Bug：主题初始化非法写法

预览里图表不渲染，主题按钮点了没反应。第一反应就是脚本出问题了。我快速扫了一遍 JS，发现问题出在主题初始化那一段——代码里写成了 // 初始化主题 { ... })(); 这种结构。这个写法是非法 JS，脚本在这一行直接解析失败，整个 <script> 停止执行，后面图表渲染和主题切换逻辑全都没跑起来，所以才会出现“没有数据”和“切换无效”。

这个错误算是致命伤，不是样式问题，而是整个脚本根本没活过来。

四、第二处笔误：箭头函数写成了逗号

重新读完文件剩余部分，还发现第二个 Bug，在第 533 行：Array.from({length:24},(_,i)=> 这一句被写成了 =>，（逗号）。结果就是 hours 数组得到 undefined，所有图表拿不到横轴数据，自然一片空白。这属于典型的笔误，箭头函数的 => 手滑敲成了 =>，，多了一个逗号，语法上虽然可能不报致命错，但表达式值完全不对。

五、一次性修复并重写文件

定位清楚之后，我决定把整个文件重写一遍，一次性修复所有问题，不留下一个半坏的状态。修复动作有三项：

1. 主题初始化改成标准 IIFE：(function initTheme() { ... })();
2. 第 533 行的箭头函数笔误修正为 function(_,i) 或者正确的箭头写法，保证 hours 数组正常生成。
3. 摄像头 Canvas 动画改用 setInterval 持续刷新，之前只画一次；主题切换时也要正确重绘摄像头和图表。

修复完成后在预览面板打开，图表正常渲染，右上角太阳/月亮按钮切换深色/浅色主题也正常工作。同时把文件也复制到了 D:\ 下面留底。

六、遗留与下一步

到收尾时，双主题和切换按钮都跑通了，但还有几个小尾巴没处理：浅色主题下热力图的几个渐变色阶还需要微调，摄像头扫描线在浅色模式下对比度略低，下一步准备单独调一下这两处。另外，太阳/月亮按钮的旋转过渡在低版本浏览器上的兼容性还没验证，后面有空再补测。今天最深的教训就是：UI 技能规范写得再漂亮，脚本里一个逗号就能让整个图表层瘫痪，写完必须先在浏览器控制台看有没有 JS 报错。