# omarchy-web-retheme: the whole web, but it matches your desktop now

Your terminal is beautiful. Your browser is a crime scene. omarchy-web-retheme fixes that.

*Or: how a "dumb throwaway idea" became a browser extension in about an hour.*

## The problem: your terminal is beautiful and your browser is a crime scene

Mackenzie Bowes runs a small company out of Vernon, British Columbia, staffed largely by Claudes, and he does his computing on Omarchy - the Linux distribution configured around Hyprland. His terminals are themed to perfection. He runs a pile of agents in them, and while those agents work, he's in a browser doing research.

And the browser was ruining everything.

Web browsers show websites. Websites have their own themes and designs, and it can kinda clash with the rest of a themed system. So at 09:58 on October 5th, Mackenzie opened an empty folder and said the magic words:

> "I have a dumb throwaway idea I want to pass to you to play with in here."

The idea, in his words: "we can make a plugin that reads a theme file from omarchy, use that as CSS variables, and do something like css-reset a website and write in new rules."

## What it is

**omarchy-web-retheme** is a browser extension for Chromium (Chrome, Brave) and Firefox that restyles every website using your current Omarchy theme.[1] Switch themes and every open tab follows along, live. It's MIT-licensed and lives at [github.com/mackenziebowes/omarchy-web-retheme](https://github.com/mackenziebowes/omarchy-web-retheme).

## The one real constraint (and the whole architecture)

A browser extension cannot read `~/.config` directly. That's it. That single constraint is the entire shape of the tool:

- **A native messaging host**, written in Python - 85 lines, zero dependencies, because the system Python ships with `tomllib`. It reads `~/.local/state/omarchy/current/theme/colors.toml` and sends the palette to the browser when it connects, and again every time the file changes.
- **An installer** (`./install.sh`) that registers the host for chromium, chrome, brave and firefox.
- **The extension itself**, about 390 lines of JavaScript: `css.js` turns the palette into CSS variables, `content.js` injects the stylesheet at `document_start`, plus a background worker and a small popup.

Every palette key becomes a CSS variable - `bright_red` becomes `--omarchy-bright-red` - and the extension also defines conveniences like `--owr-bg`, `--owr-fg` and `--owr-accent`. When a theme is missing a key, a default from Catppuccin Mocha (background `#1e1e2e`) fills the gap.

## Two modes

**Soft mode** sets the page background, text colour, links and form controls. Tasteful. **Full mode** also recolours every element with an opaque background and drops light gradient scrims - but it leaves images, transparent overlays and brand colours alone, so logos don't turn into abstract art.

## What x.com taught us about CSS (a debugging saga)

The first screenshots came back at 10:07, and Mackenzie went full detective. Hidden profiles on x.com, plus a big empty box in front of YouTube videos:

> "I think the hidden profiles on x.com, as well as the big empty box in front of youtube videos, is your *:html & :not(svg) rule. That's catching invisible divs that sit on top of images for link-like behaviour, pretty sure."

**Lesson one: universal selectors catch invisible things.** Sites park transparent divs on top of images to make them clickable. Your reset doesn't know they're invisible.

By 10:21, x.com was "much better," but every interactable element had grown a weird square box - because "the x.com design team is just using bounding boxes for that in their design system." **Lesson two: sites draw their icon buttons as filled boxes.**

By 10:24, the fix for the fix: the background colour was making the search bar grow out of bounds, because "their like... pill container thing is just an image." The answer was `transparent`. **Lesson three: sometimes the right colour is no colour.** YouTube needed the same transparent click-area treatment.

And then, at 10:30, a giant gap appeared in the x.com sidebar - and Mackenzie traced it to x.com itself. It uses fixed widths and tries to center three columns of content depending on screen size; the window was just at an awkward width for their design team. His verdict: "We don't need to fix it." **Lesson four: not every breakage is yours.**

All of these per-site fixes live in `OWR_SITES` in `extension/css.js`. There's no build step - most changes are an edit to that file and a reload.

## Six commits in twelve minutes

At 10:49, Mackenzie said "This is amazing" and asked for GitHub. At 10:51, he named it - "Yea, omarchy-web-retheme is perfect" - and confessed to a previous attempt: "I was actually trying to do this kind of thing manually a year ago with `iroshiki` but I'm kinda stupid so it didn't work well."

He also issued one non-negotiable design requirement: "You do gotta draw a sick header image for the project using HTML canvas, though, so people get excited about it." And then, crucially: it should be "dumb. I mean accessible for someone that is in a feed-hole. Yknow, big red before-after arrow."

The commit log is a portrait of art in motion:

- **10:52** - initial commit
- **10:55** - header simplified to a big before/after with a red arrow
- **10:56** - thin curved arrow and "Matches your theme!" label
- **10:58** - arrow arced downward
- **10:58** - CONTRIBUTING.md
- **11:04** - social preview image, 1280×640

## We measured it, because vibes aren't a spec

We ran the same colours the extension uses through WCAG 2.1 contrast checks (AA for normal text is 4.5:1), against each theme's own background, for all 22 themes that ship with Omarchy:

| What | Pass 4.5:1 | Notes |
|---|---|---|
| Body text (foreground) | **22 of 22** | Clean sweep |
| Captions, labels, small text (light_foreground) | **22 of 22** | Also clean |
| Links (accent) | **19 of 22** | Misses: rose-pine 3.14, miasma 3.86, catppuccin-latte 4.34 |
| Placeholder text (dark_foreground) | **3 of 22** | Only osaka-jade (7.78), ethereal (4.90), retro-82 (4.68) pass; white and everforest sit at 1.82 and 1.72 |

Placeholder text is where most themes miss, and it's the honest weak spot: the next thing to build is a fallback to a passing colour when a palette fails.

## Where it stops (the honesty section)

Shadow DOM contents are out of reach of page CSS. Sites that paint with canvas or inline SVG fills keep their own colours. And Full mode can break a site that signals state by background colour alone - which is why the popup has a per-site skip.

We don't know how many people will install it, and we don't know which other sites break. If you find one, that's a contribution waiting to happen.

## Try it

```bash
git clone https://github.com/mackenziebowes/omarchy-web-retheme
cd omarchy-web-retheme
./install.sh
```

Then load it: **Chromium** - `chrome://extensions`, Developer mode, Load unpacked, point at `extension/`. **Firefox** - `about:debugging`, Load Temporary Add-on, pick `extension/manifest.json`. Firefox makes site access opt-in, so click "Grant access to all sites" in the popup once - and note that a temporary add-on disappears when Firefox restarts. It installs from the repository, not a browser store.

CONTRIBUTING.md covers the layout and how to give a fork its own extension ID. Most fixes are one edit to `css.js` and a reload.

Your terminals already look great. Now everything else does too.

## Sources

1. omarchy-web-retheme, MIT licence, Mackenzie Bowes, README. <https://github.com/mackenziebowes/omarchy-web-retheme>

---

Published 2026-10-27. Web page: https://www.mackenziebowes.com/posts/omarchy-web-retheme-the-whole-web-but-it-matches