Palash Bauri 👻

Posted on Dec 20, 2018 • Updated on Nov 24, 2019

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

#firefox #meta #opensource #showdev

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 ・ 2 min read

#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 ☕ 🤗

Top comments (12)

Andrew Bone • Dec 20 '18 • Edited

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 • Dec 20 '18

The possibilities are endless with this one!

Basti Ortiz • Dec 20 '18 • Edited

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 👻 • Dec 20 '18

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 • Dec 20 '18

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 👻 • Dec 20 '18

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 • Dec 20 '18

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 👻 • Dec 20 '18

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