chart.js - 在chart.js中使用CSS变量(颜色)- "var(--primaryColor)"无法正常工作

Question

我有一个网络应用程序项目，该项目使用两个样式表来定义两个颜色集(白天和黑夜模式)。每个样式表都定义了具有不同颜色的相同CSS变量(例如，在DayMode.css中为“--primaryColor:'white'”，在nightMode.css中为“--primaryColor:'black'”。单击按钮时会切换样式表。

现在，所有元素都通过引用这些变量来着色-在CSS和JS代码中。例如:

div {background-color: var(--primaryColor);}

$(this).css({backgroundColor: "var(--primaryColor)"});

切换样式表时， 所有元素都将调整为新的定义。现在，我设置了我的第一个Chart.js，并尝试使用变量为它着色，例如:

yAxes: [{
    ticks: {
        fontColor: "var(--primaryTextColor)"
    }
}]

但是那个 不起作用。任何想法如何解决这个问题？提前致谢!

Answer 1

CSS变量用于样式表中，如果您要在JS中访问它们，则可以像下面的代码片段所示进行操作:

var style = getComputedStyle(document.body);
var primCol = style.getPropertyValue('--primaryColor');
$("#mydiv").text("primaryColor: " + primCol);

:root {
  --primaryColor: #336699;
}

#mydiv {
  background-color: var(--primaryColor);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">

</div>

因此，在chart.js中:

var style = getComputedStyle(document.body);
var primCol = style.getPropertyValue('--primaryColor');
var chartCol = style.getPropertyValue('--chartColor');

var chartData = {
  labels: ['a', 'b', 'c', 'd'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(219, 20, 0, 0.2)',
    borderColor: chartCol,
    data: [30, 50, 25, 10]
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
  	legend: { display: false },
    scales: {    
      yAxes: [{
        ticks: {
          fontColor: primCol,
        }
      }],
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
    }
  }
});

:root {
  --primaryColor: #00ff00;
  --chartColor: #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>