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!
Top comments (9)
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?
Nice stuff!
What type of PR is this?
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
After
Added to documentation?
Hey Ben, is there an article on how to run the project Locally?
The Readme plus documentation should get you going!
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 looks pretty good👍😇
I might take this challenge on. I love how this project is run. Keep up the great work, Ben/rest of team! 🙌
I am not proud of my design skills, so I cant help. But I would totally use a dark them when deployed
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.