DEV Community

Ben Halpern for The DEV Team

Posted on

Contributors Wanted: Night Mode/Themes on DEV

We recently made night mode an option for the 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);
Enter fullscreen mode Exit fullscreen mode

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

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!

Discussion (9)

mjraadi profile image
Mohammadjavad Raadi

I absolutely love this platform, the community and the new dark theme. I've managed to run the project locally on an Arch Linux system and posted 2 issues so far. Just waiting for them to be approved.
PS: I found it a bit challenging to get the project running on Arch Linux and your documentations only cover installation on Debian based systems. Would you like me to add Arch Linux installation guide?

ben profile image
Ben Halpern Author

Nice stuff!

Fixed sticky nav summary color to use custom property. #2240

peiche avatar
peiche commented on Mar 29, 2019

What type of PR is this?

  • [ ] Refactor
  • [ ] Feature
  • [X] Bug Fix
  • [ ] Documentation Update


The sticky nav summary text is black, even in dark mode. This fix lets it use the custom property, with black text color as a fallback.



Screenshot of before change


Screenshot of after change

Added to documentation?

  • [ ]
  • [ ] readme
  • [X] no documentation needed
papaponmx profile image
Jaime Rios

Hey Ben, is there an article on how to run the project Locally?

ben profile image
Ben Halpern Author

The Readme plus documentation should get you going!

co16353sidak profile image
Sidak Singh Aulakh

Hey Ben, i am working on a night mode bug regarding in-article fluid comments and i want to preview the changes under local environment, is there a short-hand to achieve this instead of creating 0Auth tokens ?
Keep in mind that as long as i can test my css changes, i will be good to go.

sagar profile image

Night mode looks pretty goodπŸ‘πŸ˜‡

healeycodes profile image
Andrew Healey • Edited on

I might take this challenge on. I love how this project is run. Keep up the great work, Ben/rest of team! πŸ™Œ

perigk profile image
Periklis Gkolias

I am not proud of my design skills, so I cant help. But I would totally use a dark them when deployed

perlatsp profile image
Perlat Kociaj

Night mode is really great i tend to use only night/dark modes on everything where possible.
I have made some commits and will try to do more and more PRs .
Keep the good work Ben and the dev team.