Feature Request: Night Mode
#134
ghost...
For further actions, you may consider blocking this person and/or reporting abuse
For further actions, you may consider blocking this person and/or reporting abuse
Worth noting that this is super early.
I definitely think the night mode should be a little less severe, and generally not affect user-generated images.
If anyone wants to give the CSS some edits to get us closer to the dark blue that sites like Twitter have in night mode, feel free to hack away at it a bit. 🙂
I've started a couple of pull requests to move styles over to CSS variables so a custom theme can be imported per user (if they wanted to go that far).
So far I've only added
--theme-backgroundand--theme-top-bar-background, appending this CSS to the end of the current CSS will simulate the affect, though who knows my pull request might have been merged by now.Then you can change the values of the variables by adding them to
:rootWorking out which styles to group together under one name is the hard part but if we get this out there theming the whole site will suddenly be very easy.
This is great! For one, it does not cause any issues with the server-side caching (as mentioned by Ben here) because the variables are computed client-side. The use of custom properties is also much more maintainable, which is good. 👍
The only problem we face with using CSS Custom Properties is the fact that not all browsers fully support it. As of writing this comment, Can I Use estimates that only 87.6% of global users support this feature. Frankly, it's good enough in my opinion, but I think the dev.to team wants to support as much browsers as possible.
I do agree with keeping it working for as many people as possible but that being said 87% is pretty much everyone and I imagine people that use this site are more likely to have more modern browsers.
@ben anything to add?
Really should not just inverse the graphics. Firefox on iOS does this and its the "wrong take" on night (dark) mode.
I will take a look at during Xmas holidays to see if I can help out.
the approach was to settle on inverting the root element and then inverting select tags/classes in order to remove the negative effect. In particular, I am hearing a dislike for the grayscaling of the graphics so I will remove that soon.
I think the most usable state in the end is not-negative/grayscale user-generated images, and make the general color scheme dark blue instead of black (however that gets done).
I'll start giving some thoughts into how the setting is applied across different platforms so that this is usable by more folks.
I agree. Twitters mobile app 'dark mode' is definitely the model that should be looked at..
I recently stumbled upon docker night mode. Aesthetically looks soothing, implemented in a slight (I guess) way...
That's a interesting approach and makes sense. Maybe just needs more work on it..
Seems like less of a night mode, and just inverting the colors. :(
Here's the start of my attempt
gist.github.com/nektro/647915e7907...
Wow! This actually looks pretty interesting. I like the grayness of it.
This is useful on mobile PWA where chrome extension doesn't work. But if you are on the desktop there is a very good extension out there which will convert most of your website into a dark mode
Dark Reader
chrome.google.com/webstore/detail/...
I whipped up a quick Chrome extension for anyone who wants to autoload dark mode for now. Just clone and load the unpacked extension.
A small Chrome Extension to activate the Darkmode Beta on dev.to.
Dev.to Auto Darkmode
A small Chrome Extension to activate the Darkmode Beta on dev.to.