loading...
Cover image for Previewing dev.to's Upcoming Night Mode

Previewing dev.to's Upcoming Night Mode

somedood profile image Basti Ortiz (Some Dood) ・2 min read

Feature Request: Night Mode #134

ghost avatar
ghost posted on

Feature Request

It would be awesome if there was a "night mode" which would switch the site's colors to a darker version which would look better under some conditions.

Night Mode has been a long requested feature of the site. For people like me, dark themes are better than light themes because they put less strain on the eyes, especially in dark environments (thus its name). It also makes me look hip and edgy. The implementation of a Night Mode has been in the backlog for quite some time now until last month when @rkichenama submitted a pull request to finally get the ball rolling. Since then, he has been working closely with the dev.to team to refine the CSS styles of the upcoming Night Mode.

Unfortunately, the CSS styles have not been finalized yet. It is continually being worked on by the contributors. (Shout out to @rkichenama!) At its current state, most of the styles are simply inverted colors of the original styles. Profile pictures are also gray-scaled. But it's a start nonetheless! Something is better than nothing. I am grateful for the efforts being made on this feature. (Shout out to @rkichenama again!)

However, that doesn't mean we can't test it right now. Yup, you heard me right. We can test a "beta" version of the Night Mode right here, right now. And it isn't too difficult to activate, too! πŸŽ‰

How do I activate Night Mode?

As of writing this article, there is no way to activate Night Mode through the settings. The only way to test it is by manually altering the class of the <body> tag with the DevTools.

There are many ways to do this. You can use the Elements panel of the DevTools to manually add the night-theme class to the <body> tag.

You can also use the Console panel of the DevTools to programmatically add the night-theme class to the <body> tag with JavaScript. Personally, I prefer this way because it's literally one line of code you have to enter into the console.

document.body.className = 'night-theme';

To exit Night Mode, simply reload the page.

Voila! It may be startling at first, but at least we can test it now. Don't forget to give suggestions and constructive feedback in this pull request. (One last shout out to @rkichenama!) Or if you can, review the code for yourself and make your own changes. Any contribution is most welcome.

Let's help make Night Mode a reality!

Posted on Dec 9 '18 by:

somedood profile

Basti Ortiz (Some Dood)

@somedood

Just some dood trying to make code work without bringing the Universe to its demise.

Discussion

markdown guide
 

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-background and --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.

.stories-show {
    background:var(--theme-background);
}

.org-publish-check-wrapper {
    background:var(--theme-background);
}

.chat_chatconfig {
    background:var(--theme-background);
}

code {
    background:var(--theme-background);
}

body {
    background:var(--theme-background);
}

.top-bar {
    background: var(--theme-top-bar-background);
}

Then you can change the values of the variables by adding them to :root

:root {
    --theme-background: #303030;
    --theme-top-bar-background: #1c1c1c;
}

Working 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..

 
 

Wow! This actually looks pretty interesting. I like the grayness of it.

 

Seems like less of a night mode, and just inverting the colors. :(

 

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.

shindakun / devto-dark

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.