Implement emotion & chakra #7179
Conversation
github-actions
bot
added
content 🖋️
Gatsby Cloud Build Reportethereum-org-website-dev 🎉 Your build was successful! See the Deploy preview here. Build Details🕐 Build time: 13m |
pettinarip
requested review from
samajammin,
wackerow,
corwintines,
minimalsm and
jmcook1186
as code owners
|
Looks great overall @pettinarip! Noticed a few small styling issues:
Spacing of content on docs pages looks off: Same with tutorials: Same with static templates: Most product pages look great but there's some slight differences in spacing / header font size on some pages:
|
|
Styling changes here look to be fixed in this PR: #7195 |
| // set isDarkTheme based on browser/app user preferences | ||
| useEffect(() => { | ||
| if (localStorage && localStorage.getItem("dark-theme") !== null) { | ||
| setIsDarkTheme(localStorage.getItem("dark-theme") === "true") | ||
| } else { | ||
| setIsDarkTheme(window.matchMedia("(prefers-color-scheme: dark)").matches) | ||
| } | ||
| }, []) | ||
|
|
There was a problem hiding this comment.
@pettinarip So am I correct the users browser preference will still be accounted for here?
There was a problem hiding this comment.
Yes, we are using this flag useSystemColorMode for that. More on this here: https://chakra-ui.com/docs/styled-system/color-mode#updating-the-theme-config
|
Exciting! 😄 |
Description
The first step towards adopting Chakra UI is to migrate from
styled-componentstoemotion.UPDATE: chakra PR was merged #7195 now this PR includes chakra + emotion setup.
Related Issue
Epic #6374
Fixes #7054