Custom app · Chrome extension · Productivity

Dark View

Universal dark-mode injector · Chrome extension

Prototype

All projects

DarkView Chrome extension popup overlaid on a dark-mode Google Doc
01The story

Problem, approach, outcome

Google Docs and Google Sheets have no full dark mode. Calendar and Drive do, but the two products I spend the longest staring at are bright white, which is hard on the eyes through a long review session.

The Chrome Web Store has plenty of dark-mode extensions, but they ask to read every page you visit, and few explain what they do with that access. I didn’t want to hand that to a black box.

Invert the page with CSS filters, then put back what shouldn’t be inverted: images and video are flipped a second time so photos look normal. A dark background goes on before the page starts loading, so there’s no white flash.

Google’s editors were the hard part. Docs draws its text on a canvas rather than as page text, so a plain inversion leaves black text on a black page. Dark View watches the editor and strips the inline black color as it appears, so the inversion can do its job. Sheets draws its grid on a canvas too, and needed the opposite fix: leaving it out of the second flip so it inverts once and stays readable.

It also knows when to stay out of the way. Before applying anything, it checks whether a site already has a real dark theme, looking both for dark-mode CSS and for a page background that is actually dark, and skips those sites instead of inverting them back to light. Google Docs only darkens its toolbar, so it fails the second test and still gets Dark View.

And it’s hardened like a product: every internal message is checked against the extension’s own ID, settings are validated and clamped before they’re saved, each tab is told only its own site’s settings, and the popup runs under a strict Content Security Policy.

It’s on in my browser every day, and I don’t use any third-party dark-mode extension. Google Docs and Sheets are where it matters most.

02Overview

About Dark View

Dark View is a dark-mode extension for Chrome that works on any website, with special handling for Google Docs and Google Sheets. Five sliders (brightness, contrast, saturation, grayscale and warmth) tune the result, and any site can keep its own saved settings.

It’s private by design. Settings stay in the browser, nothing is collected or sent anywhere, and the code has no dependencies and no build step.

03Features

What it does

  • Dark mode on any site, from the popup or with Cmd/Ctrl+Shift+L
  • Five live sliders: brightness, contrast, saturation, grayscale and warmth
  • Per-site profiles that load automatically on the next visit
  • Two modes: dark everywhere except sites you block, or only on sites you add
  • Detects sites with a real dark theme and leaves them alone
  • Canvas-aware handling for Google Docs and Google Sheets
  • No white flash: a dark background is set before the page loads
  • Settings sync through your own Chrome profile; nothing is collected or sent
05Stack

How it’s built

  • Chrome extension, Manifest V3
  • Vanilla JavaScript and CSS: no dependencies, no build step
  • CSS filter inversion, with counter-inversion for images and video
  • A MutationObserver for the Google Docs editor
  • A service worker as the only writer to storage, with validated, range-clamped settings
  • A strict Content Security Policy on the popup
06Roadmap

Where it’s going

  1. Shipped

    Google Docs and Sheets

    Canvas-aware handling for the document editor and the spreadsheet grid.

  2. Shipped

    Per-site profiles and two modes

    Dark everywhere with a block list, or only on the sites you choose.

  3. Shipped

    Native dark-mode detection

    Sites with a real dark theme are skipped instead of double-inverted.

  4. Next

    Chrome Web Store listing

    One-click install instead of developer mode.

  5. Next

    Profile import and export

    Back up or move your settings as a file.

  6. Exploring

    Scheduled dark mode

    On automatically in the evening, off during the day.

Have a problem a small, focused tool could solve?

This is the kind of work I do at 321 Enterprise. Tell me what slows your team down and we’ll see what we can build.

Start a conversation See all projects