Return to Revisions

Update 2021-08-12

The badges have since been updated to be much less distracting in the meantime, so this script doesn't serve much of a purpose anymore. If you're still a fan, I've made sure it still works, but know that the Stack Exchange official style is now much better than it was when first released.

Original Post

In true Stack Exchange community fashion, here's a (very quick) userscript to tweak the appearance of the new badges. Note that this doesn't revert the change, but just tweaks it to be a bit less distracting.

Based on a comment by @Adám above, I played with inverting the badge color and making the background transparent:

I find this design to be still distinctive yet less loud than the filled-in version, which makes them less distracting overall.

Here's the script. It runs on all Stack Exchange Q&A sites, but note that the badges are only currently live on per-site metas. Feel free to edit/ improve it locally to suit your own needs, without limitation.

// ==UserScript==
// @name         Invert Staff & Mod Label Colors
// @description  Inverts the color scheme of the Staff & Moderator labels on Stack Exchange
// @homepage     https://meta.stackexchange.com/a/367942
// @author       zcoop98
// @version      0.2
// @grant        GM_addStyle
// @run-at       document-start
//
// @include      https://*stackoverflow.com/*
// @include      https://*serverfault.com/*
// @include      https://*superuser.com/*
// @include      https://*askubuntu.com/*
// @include      https://*mathoverflow.net/*
// @include      https://stackapps.com/*
// @include      https://*.stackexchange.com/*
//
// @exclude      https://data.stackexchange.com/*
// @exclude      https://contests.stackoverflow.com/*
// ==/UserScript==

GM_addStyle(`
  .s-badge__staff {
    border-color: var(--orange-400) !important;
    background-color: transparent !important;
    color: var(--orange-400) !important;
  }
  .s-badge__moderator {
    border-color: var(--theme-secondary-color) !important;
    background-color: transparent !important;
    color: var(--theme-secondary-color) !important;
  }
`);

I know that this doesn't fix any other issues brought up here (eg. contrast, placement, size, etc.), but I presume that Stack Exchange itself will address those, and hope that someone else may find this useful in the meantime anyway.

As a final note, I want to mention that no disrespect whatsoever is intended to the Stack designers who engineered this change, I know this change took effort and careful consideration to create; Meta folk are just fickle about design changes.

If you'd instead prefer the old pointy (but smaller) diamond character instead of the new SVG, add the following stanza to the end of the script (this requires a little more work than simply changing the SVG color):

.s-badge__moderator:before,
.s-badge__moderator.s-badge__sm:before,
.s-badge__moderator.s-badge__xs:before {
  background-image: none !important;
  background-color: transparent !important;
  mask-size: unset !important;
  -webkit-mask-size: unset !important;
  mask: none !important;
  -webkit-mask: none !important;
  content: "♦" !important;
  width: unset !important;
  height: unset !important;
  margin: 0 2px 0 0 !important;
}

This will yield the following:

Comments/ Posts	Profile Page

In the meantime, I've uploaded the diamond character (♦) version of this script to GitHub.