search

remix-run / remix-website

322 stars 72 forks source link

Set `color-scheme` to `dark` when dark mode is enabled #241

Closed AMEH64 closed 4 months ago

AMEH64 commented 4 months ago

I updated the tailwind.css file to set color-scheme to dark when dark mode is enabled. This allows elements that do not have dark mode specific styles to fallback to the user-agent styles.

Below you will find a before and after image of the Remix docs loaded in the Brave browser. Focus your attention to the scrollbars, which are the only elements that I found to be impacted by this change.

Before:

image

After:

image

This is the same approach that the Tailwind CSS docs has taken: https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/base.css

Kevin Powell has a great video that goes into more detail: https://www.youtube.com/watch?v=zFFuV_vXNhY

brookslybrand commented 4 months ago

This is really great @AMEH64, thank you for including this! Definitely makes those scrollbars look a lot better, and I'm sure it'll catch some other bad defaults

I went ahead and checked all the other pages, looks like everything looks as expected or better. Thanks again!