# How I made every website follow my Omarchy theme A browser extension of 473 lines reads the Omarchy theme and restyles every site in Chromium and Firefox. We measured the contrast of its text colours on all 22 shipped themes: body text and captions pass WCAG AA on all 22, links on 19, placeholder text on 3. You switch your Omarchy theme and the terminal, editor and bar change at once, and every website stays bright white. That is the gap omarchy-web-retheme closes: it reads the current theme and restyles each page in Chromium or Firefox, live, in every open tab.[1][2] It took six commits between 10:52 and 11:04 on 2026-10-05.[2] This is how it works, the number we measured on all 22 themes that ship with Omarchy, and where it stops. ## How does the theme get into the page? Two small parts. A native messaging host, `host/omarchy-web-retheme-host` (85 lines of Python), reads `~/.local/state/omarchy/current/theme/colors.toml` and sends it to the browser on connect and whenever the file changes. The extension (about 390 lines of JavaScript) turns the palette into CSS variables and injects a stylesheet at `document_start`.[2] Every palette key becomes a variable, so `bright_red` is `--omarchy-bright-red` and your own CSS can use it. The extension also defines its own tokens: `--owr-bg`, `--owr-fg`, `--owr-accent` and the rest. When a theme lacks a key, a default from Catppuccin Mocha fills the gap. The ten distinct default colours in `css.js` all appear in Omarchy's own `catppuccin/colors.toml`, whose background is `#1e1e2e`.[2][4] There are two modes. Soft mode sets the page background, text colour, links and form controls. Full mode also recolours every element with an opaque background and drops light gradient scrims, but leaves images, transparent overlays and brand colours alone.[2] ## Is the text readable on every theme? We wanted a number, not an impression. For each of the 22 themes in `~/.local/share/omarchy/themes`, we took the same colours the extension uses and computed their contrast ratio against the theme's background with the WCAG 2.1 formula. AA for normal text is 4.5 to 1.[3] | Text role | Palette colour | Themes at 4.5 or more | |---|---|---| | Body text | `foreground` | 22 of 22 | | Captions, labels, small text | `light_foreground` | 22 of 22 | | Links | `accent` | 19 of 22 | | Placeholder text | `dark_foreground` | 3 of 22 | The three links that miss are `rose-pine` at 3.14, `miasma` at 3.86 and `catppuccin-latte` at 4.34. The placeholders are worse: only `osaka-jade` (7.78), `ethereal` (4.90) and `retro-82` (4.68) pass, and `white` and `everforest` are at 1.82 and 1.72. The numbers measure each palette colour against the theme's own background. Full mode recolours a page's surfaces to that background, so they describe what the extension paints. ## Where does it stop? - Placeholder text is where most themes miss. `::placeholder` uses `--owr-muted`, a colour the extension chooses, and it fails AA on 19 of the 22 themes. The extension could fall back to a passing colour when a palette fails. That fallback is next to build. - Shadow DOM contents are not reached by page CSS. - Sites that paint with `` or inline SVG fills keep their own colours. - Full mode can break a site that signals state by background colour alone. The popup has a per-site skip for that. - Firefox makes site access opt-in, so you click "Grant access to all sites" in the popup once, and a temporary add-on disappears when Firefox restarts.[2] - It installs from the repository, not a browser store. Per-site fixes live in `OWR_SITES` in `extension/css.js`. X and YouTube are in there, because both draw their icon buttons as filled boxes.[2] ## What can you take from this? 1. **Install it.** Run `./install.sh` and load `extension/` in your browser. The README lists the steps for Chromium, Chrome, Brave and Firefox.[2] 2. **Check a palette.** Contrast between a palette's text colours and its background is one formula and one loop. We ran it on 22 themes. If you make themes, or tools that read them, run it before you ship. 3. **Fork it.** It has no build step, so most changes are an edit to `extension/css.js` and a reload. CONTRIBUTING.md covers the layout and how to give a fork its own extension ID.[2] If you use Omarchy and a site breaks, I'd like to hear which one: mackenzie@mackenziebowes.com or [@_mackenziebowes](https://x.com/_mackenziebowes). ## Sources 1. Omarchy, a Linux distribution configured around Hyprland. 2. omarchy-web-retheme, MIT licence, Mackenzie Bowes, first commit 2026-10-05. 3. W3C, Web Content Accessibility Guidelines 2.1, success criterion 1.4.3 Contrast (Minimum). 4. Omarchy, theme "catppuccin", colors.toml (background = "#1e1e2e"). --- Published 2026-10-27. Web page: https://www.mackenziebowes.com/posts/web-retheme-every-website-in-your-omarchy-theme