This was inspired by #22 but I took a different approach, one based on the browser's ability to detect a user's preferred light or dark scheme. It ended up being a log more work than I originally anticipated, and I'm not a TS expert so the typing took some figuring out haha. But here's my implementation of it.
I split the theme in Settings into a light theme and a dark theme so a user can select which of the themes gets set for each scheme. CSS inherently has the prefers-color-scheme media query, but it's not that simple with styled-components. I used (read: shamelessly copied) Cassidy Williams' awesome hook approach as documented here: https://www.netlify.com/blog/2020/12/05/building-a-custom-react-media-query-hook-for-more-responsive-apps/. I ended up using styled-components' ThemeProvider to allow real-time theme switching without a refresh.
Here's a GIF showing the switching!
Let me know if you have any thoughts or concerns with this approach.
This was inspired by #22 but I took a different approach, one based on the browser's ability to detect a user's preferred light or dark scheme. It ended up being a log more work than I originally anticipated, and I'm not a TS expert so the typing took some figuring out haha. But here's my implementation of it.
I split the theme in Settings into a light theme and a dark theme so a user can select which of the themes gets set for each scheme. CSS inherently has the
prefers-color-scheme
media query, but it's not that simple with styled-components. I used (read: shamelessly copied) Cassidy Williams' awesome hook approach as documented here: https://www.netlify.com/blog/2020/12/05/building-a-custom-react-media-query-hook-for-more-responsive-apps/. I ended up using styled-components'ThemeProvider
to allow real-time theme switching without a refresh.Here's a GIF showing the switching!
Let me know if you have any thoughts or concerns with this approach.