Add support of dark mode through prefers-color-scheme

[vitaly-zdanevich]

All browsers support such basic accessibility feature.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[kurkle]

The detection is easy, but too slow to do in chart update: window.matchMedia('(prefers-color-scheme: dark)').matches

So I don't think we will be doing it in the core lib.

[kurkle]

Example: https://codepen.io/kurkle/pen/QWGRxyw

[vitaly-zdanevich]

If JavaScript is slow - you can use CSS, for example

@media (prefers-color-scheme: dark) {
    canvas {
        filter: invert(1) hue-rotate(180deg);
    }
}

[abdulrazakshaikh]

For Dark Mode we can achieve using css variable.
Need to add css variable color support in chartjs this will be very helpful.

[ok300]

+1

[sovetski]

Any update on this? Maybe not for prefers-color-scheme but just support dark/light mode?

[aleksander351]

you can also do the following if you don't want to rely on user's system setting:

body.dark {
.price-history-chart canvas {
filter: invert(1) hue-rotate(180deg);
}
}

[kuncevic]

Indeed missing functionality, I think this is related #11386