Superuser.com dark mode

superuser-com-dark-mode.user.js

// ==UserScript==
// @name         Superuser Dark Mode
// @namespace    dubrox.com
// @version      2026-03-02
// @description  Quick and dirty dark mode waiting for official support
// @author       dubrox
// @match        https://superuser.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const invertedRoots = [
        'body',
        '.topbar-dialog',
    ];
    const whiteBg = [
        'body > .container',
        'body > footer',
    ];
    const invertedExceptions = [
        ' > header',
        'img',
    ];
    const invertedRootsQuery = invertedRoots.join(',');
    const whiteBgQuery = whiteBg.join(',');
    const invertedExceptionsQuery = invertedExceptions.map(ex => invertedRoots.map(r => `${r} ${ex}`).join(', ')).join(', ')

    // Inject CSS for dark mode
    const style = document.createElement('style');
    style.textContent = `
@media (prefers-color-scheme: dark) {
  html {
    background-color: black;
  }
  ${invertedRootsQuery} {
    filter: invert(90%);
    background-color: white;
  }

  ${whiteBgQuery} {
    background-color: white;
  }

  /* double apply invert filter to cancel out effect on images */
  ${invertedExceptionsQuery} {
    filter: invert(100%);
  }
}
    `;
    document.head.appendChild(style);
})();