首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >供应链控制塔 | 暗黑模式与主题系统:CSS-in-JS + Design Token 实践

供应链控制塔 | 暗黑模式与主题系统:CSS-in-JS + Design Token 实践

作者头像
叶一一
发布于 2026-09-25 21:04:49
发布于 2026-09-25 21:04:49
1750
举报
概述
供应链控制塔通常 24 小时运转在指挥中心的物理大屏上。一个设计良好的 暗黑模式(Dark Mode) 不仅能 降低长时间盯屏的视觉疲劳、减少 OLED 烧屏风险,更能通过 高对比度的数据配色 让关键告警"跳出来"。然而,直接在组件里写 color: #fff 与媒体查询切换,只会让样式迅速失控。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

目录
  • 引言
  • 1. 为什么需要主题系统
  • 2. Design Tokens:主题系统的单一事实源
  • 3. CSS-in-JS:styled-components 主题注入
    • 3.1 全局主题 Provider
    • 3.2 业务组件消费主题
    • 3.3 CSS 变量降级方案
  • 4. Ant Design 动态换肤
  • 5. 图表主题联动:ECharts / G6 / Mapbox 同步
    • 5.1 ECharts 主题注册
    • 5.2 主题桥接:一处修改、全局响应
  • 6. 暗黑模式三态切换与无障碍
    • 6.1 暗色感知配色无障碍
    • 结语
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档