{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreic37tfebnzizljwvm6yols3p2q6nnppma3b5og22be6y7vth42wz4",
    "uri": "at://did:plc:4tuge3k3comfj4nfvqnwkemn/app.bsky.feed.post/3mo2hrtjaglq2"
  },
  "path": "/user/FajrAl/diary/408867",
  "publishedAt": "2026-06-10T12:34:31.000Z",
  "site": "https://www.openstreetmap.org",
  "tags": [
    "better-osm-org",
    "openstreetmap.org"
  ],
  "textContent": "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.\n\nWhile 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**.\n\nSince 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.\n\n##### How to Apply It:\n\n  1. Install the **Stylus** extension (Chrome/Firefox/Edge).\n  2. Go to openstreetmap.org.\n  3. Click the Stylus extension icon and select **”(+) Write style for: openstreetmap.org”**.\n  4. Paste the CSS code below into the editor, give it a name (e.g., _Better OSM Custom Colors_), and hit **Save**.\n\n\n\n##### The CSS Code:\n\n\n    /* 1. MODIFIED TAGS -> SOFT CREAM / YELLOW */\n        tr.quick-look-modified-tag th,\n        tr.quick-look-modified-tag td {\n            background: rgba(255, 235, 150, 0.7) !important;\n            color: #000000 !important;\n        }\n\n    /* 2. DELETED TAGS -> RED */\n        tr.quick-look-deleted-tag th,\n        tr.quick-look-deleted-tag td {\n            background: rgba(238, 51, 9, 0.6) !important;\n            color: #000000 !important;\n        }\n\n    /* 3. NEW TAGS -> CYAN */\n        tr.quick-look-new-tag th,\n        tr.quick-look-new-tag td,\n        tr.quick-look-added-tag th,\n        tr.quick-look-added-tag td {\n            background: rgba(0, 200, 220, 0.6) !important;\n            color: #000000 !important;\n        }\n",
  "title": "Customizing better-osm-org Changeset Colors using Stylus"
}