Screenshots are at the bottom of the post
Foreword
This is a temporary solution until the official dark theme is released, for this reason the code is not organized and ordered and you may find some component/pages with the light theme.
Why a dark theme?
If you only knew the power of the Dark Side...
– Darth Vader
Joking aside, there are so many benefits to using a dark theme, like:
- Less invasive night reading
- Helps you focus more on text
- Prevents you from fatiguing your eyes for long periods in front of your computer
- And many other benefits (that you can google)
Personally I'm addicted to dark themes, I could be a vampire 🧛♂️
How to use it?
To use it you should install a userstyle manager compatible with https://userstyles.org, my personal recommendation is Stylus
Stylus is a userstyles editor and manager compatible with Mozilla Firefox, Google Chrome and Opera, which can be downloaded in the respective stores:
- Mozilla Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
- Google Chrome & Opera: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
After installing Stylus, just go to the theme page and click the button that says "Install Style"
Theme Page: https://userstyles.org/styles/168140/dev-to-dark-mode
Done! Now you can go back to Dev.to and enjoy the dark theme ☕
Screenshots
Main Page:
Tag Page:
Profile Page:
Post Page:
Conclusion
If you find bugs you can leave a comment or contact me on Twitter, I do not ensure to update the theme regularly and promptly but I will try to keep it working.
You can now contribute on Github: https://github.com/mercxry/dev.to-dark-theme
Credits
I was inspired by this GitHub issue: https://github.com/thepracticaldev/dev.to/issues/1413
Top comments (13)
We're working on making
dev.tothemeable, if you have to time please have a look at this issue and suggest some other variables that might be required.I thought we ought to have a place where we keep a note of the current CSS Variables and also propose different variables that should be included.
Currently included:
--theme-background#f9f9fa--theme-top-bar-background#fdf9f3Pull request pending:
--theme-top-bar-color#0a0a0a--theme-top-bar-search-background#e8e7e7--theme-top-bar-search-color#0a0a0aProposed:
--theme-color#0a0a0a--theme-container-background#ffffff--theme-container-color#0a0a0aI think the best thing to do is leave a comment below of further proposals and I will update the main post.
Also feel free to do pull requests to help roll these out.
Thanks!
Surely 😉
But is this all really true? I still haven't found definitive science that says so. Judging from my own experience I want to gouge my eyes out everytime I see a website that puts white text on a dark background, I couldn't definitely read a long article or a book in such fashion (if the kindle were white on black I wouldn't read much). Books after all have been black text on white background for centuries and people have turned out fine. It's also true that printing white text on a black background would be enormously more expensive. At the same time though I've had a dark theme in the code editor for ages, since I've started developing I guess and I've been fine with that too. I recently converted to a bright theme and to be totally honest... it's fine, it just took a little bit of brainpower to adjust.
So, is it really true that a dark theme is better for a human's health or is it just that we're all used to them so we think everything should be "dark themed" ? I reckon the dark theme idea in computing comes from the days of green text on a dark console and it evolved from there.
I wouldn't be surprised if in the end it would turn out to be just a matter of personal preference...
There are many opinions on the internet, if you search a little you can find sites and documents that say the opposite of what I said as "The Computer Journal 31(5):457-464" which dates back to the 80's where the screens were still cathode ray tube and 50% of the population was astigmatic, now we have better screens and according to statistics approximately 33% of people in America are astigmatic (since you are in Italy like me, the percentage is approximately 25%), so I would say that the situation has improved.
I don't find it valid that the fact that the books are written in black on white is valid because here we are talking about a dark theme for a website that you will read on a screen not on paper.
The kindle instead does an excellent job with its screen trying to emulate in any way the paper so you don't need to have a "dark theme" to get those benefits (although it offers the possibility to reverse the colors which is essentially a dark theme since there are 2 colors on the screen).
In conclusion I agree with you that it can be totally personal opinion, I did this theme because I prefer to have a dark theme instead of a light one, so I shared the theme, so those who prefer a dark theme do not have to wait for it to be officially released and can install it in a few clicks.
True, there's also that to consider, LCD screens are not the same as those in the 80s. It would be cool if someone were to invest in a serious study. In the meantime we have to remember to take brakes to avoid straining our eyes, regardless of which color the chosen theme is ;)
It wasn't intended as criticism, your post is valuable for those who want to activate a dark theme in the meantime. I just jumped on the opportunity to talk about this aspect (bright vs dark theme) that reappers from time to time.
Thank you!
Light affects your internal clock, affecting your sleep. I believe it's blue/cold light that does this. Changing the color profile on your displays later in the evening to warmer colors helps reduce strain.
why not post this to github/gitlab so people can install it from source directly? i know it brings traffic to the style to post at userstyles but you can post to openusercss.org/ as well. better to get away from anything stylish.
Continuously attempting to understand why, in 2024, there is no Dark / Light theme toggle option when logged out; instead, one must navigate to settings and manually save the preferences AFTER logging into DEV.
🤯
Awesome! I've just installed it and really love it! Thanks :)
Oh my gosh thank you!!
Why use Stylus since Stylish now lets you opt out from url collection, analytics etc. ?
Personally I prefer not to trust more Stylish, then for the purposes of the post is much easier to install Stylus since you do not have to explain also how to opt out from data collection.
also, i think there is a transition style missing when posting a comment.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.