This repository has been archived by the owner on Mar 1, 2023. It is now read-only.
Add ability for user to view website in dark mode. #63
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/mattpocock/xstate-catalogue/48KUdPCf1VLmBoG8wWAAvvt1KSw7 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds the ability for a user to choose to display the website in dark mode by using the toggle that has been placed in the right hand side of the navigation bar.
This is made possible as tailwind includes a
dark:prefix that can be applied to elements in the html markup once a class ofdarkhas been applied to an outer most element, in this case theLayoutwrapper. This change is then stored in localStorage as a preference so that it is persisted the next time the user visits the website.I also added a couple of components as when displaying mdx pages in dark mode, header tags were not picking up the correct colours and neither was text encapsulated in back-ticks. For some reason, a
codeelement component did not fix the back-ticked examples and I fond the easiest solution was to simply escape each back-tick so that it picked up the styling correctly.You can see the change working below.