WIP: Adds dark mode support to web docs

justin-schroeder / arrow-js

Reactivity without the framework

https://arrow-js.com

MIT License

2.32k stars 50 forks source link

WIP: Adds dark mode support to web docs #55

Closed eniolajayi closed 1 year ago

eniolajayi commented 1 year ago

This adds dark mode to the documentation based on user request. I tried my best not to deviate too much from the existing color palette.

[x] Add new dark mode color variants.
[x] Add semantic names based on how the color is used.
[x] Load a dark or light theme based on system preferences.
[x] Add dark theme for code blocks.
[ ] Allow the user to manually choose their preference using a toggle.
[ ] Maintain the user's preferred theme on page reloads using local storage.
[ ] All colors have good contrast ratio and meet a11y guidelines.

@justin-schroeder Any feedback on the colors, naming convention or approach is much appreciated.

Resolves issue #6

vercel[bot] commented 1 year ago

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

Name	Status	Preview	Comments	Updated
arrow-js	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 11, 2023 at 0:17AM (UTC)

eniolajayi commented 1 year ago

@justin-schroeder all that's left is the toggle and the logo.

For the logo if a "white on black" version isn't available. We can try to flip the colors with CSS.
I'm thinking of putting the toggle button next to the GitHub stars badge. What do you think?

Bellisario commented 1 year ago

@eniolajayi, just watching this pull and wanted to give a feedback:

To match the dark theme would be great to have also the GitHub badge matching the color. For example, I got a good result by adding this CSS to the badge list item <li>:

.stars-example-selector-when-dark {
    filter: invert(0.9);
}

Not sure if that's the best way to do this because the library used seems to have also a "native" dark mode support (opt-in) but for what I found this could be another thing to setup manually with JS element property change, which is not ideal.

eniolajayi commented 1 year ago

@Bellisario You're right! The GitHub badge should match the current theme. Our options are, like you've pointed out:

Slap filter: invert() on both the badge and logo. Put a toggle next to the badge and call it a day.
Or use some sort of tool to get a good logo for dark theme and just add the data-color-scheme="dark" attribute to the badge in JS. I prefer the second option. What do you think?

Also the badge is causing the page to overflow on mobile viewports.

andrew-boyd commented 1 year ago

@eniolajayi Thanks for your work on this! I'm working up a homepage for ArrowJS in #57 and will be including this within that PR — I'll finish rounding out issues like the logo. Excellent work. ❤️

Bellisario commented 1 year ago

@Bellisario You're right! The GitHub badge should match the current theme. Our options are, like you've pointed out:

Slap filter: invert() on both the badge and logo. Put a toggle next to the badge and call it a day.

Or use some sort of tool to get a good logo for dark theme and just add the data-color-scheme="dark" attribute to the badge in JS. I prefer the second option. What do you think?

Also the badge is causing the page to overflow on mobile viewports.

Yes, the second option seems the best!