DEV Community

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

Posted on

Previewing dev.to's Upcoming Night Mode

#meta

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.

View on GitHub

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';
Enter fullscreen mode Exit fullscreen mode

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!

Latest comments (15)

Collapse
 
link2twenty profile image
Andrew Bone • • Edited

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.

Collapse
 
somedood profile image
Basti Ortiz • • Edited

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.

Collapse
 
link2twenty profile image
Andrew Bone •

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?

Collapse
 
nektro profile image
Meghan (she/her) •

Here's the start of my attempt
gist.github.com/nektro/647915e7907...

Collapse
 
somedood profile image
Basti Ortiz •

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

Collapse
 
nektro profile image
Meghan (she/her) •

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

Collapse
 
asto profile image
astodev •

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.

Collapse
 
rkichenama profile image
Richard Kichenama •

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.

Collapse
 
asto profile image
astodev •

That's a interesting approach and makes sense. Maybe just needs more work on it..

Collapse
 
ben profile image
Ben Halpern •

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.

Thread Thread
 
asto profile image
astodev •

I agree. Twitters mobile app 'dark mode' is definitely the model that should be looked at..

Thread Thread
 
maxdevjs profile image
maxdevjs •

I recently stumbled upon docker night mode. Aesthetically looks soothing, implemented in a slight (I guess) way...

Collapse
 
gruler05 profile image
Gaurav Bansode •

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

Collapse
 
shindakun profile image
Steve Layton •

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.

View on GitHub

Collapse
 
ben profile image
Ben Halpern •

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

Read next

llm_explorer profile image

Llama3 License Explained

Olga -

pavantheaecassociates profile image

MEP BIM Modeling Services in Retail Environments: Enhancing Shopping Experiences through Integrated Design

pavantheaecassociates -

paradeto profile image

Implement React v18 from Scratch Using WASM and Rust - [5] Implementation of Complete Work Phase of Render Process

ayou -

codetradeindia profile image

Types of API Requests in Flutter With Example

CodeTrade India Pvt. Ltd. -