我正在生成一个包含Chart.js图表的HTML文件。当我将系统颜色方案从浅色更改为深色（或相反）时，尽管其他颜色也会更改，但X和Y轴的字体颜色不会更改。但是，无论系统颜色是浅色还是深色，每种颜色都应在刷新页面时保持应有的状态。
我仅在Safari 12.1中对此进行测试，因为它是目前唯一支持非Beta版prefers-color-scheme媒体查询的浏览器。
这是我正在使用的<script>元素的内容：
const white = 'hsl(42, 0%, 90%)';
const black = 'hsl(42, 0%, 10%)';
const perfectPrimaryLight = 'hsl(270, 50%, 40%)';
const perfectSecondaryLight = 'hsla(270, 50%, 40%, .2)';
const myPrimaryLight = 'hsl(0, 50%, 40%)';
const mySecondaryLight = 'hsla(0, 50%, 40%, .2)';
const perfectPrimaryDark = 'hsl(340, 50%, 80%)';
const perfectSecondaryDark = 'hsla(340, 50%, 80%, .2)';
const myPrimaryDark = 'hsl(0, 50%, 80%)';
const mySecondaryDark = 'hsla(0, 50%, 80%, .2)';
Chart.defaults.global.defaultFontFamily = 'system-ui, sans-serif';
Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = black;
function updateToLight(chart) {
console.log("Updating to light…")
chart.options.legend.labels.fontColor = black;
console.log("before changing axes to black (for a light background):", chart.options.scales.yAxes)
chart.options.scales.yAxes[0].ticks.fontColor = black;
chart.options.scales.xAxes[0].ticks.fontColor = black;
console.log("after changing axes to black (for a light background):", chart.options.scales.yAxes)
chart.data.datasets[0].borderColor = perfectPrimaryLight;
chart.data.datasets[0].backgroundColor = perfectSecondaryLight;
chart.data.datasets[1].borderColor = myPrimaryLight;
chart.data.datasets[1].backgroundColor = mySecondaryLight;
chart.update();
}
function updateToDark(chart) {
console.log('Updating to dark…')
chart.options.legend.labels.fontColor = white;
console.log("before changing axes to white (for a dark background):", chart.options.scales.yAxes)
chart.options.scales.yAxes[0].ticks.fontColor = white;
chart.options.scales.xAxes[0].ticks.fontColor = white;
console.log("after changing axes to white (for a dark background):", chart.options.scales.yAxes)
chart.data.datasets[0].borderColor = perfectPrimaryDark;
chart.data.datasets[0].backgroundColor = perfectSecondaryDark;
chart.data.datasets[1].borderColor = myPrimaryDark;
chart.data.datasets[1].backgroundColor = mySecondaryDark;
chart.update();
}
const ctx = document.getElementById('myChart').getContext('2d');
const data = {
datasets: [{
label: 'Perfect-calibration dataset',
data: [{"x":0.01,"y":0.01},{"x":0.05,"y":0.05},{"x":0.10,"y":0.10},{"x":0.15,"y":0.15},{"x":0.20,"y":0.20},{"x":0.25,"y":0.25},{"x":0.30,"y":0.30},{"x":0.35,"y":0.35},{"x":0.40,"y":0.40},{"x":0.45,"y":0.45},{"x":0.50,"y":0.50},{"x":0.55,"y":0.55},{"x":0.60,"y":0.60},{"x":0.65,"y":0.65},{"x":0.70,"y":0.70},{"x":0.75,"y":0.75},{"x":0.80,"y":0.80},{"x":0.85,"y":0.85},{"x":0.90,"y":0.90},{"x":0.95,"y":0.95},{"x":0.99,"y":0.99}],
}, {
label: 'My predictions',
data: [{"x":0.10,"y":0.00},{"x":0.50,"y":0.25},{"x":0.60,"y":0.00},{"x":0.70,"y":0.62},{"x":0.80,"y":0.25},{"x":0.90,"y":0.68},{"x":0.95,"y":0.83}]
}]
};
const options = {
title: {
display: false,
text: 'A Chart.js Scatter Chart'
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 1
}
}],
xAxes: [{
ticks: {
min: 0,
max: 1
}
}]
}
}
const c = new Chart(ctx, {
type: 'scatter',
data: data,
options: options
});
const query = window.matchMedia("(prefers-color-scheme: dark)");
function handlePrefersDarkChange(eventOrQueryList) {
console.log("eventOrQueryList is:", eventOrQueryList);
if (eventOrQueryList.matches) {
updateToDark(c);
} else {
updateToLight(c);
}
}
query.addListener(handlePrefersDarkChange)
handlePrefersDarkChange(query);
以下是实际操作的方法：
现在，要反向查看所有这些内容。当系统设置为暗模式时，让我们重新加载页面。请注意，轴标签颜色现在为白色。
有什么主意，为什么chart.options.scales.yAxes[0].ticks.fontColor不变，而其他属性不变？