答案：自定义图表颜色需结合CSS变量与JavaScript配置，Canvas类图表（如Chart.js）通过JS读取CSS变量设置颜色，SVG/DOM类图表（如D3.js）可直接用CSS类名控制样式，同时可利用CSS滤镜进行视觉微调，提升主题灵活性。
在CSS中自定义图表颜色，通常依赖于你使用的图表库（如 Chart.js、D3.js、ECharts 等）是否支持通过 CSS 变量或类名控制颜色。虽然部分样式可以通过 CSS 覆盖实现，但多数情况下需要结合 JavaScript 配置和 CSS 协同完成。以下是几种常见方式来实现图表颜色的自定义。
使用CSS变量定义主题色
你可以通过定义 CSS 自定义属性（变量）来统一管理图表颜色，然后在 JS 图表配置中读取这些值。
示例：
:root {
--chart-color-primary: #4285f4;
--chart-color-secondary: #34a853;
--chart-color-warning: #fbbc05;
}
在 JavaScript 中获取这些颜色值：
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--chart-color-primary').trim();
然后将 primaryColor 用于图表数据集的颜色配置。
立即学习“前端免费学习笔记（深入）”；
通过类名覆盖默认样式
某些图表库（如 D3.js 或基于 SVG 的图表）会在元素上添加类名，你可以直接用 CSS 修改填充色或描边。
示例：
.bar {
fill: var(--chart-color-primary);
}
.line-path {
stroke: #ff5722;
stroke-width: 2px;
}
这种方式适用于 SVG 或 DOM 元素渲染的图表，对 Canvas 渲染的图表无效（如默认的 Chart.js 使用 canvas，无法被普通 CSS 样式影响）。
Chart.js 结合CSS变量动态设色
Chart.js 默认不响应 CSS 颜色，但你可以通过脚本读取 CSS 变量并应用到配置中，实现“自定义”效果。
示例：
const ctx = document.getElementById('myChart').getContext('2d');
const primary = getComputedStyle(document.body).getPropertyValue('--chart-color-primary');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: '销量',
data: [12, 19, 3],
backgroundColor: primary,
}]
}
});
这样就能让 Chart.js 使用你在 CSS 中定义的主题色。
使用CSS滤镜调整整体色调（简单但有限）
如果不想修改代码，可用 CSS 滤镜轻微调整图表外观，比如改变颜色倾向。
#myChart {
filter: hue-rotate(60deg) saturate(1.2);
}
这种方法适合快速调色，但不够精确，仅作为视觉微调手段。
基本上就这些方法。核心是：Canvas 图表需通过 JS 读取 CSS 变量设色，SVG/DOM 类图表可直接用 CSS 控制颜色。合理使用 CSS 变量能提升主题切换的灵活性。
