Make charts 'theme-able' and add a 'dark' theme. #826
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/covidactnow/covid-projections/rfhgk9twn |
| <Switch> | ||
| <Route exact path="/" component={HomePage} /> | ||
| <MuiThemeProvider theme={theme}> | ||
| <ScThemeProvider theme={theme}> |
There was a problem hiding this comment.
This seems to be the recommended way to use a theme with both material-ui and styled-components. 😬
mui/material-ui#10098 (comment)
(note: the rest of this file is unchanged; turn on "Hide whitespace changes" to make the diff much better)
| /** Gets the chart palette based on the current theme. */ | ||
| function palette(props: any) { | ||
| return props.theme.palette.chart; | ||
| } |
There was a problem hiding this comment.
This is the core change. Instead of accessing palette directly, we always access it via props.theme.palette so that it picks up the current theme. The rest of the changes are just changing to use this helper function.
See here for how I override the theme for the share charts.
src/assets/theme/palette.tsx
Outdated
|
|
||
| // TODO(michael): Not loving this complexity. Perhaps we could just always use regionColor? | ||
| regionAnnotationStroke: (isActive: boolean, regionColor: string) => | ||
| isActive ? regionColor : lightGray, |
There was a problem hiding this comment.
The UX mocks for the dark-mode chart always outline (stroke) the region labels with the region color, but the current light-mode charts only use the region color if the region is active, so I had to make this into a function so I could have different logic for the dark charts. 😦
mikelehen
force-pushed
the
mikelehen/chart-themes
branch
from
ae01b8b
to
2d59ae9
Compare
mikelehen
force-pushed
the
mikelehen/chart-themes
branch
from
2d59ae9
to
98fa754
Compare
…nStroke function.
This makes the charts minimally "theme-able" and adds a dark set of colors for them.
To see how this gets used in the chart sharing, see here
And preview: https://covid-projections-git-mikelehen-share-charts.covidactnow.now.sh/internal/share-image/states/wa/chart/0