Return to Answer

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.

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 the script still works, but know that the Stack Exchange official style is now much improved over the initial release.

// ==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.1
// @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;
  }
  .s-badge__moderator.s-badge__xs:before {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.798.246c.3-.329 1.1-.327 1.399 0l2.579 3.66c.3.329.298.864 0 1.192L4.196 8.75c-.299.329-1.1.327-1.398 0L.224 5.098a.904.904 0 010-1.192L2.798.246z' fill='%230077cc'/%3E%3C/svg%3E") !important;
  }
  .s-badge__moderator:before {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%230077cc'/%3E%3C/svg%3E") !important;
  }
`);

If you'd instead prefer the old pointy (but smaller) diamond character instead of the new SVG, swap out the final two CSS selector stanzas above with the following (this requires a little more work than simply changing the SVG color):

.s-badge__moderator.s-badge__xs:before {
    background-image: none !important;
    content: "♦" !important;
    width: unset !important;
    height: unset !important;
    margin: 0 2px 0 0 !important;
}
.s-badge__moderator:before {
    background-image: none !important;
    content: "♦" !important;
    width: unset !important;
    height: unset !important;
    margin: 0 2px 0 0 !important;
}

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

// ==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;
  }
`);

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;
}

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