Support css variables for colors

Feature Proposal

It would be nice to be able to use css variables, so we can keep our styles clean.

For e.g. this css:

:root {
  --main-color: #52006a;
}

Then reference it like this.

export const data = {
  labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
      backgroundColor: 'var(--main-color)',
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => faker.datatype.number({ min: 0, max: 1000 })),
      backgroundColor: 'var(--main-color)',
    },
  ],
};

https://codesandbox.io/s/headless-snow-htvps?file=/App.tsx

Feature Use Case

I’m trying to keep my charts always styled with the correct color. This depends on dark/light style and is a hassle to have in mulitple places in your app. Ideally, there would be one place where we can change the main-color.

Possible Implementation

I’m not sure if there is anything blocking this, most other components seemed happy with the approach above.

[kurkle]

Its really simple to implement externally: https://codepen.io/kurkle/pen/KKpaYwx

Similar to #2077

[kurkle]

Makes sense, I guess that’s partly due to in rendering to canvas and not svg?

That might be true, since SVG is in the DOM (and thus has no other platforms). I’d guess you could disable SSR for chart.js (probably depending on the framework you are using), and get it working that way.