启用夜间模式需五步：一、用图表库内置深色主题配置；二、css变量控制容器色调；三、matchmedia监听系统偏好；四、js动态修改svg/canvas样式；五、url或localstorage持久化主题。
如果您在使用交互图表时希望适配暗光环境或减少视觉疲劳，需要为图表启用夜间模式。以下是实现交互图表深色模式切换的具体操作步骤：
一、通过图表库内置主题配置启用夜间模式
多数现代交互图表库（如ECharts、Chart.js、Plotly）提供预设的深色主题，可通过初始化配置直接加载，无需手动重写样式规则。
1、在初始化图表实例前，定义深色主题对象或引用内置主题标识符。
2、将theme参数设置为'dark'或对应深色主题名称（例如ECharts中设置option.theme = 'dark'）。
3、调用setOption方法并传入包含深色配色的option配置项，确保series、axis、label等组件颜色值适配暗背景。
4、若需动态切换，保存浅色与深色两套option配置，在触发切换事件时重新setOption。
二、利用CSS变量控制图表容器全局色调
通过CSS自定义属性统一管理图表UI元素的颜色状态，使图表渲染层响应页面级主题变更，避免侵入图表库内部逻辑。
1、在根元素（:root）中定义--chart-bg、--chart-text、--chart-line等CSS变量，并为夜间模式设定深色值。
2、为图表容器添加class="chart-container"，并在其样式中使用var(--chart-bg)等变量设置背景、文字、边框颜色。
3、监听系统偏好或用户操作触发的theme-change事件，动态切换document.documentElement的data-theme属性为'dark'或'light'。
4、在CSS中使用[data-theme="dark"] .chart-container选择器覆盖变量值，实现无刷新色调更新。
三、监听系统级深色偏好自动适配
借助matchMedia API检测操作系统或浏览器是否启用深色模式，使图表初始加载即匹配用户系统设置，提升无障碍体验。
1、执行const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')获取媒体查询实例。
2、在图表初始化前检查darkModeMediaQuery.matches返回值，为true时启用深色配置。
3、调用darkModeMediaQuery.addEventListener('change', handler)注册监听器，当系统主题变更时触发图表重绘。
4、在handler函数中调用图表实例的dispose()方法释放资源，再以新主题参数重建图表。
四、使用JavaScript运行时动态修改SVG/Canvas绘图样式
针对不支持主题参数的轻量图表库或自研渲染引擎，可直接操作DOM节点或绘图上下文，逐项替换颜色属性以实现夜间模式。
1、遍历图表容器内所有
2、对Canvas图表，在clearRect后调用save()、setFillStyle()、strokeStyle()等方法重置绘图样式，再重绘全部图形。
3、建立颜色映射表，例如{ '#333': '#ccc', '#666': '#999', '#fff': '#333' }，用于批量转换关键色值。
4、将样式替换逻辑封装为applyDarkTheme()函数，在切换按钮点击时执行，并缓存原始颜色供恢复使用。
五、通过URL参数或本地存储持久化主题选择
确保用户选定的夜间模式在页面刷新或跨会话访问时保持生效，避免每次重新配置。
1、用户点击深色模式开关后，将theme=dark写入localStorage.setItem('chartTheme', 'dark')。
2、页面加载时读取localStorage.getItem('chartTheme')，若值为'dark'则跳过系统偏好检测，强制启用深色配置。
3、同时将theme=dark追加至URL查询参数（如?theme=dark），便于分享带主题状态的链接。
4、监听storage事件，在其他标签页修改主题时同步当前图表实例的显示状态，保持多窗口一致性。
