Customizing better-osm-org Changeset Colors using Stylus

If you use the amazing better-osm-org browser extension/userscript to review changesets, you are probably familiar with its default red, green, and yellow diff highlighting.

While the default colors are great, sometimes you want a custom color scheme that feels more comfortable for your eyes during long validation sessions. For instance, changing the added tags to a cool cyan , keeping deleted tags red , and making modified tags a soft cream/yellow.

Since the script dynamically manages light/dark themes, the easiest way to override these colors globally without messing up the extension’s code is by using custom CSS via the Stylus extension.

How to Apply It:

1. Install the Stylus extension (Chrome/Firefox/Edge).
2. Go to openstreetmap.org.
3. Click the Stylus extension icon and select ”(+) Write style for: openstreetmap.org”.
4. Paste the CSS code below into the editor, give it a name (e.g., Better OSM Custom Colors), and hit Save.

The CSS Code:

/* 1. MODIFIED TAGS -> SOFT CREAM / YELLOW */
    tr.quick-look-modified-tag th,
    tr.quick-look-modified-tag td {
        background: rgba(255, 235, 150, 0.7) !important;
        color: #000000 !important;
    }

/* 2. DELETED TAGS -> RED */
    tr.quick-look-deleted-tag th,
    tr.quick-look-deleted-tag td {
        background: rgba(238, 51, 9, 0.6) !important;
        color: #000000 !important;
    }

/* 3. NEW TAGS -> CYAN */
    tr.quick-look-new-tag th,
    tr.quick-look-new-tag td,
    tr.quick-look-added-tag th,
    tr.quick-look-added-tag td {
        background: rgba(0, 200, 220, 0.6) !important;
        color: #000000 !important;
    }