search

phntxx / dashboard

:bar_chart: a nice and simple dashboard / landing page.
MIT License
951 stars 55 forks source link

Add light/dark theme switching #33

Closed thedeany closed 3 years ago

thedeany commented 3 years ago

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! Screen Recording 2021-07-10 at 6 16 48 PM

Let me know if you have any thoughts or concerns with this approach.

phntxx commented 3 years ago

Hi!

First of all: Thank you for your contributions, they are very much appreciated. This feature is awesome! I love this!

Code also looks good to me. Merging.

Kind regards