Adds a theme toggle component

[soupaJ]

Description

Adds a theme toggle component to the header. The logic works like:

1. Check if localstorage has a preference set.
2. Check the system preference.
3. If localstorage and system preference are the same, delete localstorage value. This assumes that if the user had a localstorage value, but it now matches the system preference, the user must have changed their system preference or Gistdoc preference at some point.
4. When applying the color scheme preference, prefer localstorage value over system preference. This assumes the user changed their preference for Gistdoc specifically.

• Upgrades tailwind to be able to use arbitrary variants

Screenshots

Light mode:

Dark mode:

Condensed header, dark mode:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
gistdoc	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 2:13AM (UTC)

[jkulton]

This looks nice. *chefs kiss*

[soupaJ]

@jkulton I made changes to address the PR feedback. I've converted it to use tailwind instead of css modules since that's the way we're currently styling all things. It now check if the user prefers reduced motion and, if so, turns off the transitions and animations.

[jkulton]

Thanks for the accessibility-mindedness, this looks great! 🙇 Just one small suggestion.