We recently made night mode an option for the dev.to interface. You can change to the them in /settings/misc.

It's coming along nicely, but there are still a few places here and there that still need to be updated. If you come across anything that doesn't quite look right, we welcome pull requests.

You can see existing issues tagged night mode here.

In order to make a change, find the appropriate line in SCSS and add a line right after with a CSS variable like this:

color: $medium-gray;
color: var(--theme-secondary-color, $medium-gray);

Doing this both ways ensures browser compatability. We may be able to remove the duplication over time.

This is the current list of CSS variables we have for night mode:

--theme-background: #161f2b;
--theme-color: #fff;
--theme-secondary-color: #cedae2;
--theme-top-bar-background: #141d26;
--theme-top-bar-color: #fff;
--theme-top-bar-search-background: #424a54;
--theme-top-bar-search-color: #fff;
--theme-top-bar-write-background: #00af81;
--theme-top-bar-write-color: #fff;
--theme-container-background: #27374c;
--theme-container-accent-background: #384b66;
--theme-container-background-hover: #37475c;
--theme-gradient-background: linear-gradient(to right, #293d56 8%, #282833 18%, #293d56 33%);
--theme-container-color: #fff;
--theme-container-box-shadow: none;
--theme-container-border: 1px solid #141d26;

Basically those are the variables available to be placed within the rest of our SCSS

Currently we are focused solely on night mode, but we are building this so that themes can be defined more dynamically in the future, in this vein:

In order to test this locally, you'll have to get the app up and running, but if you want to make speculative PRs without running the app locally, we wouldn't be opposed to that.

Thanks a lot, happy coding!