How I Built a Dark Mode Chrome Extension for Medium

How I Built a Dark Mode Chrome Extension for Medium

How often do you read Medium posts into the night? Whether you’ve just found an excellent technical blog, or happen to bump into something fascinating, the answer for me is pretty often.

Spending long hours staring at a computer screen isn’t healthy. Personally, I feel this gets even worse when the screen is mostly white. For example, Medium (web clients) default background color.

That is why I built an open source dark mode chrome extension for Medium.

Here is a screenshot of what it looks like.

How I built it

First of all the code is open source, so feel free to check out the complete repository here.

Other than that, the chrome extension implementation is fairly straight forward. Let’s quickly walk through the different files in the repository.

manifest.json

Every chrome extension requires a manifest.json file. This is a general file that has config values for the extension.

background.js

let state = false;
chrome.browserAction.onClicked.addListener(function(tab) {
if (!state) {
chrome.tabs.insertCSS(null, { file: "dark_mode.css" });
state = !state;
return;
}
chrome.tabs.insertCSS(null, { file: "light_mode.css" });
state = !state;
});

Background scripts run JavaScript code that controls the behavior of the extension.

Specifically here we want to toggle (inject) the different stylesheets when the user clicks on the extension icon.

dark_mode.css && light_mode.css

css files that overwrite default styling.

Feel free to get more selective with the classes and make a pull request 😅😅.

If you’d like to see a different color theme let me know in the comments 🙂 Otherwise, feel free to make a pull a request 🙂

If this post was helpful, please click the clap 👏 button below to show your support! ⬇⬇

If you like tech tutorials and startup related content feel free to follow me on Medium, Github and Linkedin.

“How I Built a Dark Mode Chrome Extension for Medium” Posted first on ” Coding on Medium “
Author: Omer Goldberg

Author: Pawan Kumar

Leave a Reply

Close Menu
%d bloggers like this:
Skip to toolbar