Firefox Add-on to Turn On Dev.to's Night Mode 🔥🔥

Today, I was tinkering with Element Inspector on Dev.to, On the top, I found some Style element.

<style>
      body.night-theme #top-bar,body.night-theme #page-content,body.night-theme
      footer{background-color:#ececcc !important}
      ...
      border-radius:3px;border:0px;padding:8px;font-size:0.9em; 
      background:#e8e7e7;-webkit-appearance:none}
</style>

Then I also recalled about an article on Dev.to ,

Previewing dev.to's Upcoming Night Mode

Basti Ortiz ・ Dec 9 '18

#meta

I decided, It's Time, to build an add-on for Firefox. , because for quite some time I wanted to build an add-on for Firefox but couldn't find any good idea for it!

Surprisingly it wasn't that difficult! Just need to code only a few lines, within minutes the add-on was up and running.

I logged in to Firefox's Add-on Developer Hub , Uploaded the zipped add-on files, within minutes after uploading, my add-on was approved and visible to the public! ❤️

It was my first Firefox addon and quite fun experience! 😀

Have Fun! Feel Free to Try DEVNight : https://addons.mozilla.org/en-US/firefox/addon/devnight

Source Code is also available at GitHub : bauripalash/devnight

---

If You Like My Work (My Articles, Stories, Softwares, Researches and many more) Consider Buying Me A Coffee ☕ 🤗

Comments

[Andrew Bone]

I've been playing with CSS variables to theme the site.

Currently, there are 2 live --theme-background and --theme-top-bar-background but I have a few more waiting to be pulled.

If the awaiting styles get accepted you'd be able to do something like this.

:root {
  --theme-background: antiquewhite;
  --theme-top-bar-background: cadetblue;
  --theme-top-bar-color: darkslategray;
  --theme-top-bar-search-background: darkslategray;
  --theme-top-bar-search-color: gainsboro;
}

A browser extension that let you pick colours for these variables and then remembered them each time you came to the site would be awesome! 😀

If you did want to look at the rollout or even help with it here's the place to look.

[WIP] Theme-able CSS Variables #1377

Link2Twenty commented on Dec 20, 2018

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:

Variable	Description	Default
--theme-background	Background color of the main body	#f9f9fa
--theme-top-bar-background	Background color of the top bar	#fdf9f3

Pull request pending:

Variable	Description	Default
--theme-top-bar-color	Text and icon color for the top bar	#0a0a0a
--theme-top-bar-search-background	Background color of the search box in the top bar	#e8e7e7
--theme-top-bar-search-color	Text color for the search box, and its placeholder, in the top bar	#0a0a0a

Proposed:

Variable	Description	Default
--theme-color	Text color for the main body	#0a0a0a
--theme-container-background	Background color of the articles and nav-elements	#ffffff
--theme-container-color	Text color for the articles and nav-elements	#0a0a0a

I 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.

View on GitHub

[Basti Ortiz]

The possibilities are endless with this one!

[Basti Ortiz]

Great job, dood! Here's to more successful projects in the future! I'll have to get around writing my own extensions as well. Thanks for the inspiration!

For anyone looking for a Chrome equivalent, @shindakun wrote a quick extension for you. It's not published in the Chrome Web Store, so you have to manually unpack and install it yourself via the Extensions menu in Developer Mode.

Steve Layton

Dec 9

I whipped up a quick Chrome extension for anyone who wants to autoload dark mode for now. Just clone and load the unpacked extension.

shindakun / devto-dark

A small Chrome Extension to activate the Darkmode Beta on dev.to.

Dev.to Auto Darkmode

A small Chrome Extension to activate the Darkmode Beta on dev.to.

View on GitHub

[Palash Bauri 👻]

BTW , my add-on's Chrome version is also complete now, just need to test on Browserstack and upload to Chrome Web Store

[Basti Ortiz]

WOW. You pulled it off in two browsers! I know it's simple to activate the dark theme programmatically, but you were still able to make two extensions for two browsers. Regardless of difficulty, that deserves some respect points. Keep up the great work, man.

+10 Respect

[Palash Bauri 👻]

But I think I forgot Developers have to pay $5 to verify and upload extensions so, for now, I can't publish to the Chrome Web Store! :(

[Basti Ortiz]

Awwwww, man. Even though it's a one-time fee, paying $5 upfront isn't practical unless you're a developer making extensions professionally (and earning from it), not as a hobby.

[Palash Bauri 👻]

And For Students like us, it's totally impossible, my parents wouldn't allow me to spend on these...

$5 is little expensive in India :( , it's almost 350.12INR, I would probably buy a good storybook or novel with this money instead of paying for just verification

[Basti Ortiz]

Yo, sameee. Times are just tough nowadays.

Fear not, with enough effort and hard work, we'll be able to go through the struggles and become the best we can be.

[boryanayordanova]

that's great, thanks!

[Jason C. McDonald]

It would be phenomenal if you also added a Stylus theme. (I use Stylus for CSS modifying other sites.)

[Tobias SN]

Nice. I’ll definitely check this out when I get home.