Build a Dark Mode Chrome Extension — Toggle Dark Mode on Any Website

How Dark Mode Extensions Work

Browser dark mode extensions work by injecting CSS into the current webpage. The most effective technique uses the CSS filter property to invert all colors and then rotate the hue to correct for unnatural-looking colors.

The CSS Filter Trick

This single CSS rule turns any website dark:

html {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Un-invert images so they look normal */
img, video, canvas, picture {
  filter: invert(1) hue-rotate(180deg) !important;
}

The invert(1) flips all colors — white becomes black, black becomes white. The hue-rotate(180deg) corrects the color shift that inversion causes, so photos and graphics look natural.

chrome.scripting — Injecting CSS from the Popup

The popup cannot directly modify a webpage's styles. It needs to use chrome.scripting.insertCSS:

// Turn dark mode ON for the current tab
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.scripting.insertCSS({
    target: { tabId: tabs[0].id },
    css: `html { filter: invert(1) hue-rotate(180deg) !important; }`
  });
});

// Turn dark mode OFF
chrome.scripting.removeCSS({
  target: { tabId: tabs[0].id },
  css: `html { filter: invert(1) hue-rotate(180deg) !important; }`
});

Remember Preference Per Domain

The extension should remember whether dark mode is on or off for each website separately:

// Save preference for this domain
function savePref(domain, enabled) {
  chrome.storage.local.get(['prefs'], (result) => {
    const prefs = result.prefs || {};
    prefs[domain] = enabled;
    chrome.storage.local.set({ prefs });
  });
}

// Load preference when popup opens
function loadPref(domain, callback) {
  chrome.storage.local.get(['prefs'], (result) => {
    const prefs = result.prefs || {};
    callback(prefs[domain] || false);
  });
}

This is a preview. The full ebook includes the complete extension with toggle button animation, domain extraction, whitelist management, and handling edge cases like iframes.