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

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.

By Mackenzie Bowes · mackenzie@mackenziebowes.com · @_mackenziebowes on X

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.

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:

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

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.