Add dark mode toggle #296
Add dark mode toggle #296
Conversation
This will init with user‘s system darkmode, then change according to the checkbox state. Store the preference in the local storage.
Use CSS to toggle dark mode. The checkbox is the first child of body, so we can use sibling selector `~` and scss ampersand selector `&` to target specific child elements. Wrap content in main container to work with home and object page. Extract hardcoded color control utility classes into css, and apply correspondent dark mode css.
|
Is this to make up for lack of browser support? |
Originally from https://twitter.com/arefiev/status/1227902424888881155, then became #290. Browser support is at 78%. I think this Pull Request is to give people an option to opt-in / opt-out. Some examples: People may not know how to turn on dark mode. |
|
Do other websites with dark mode have a toggle like this? |
Twitter, website:
In mobile there was simple toggle:
Then like Moon:
Now it's like bulb (with or without light):
What else… GitHub has no dark theme, GitLab too, Twitch!
YouTube (only in Premium, as I know):
|
|
TBH, I thinks it's better to place monochrome icon alongside GitHub icon, Ruby version drop-down, etc. I know, this approach is quirky by using
|
|
apologies for not leaving a review yet, this week has just been super busy. I'll try and get time to look at this in the next few days. |
There was a problem hiding this comment.
Hey @JuanitoFatas! Apologies for taking so long to review the PR 😞. I think this is a great first step and have some feedback:
-
I agree with @AlexWayfer's comment about adding an icon along side the Github/Version selector buttons. I think it would look a lot cleaner and consistent. But this may not all fit neatly on mobile devices, so we may need to look into adding a sidebar that the user can toggle to fit everything. Would you like to pair on adding that?
-
I would like to avoid writing as much CSS as possible, could we leverage tailwindcss libraries https://github.com/hawezo/tailwindcss-theming to provide theme capabilities that can be toggled?
Let me know if you have any questions or if you would like to sit down and pair on this together.
Thank you for your work! 👏
|
I want this feature too, so I can try to help with this PR, if you wish, @JuanitoFatas. 🙌 |
|
Thanks for the suggestions! I‘ll take another stab this weekend. |
|
closing this in favor of #323. |
Summary
This Pull Request adds a dark mode switcher in the center of page top. The switcher defaults to user‘s system setting. Once toggled will store preference in the
Window.localStorage.The switcher (a checkbox) is added next to the body so we can use sibling
~and scss ampersand selectors to target specific elements. A.main-containeralso added in order to apply styles on home page and other pages.Implements #290.
Screenshots
Videos
Review
Checkout this branch. Start the server. Browse through pages, search something, hover on elements. See if anything looks inconsistent with https://rubyapi.org/. Click dark mode toggle, Browse through pages, search something, hover on elements. See if anything looks inconsistent with dark mode on https://rubyapi.org.
Downside
1remspace on top.