🎉 Dark Mode Gift for Instructables’ 20th Birthday 🎉

Instructables is turning 20 — and what’s a party without decorations? Instead of balloons, I decided to bring a gift: a Dark Mode Chrome Extension for the Instructables website. With golden accents and glowing buttons, it gives the site a midnight-party vibe while being easier on the eyes.

1- Google Chrome (or any Chromium-based browser)

2- A text editor (VS Code, Sublime, etc.)

3- The extension files:

1. manifest.json
2. background.js
3. content.css
4. content.js
5. popup.html
6. popup.css
7. popup.js

Here’s the folder layout for the extension:

Each file has a role:

1. manifest.json → describes the extension to Chrome.
2. background.js → keeps track of dark mode status.
3. content.js → applies/removes the CSS when enabled.
4. content.css → holds the complete dark mode styles.
5. popup.html / popup.css / popup.js → create the extension’s toggle interface.

1-Open Chrome and type in the address bar:

2-Toggle Developer Mode (top right).

3-Click Load unpacked and select your instructables-dark-mode folder.

follow images

You should now see the extension appear with its icon.

1. In content.css, add your dark mode styles, for example:

1. This turns the page background dark and text light.

Note: At this point, the website may not look very good. Many elements will clash with the new dark background. Don’t worry — the next steps are all about customizing the styles and fixing these “bugs” to make it look smooth and polished.

1. Make three files:
2. popup.html → contains the button
3. popup.css → styles the button
4. popup.js → makes the button turn dark mode on and off

This allows users to toggle dark mode directly from the extension popup.

Note: files at the end of this instructable

1. Use CSS to make buttons and links glow with the classic Instructables yellow.
2. Example:

You can go wild here: glowing borders, smooth transitions, hover effects, etc.

I’m uploading all the files used in this project (background.js, content.css, content.js, manifest.json, popup.css, popup.html, popup.js) to GitHub so you can download and experiment with them.

Since Instructables doesn’t support these file types directly, you can either:

1. Download them from GitHub, or
2. If needed, copy the code into text files I’ve also included here.

Feel free to customize and improve them! This is meant as a starting point — you can fix bugs, tweak colors, add animations, or make the dark mode more polished.

Tip: Always keep a backup of the original files before making changes so you can revert if something breaks.

the html file :