Tiny Project IX: Dark Mode Wizard

Toggle dark mode on websites that don’t support it natively.

Photo by Mark Tegethoff on Unsplash

Dark Mode Wizard is a simple Chrome extension that enables users to switch any website to dark mode with a single click.

It is designed to improve browsing comfort during the night or in low-light environments. With easy on/off functionality, you can quickly toggle dark mode to reduce eye strain and enjoy a more comfortable viewing experience.

Features

• Toggle dark mode on any website with a single click.
• Lightweight and user-friendly interface.
• No complex settings or configurations required.

Demo

I recorded a short video to show how the Dark Mode Wizard extension works.

Dark Mode Wizard — Demo

Design

I kept the extension’s interface simple by focusing on essential elements: a heading, subheading, and toggle switch icon.

Development

I built the extension using HTML, CSS, and JavaScript, like all the previous ones I have published.

File Structure

This is how the extension files looks in VS Code.

darkmodewizard/
  ├── icons/
  ├── background.js
  ├── content.js
  ├── manifest.json
  ├── popup.css
  ├── popup.html
  └── popup.js

Extension Structure

I created amanifest.json file that serves as the configuration for the Chrome extension.

The manifest file defines the basic extension information (name, version, description), permissions required (storage), the pop-up interface, icons for the extension, background, and content scripts.

Implementing the Background Script

Thebackground.js script initializes the extension’s state when it is installed, disabling dark mode by default for new users.

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ darkModeEnabled: false });
});

Building the Popup UI

Thepopup.htmlandpopup.jswas set up to provide a simple toggle switch for users to enable or disable dark mode.

I kept the UI minimal, containing only a heading, a subheading, and a toggle switch icon. The JavaScript file:

• Retrieves the current dark mode setting from storage.
• Updates the toggle switch based on the stored setting.
• Listens for changes to the toggle switch.
• Saves the new state to storage when changed.
• Sends a message to the content script to apply or remove dark mode.

Creating the Content Script

Thecontent.js script is the core of the extension's functionality. It:

• Listens for messages from the popup script.
• ImplementsenableDarkMode() anddisableDarkMode() functions.
• Applies a color inversion filter to the entire document.
• Handles media elements (images, videos) to preserve their original appearance.
• UsesMutationObserver to apply filters to dynamically loaded content.

Challenges

I encountered some challenges when I was building this extension. The first challenge was ensuring that images and videos retained their original colors while the rest of the page was inverted. I was able to find a solution for videos by applying specific filters to the media elements separately, but some images still get inverted.

The second challenge was handling dynamically loaded content, which required setting upMutationObserver to monitor and apply the necessary styles to newly added elements.

Enhancements

In the future, I might work on some potential areas that need improvement:

• Adding functionality to choose different dark mode themes.
• Allowing users to customize dark mode settings for individual websites.
• Optimizing the script to handle larger and more complex web pages efficiently.
• Fixing the remaining issues with image inversion.

If you are interested in contributing to this extension to fix the media inversion issues or add new features and functionalities, you can check out the codebase on GitHub.

Availability

The Dark Mode Wizard extension has been published and is available for installation on the Chrome Web Store. You can easily add it to your Chrome browser to start enjoying a more comfortable browsing experience in low-light environments.

Hi, thanks for reading this piece! I’m Soliudeen Ogunsola. If you find this article interesting and want to connect with me, you can follow me on X (formerly known as Twitter) or check me out on LinkedIn.