How might we theme the background or border colors for charts in the Dashboard example?
- 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:
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.