Automattic / Automattic/wpui

How might we theme the background or border colors for charts in the Dashboard example?

Open
#2 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
20
Forks
3
PR merge metrics
No merged PRs in 30d

Description

This is very low priority, I'm sure, but just wanted to capture a thought as I was playing around with the examples. TL;DR the colors used in the charts in the DashboardPreview are not currently themed to use the color scheme: https://github.com/youknowriad/wpui/blob/e19d9b722458a153449996f8a90266aed42ae823/src/examples/DashboardPreview.tsx#L29-L40

On the Dashboard screen we're using [React Chartjs 2](https://react-chartjs-2.js.org/) which uses Chart JS under the hood. When configuring a dataset for a chart we're limited in choosing colors for background and border as they need to be valid hex or rgb values as described in [the Colors docs](https://www.chartjs.org/docs/latest/general/colors.html) for Chart JS. I assume this is because the values are being used to set colors used in a canvas context, and so can't use CSS variables. So here we have charts that don't match the selected color scheme:

Image

I can think of a couple of hacky ways to update it. We could either:

* Pass down theme values as props to the component, or
* Set it somewhere to `getComputedStyle(document.body).getPropertyValue('--wp-admin-theme-color') || '#3858e9',` and make sure to watch (or trigger an update somewhere) when the theme changes

Is there a good way we could set this up as a positive example for others to follow?

I don't think it's in any way urgent to update this, but I mostly wanted to capture the thought here as there could be other cases where we need to think about theming and can't use a CSS variable for some reason (in this case due to a library using canvas instead of CSS).

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.