Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode for users with dark mode system preference #266

Open
wants to merge 15 commits into
base: main
Choose a base branch
from

Conversation

tvanantwerp
Copy link

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.

atproto-1

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.

  • The 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!
  • Created a bg-default class that replaces bg-white in most cases. Defined in global.css, it just uses the Tailwind @apply directive to write bg-white dark:bg-black.
  • Images on the overview page had rounded corners created not with border-radius, but by including rounding in the original jpg. These corners were still white in dark mode. To fix, I added a CSS selector with border-radius: 8px that targets images with #rounded at the end of their src and added #rounded to the corresponding URLs. I did not have the patience to recreate all of these images as SVG.
  • I had to make up new background colors for admonition components. For the corner icons, I had to duplicate the inlined SVG data URIs and manually change the fill from currentColor (which does nothing when inlined this way) to either black or white 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.
  • The search component doesn't take any props to change styling. It only switches to its included dark mode when data-theme="dark" is present in a parent. So the _app.js had a new useEffect 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.

atproto-2
atproto-3
atproto-4

DocSearch's dark mode can only be enabled by setting [data-theme="dark"] on a parent element.
Images have corners rounded with opaque white pixels in the jpg rather than via CSS, so the white corners stand out in dark mode. This commit uses a selector style to give them CSS border-radius to fix that.

These images might be better as SVG, but I don't have the originals nor the patience to re-create them.
This is gross, but `currentColor` doesn't do anything when the SVG is inlined into the CSS with a data URI. This is the simplest, quickest solution.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant