Dark Mode

Free MES Dark Mode browser extension for Chrome, Brave and Edge: dark mode for any website, or light mode for dark ones, with per-site control, a schedule, setups and brightness, sepia and contrast tweaks. Private, no tracking.

Dark mode for any website (or light mode for the dark ones)

A free browser extension by MES for Chrome, Brave, Edge and other Chromium browsers. By default it leaves every page alone until you click its button: then the page in that tab turns dark (click again to switch it back). It can also darken every page, follow your system or run on a schedule, and it leaves pages that are already dark alone. Photos and videos keep their natural colours, every site can have its own choice, and Alt+Shift+D switches the current tab.

Private by design: no accounts, no tracking, no network requests. It only adds a stylesheet to the pages you visit. The code is plain JavaScript you can read.

Install it (about a minute)

  1. Download the zip above and unzip it. You get a folder called mes-dark-mode. Keep it somewhere permanent (Documents is fine): the browser reads the extension from that folder.
  2. Open the extensions page (click an address to copy it, then paste it into the address bar: browsers do not let web pages link to these): chrome://extensions in Chrome, brave://extensions in Brave, edge://extensions in Edge.
  3. Turn on Developer mode (a switch at the top right, or on the left in Edge).
  4. Click Load unpacked and choose the unzipped mes-dark-mode folder.
  5. Click the puzzle-piece icon in the toolbar and pin MES Dark Mode.

Chrome may show a "disable developer mode extensions" notice when it starts: choose Cancel / Keep. Brave and Edge usually do not. Until the extension is listed in the Chrome Web Store, updates are manual: download the new zip, replace the folder and press the reload arrow on the extensions page. Firefox is not supported yet.

How it works

  • Smart invert. It first looks at how the page is painted. If you want dark and the page is light (or the other way round), it adds one stylesheet that flips the page's colours and flips photos, video, canvas, embedded frames and CSS background images back so they look normal. If the page already matches, it does nothing, so sites with their own dark theme are not made worse.
  • Remembers each site (on your computer only) so a dark site is not flashed light on your next visit.
  • One click, this tab only. Clicking the toolbar button (or Alt+Shift+D) makes the page in that tab dark; click again to switch it back. It stays while you keep using that site in that tab (reload, back / forward, links within the site) and is forgotten when the tab goes to another site, is closed, duplicated, opened from another page or restored after a restart, or after 30 minutes away. Other tabs are never touched.
  • It tells you why. The button shows a moon while the tab is dark, and its tooltip (and the panel) says why a page is dark: “You switched this tab”, “mail.google.com is set to Dark in your site list”, or the setup in use. Right-click the button and choose “Open the Dark Mode panel”, or change “Toolbar button” in the settings so a click opens the panel instead.
  • Per-site choice. In the panel set a site to Auto, Dark, Light or Off: that is kept for the site in every tab. The settings page lists every saved site with a Remove button.
  • Setups. Save different modes and looks for different purposes (it ships with Only when I switch it on, Always dark, Follow system, Night (dim and warm) and Paper (light, warm)), switch in the popup, and export or import them as text.
  • Works with MES Read Aloud. Read Aloud's player has its own dark-page button; when Dark Mode darkens a page it switches that one off, so the page is never inverted twice (which would make it light again).
  • Tweaks: brightness, contrast, sepia and grayscale, and a schedule (for example dark from 19:00 to 07:00).

Honest limits

Inverting is the most reliable way to darken any page, but it is not a hand-tuned theme: brand colours can shift in hue a little, and a dark logo on a transparent background can disappear against the dark page (there is a setting to invert images too). If one site looks wrong, set it to Off or Light in the popup. It cannot change browser pages (chrome://), the Web Store or the built-in PDF viewer.

Permissions: it has to run on every page you open to be able to darken it, which the browser words as "read and change your data on all websites". It does not read page content: it only checks the background colour to see whether the page is dark, and adds the stylesheet. storage keeps your setups and the per-site memory; activeTab and scripting let a click switch a tab that was open before the extension was installed or updated (an update also refreshes the open tabs, so nothing stays dark from the old version).

Questions

Why is a page dark when I did not switch it?
Hover over the toolbar button or open the panel: the first line says why. It is either your click in that tab, the site's entry in your site list (remove it in the settings) or a setup that darkens every page (pick “Only when I switch it on”).
Why is a page still light?
Check the popup: the site may be set to Off or Light, or the setup's mode may be Light or System (and your system is light). A page the extension judges to be dark already is left alone.
Why did a site get brighter or odd?
Some pages paint their backgrounds in ways that are hard to judge. Set that site to Dark (always make it dark) or Light, or Off.
Does it slow pages down?
It adds one stylesheet and does a small amount of work in the background to find photos used as CSS backgrounds. Very large pages are handled in small slices.
Is it open source?
The whole extension is plain, readable JavaScript served from this site: content.js, shared.js, manifest.json.

More free add-ons are listed on Browser Extensions. Every page on mes.fm also has its own dark mode button (the moon).

Comments
Advertisement