loading...
The DEV Team

Contributors Wanted: Night Mode/Themes on DEV

ben profile image Ben Halpern ・2 min read

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!

Posted on Mar 29 '19 by:

ben profile

Ben Halpern

@ben

A Canadian software developer who thinks he’s funny. He/Him.

The DEV Team

The team behind this very platform. πŸ˜„

Discussion

markdown guide
 

I absolutely love this platform, the dev.to 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?

 

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

 
 

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

Description

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.

Screenshots

Before

Screenshot of before change

After

Screenshot of after change

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [X] no documentation needed
 

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

 

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

 

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.

 

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.

 

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