Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Optional CSS custom properties support for color modes #134

Closed
jxnblk opened this issue Jun 28, 2019 · 2 comments · Fixed by #166
Closed

Optional CSS custom properties support for color modes #134

jxnblk opened this issue Jun 28, 2019 · 2 comments · Fixed by #166

Comments

@jxnblk
Copy link
Member

jxnblk commented Jun 28, 2019

Currently the color mode flash prevention only handles foreground and background colors for the <body> element, which means that colors used in other elements will still flash on page load. The styles generated by the ColorMode component could optionally include all values as CSS custom properties, and the ThemeProvider component could map the values used in context to their relevant custom properties instead of raw color values.

This should be an opt-in feature since custom properties are not supported in IE 11.
@souporserious
Copy link
Contributor

I messed around with this a couple of weeks ago here. Landed on adding an includeCSSVariables prop to ThemeProvider that created the CSS properties through Emotion's Global component so it should be SSR friendly.

If you think that's similar to what you're thinking I'd be happy to start a PR and discuss things further :)

@jxnblk
Copy link
Member Author

jxnblk commented Jul 5, 2019

@souporserious Awesome! This isn't too far off from what I was thinking. The current ColorMode component also uses Global (it'd be great if global CSS could generally be avoided though). With theme-ui and color modes, I think it'd make sense for each mode's custom properties were on something like a .theme-ui-color-<MODE> selector so that the render-blocking script used on page load would only need to apply a single classname to the <body> element

If you're down to start a PR, that'd be great!

@souporserious souporserious mentioned this issue Jul 6, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

add support for CSS properties souporserious/theme-ui
2 participants
@souporserious @jxnblk