Add dark mode for users with dark mode system preference #266
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 a basic dark mode to
atproto-website
that follows the user's system preferences only. This PR does not include a toggle to switch between light and dark.In most cases, all that was require was adding
dark:bg-roughly-inverted-color
alongside existing Tailwind classes. Preference was given to pure white and black, which matches Bluesky's dark mode. But some other changes were required in a few edge cases.logo.jpg
had an opaque white background. To make it work with dark mode, I recreated it as an SVG file. I didn't know the exact font used, but Helvetica Neue Bold was close enough and I manually adjusted the characters to match. Not ideal, as the SVG is very messy compared to if I'd known the font, but it works. Bonus: no more pixel interpolation!bg-default
class that replacesbg-white
in most cases. Defined inglobal.css
, it just uses the Tailwind@apply
directive to writebg-white dark:bg-black
.border-radius
, but by including rounding in the originaljpg
. These corners were still white in dark mode. To fix, I added a CSS selector withborder-radius: 8px
that targets images with#rounded
at the end of theirsrc
and added#rounded
to the corresponding URLs. I did not have the patience to recreate all of these images as SVG.currentColor
(which does nothing when inlined this way) to eitherblack
orwhite
depending on color scheme. It's kinda gross to see the SVGs duplicated like that, but it was the simplest solution given the existing design.data-theme="dark"
is present in a parent. So the_app.js
had a newuseEffect
that sets this attribute immediately on page load to equal the user's system preference. If a toggle to switch modes were desirable in the future, this would be a good start on implementing it.