DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Firefox Add-on to Turn On Dev.to's Night Mode πŸ”₯πŸ”₯
Palash Bauri πŸ‘»
Palash Bauri πŸ‘»

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

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

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)

Collapse
 
link2twenty profile image
Andrew Bone • Edited on

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;
}

Theme test

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

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.

Collapse
 
somedood profile image
Basti Ortiz

The possibilities are endless with this one!

Collapse
 
somedood profile image
Basti Ortiz • Edited on

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.

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.


Collapse
 
bauripalash profile image
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

Collapse
 
somedood profile image
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

Thread Thread
 
bauripalash profile image
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! :(

Thread Thread
 
somedood profile image
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.

Thread Thread
 
bauripalash profile image
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

Thread Thread
 
somedood profile image
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.

Collapse
 
boryanayordanova profile image
boryanayordanova

that's great, thanks!

Collapse
 
codemouse92 profile image
Jason C. McDonald

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

Collapse
 
tobiassn profile image
Tobias SN

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

Want to help the DEV Community feel more like a community? πŸ₯Ή

Head over to the Welcome Thread and greet some new community members!