Git-SCM Background Color Changer

Dynamically replace the background color of Git-SCM pages based on the system theme

Ask a question, post a review, or report the script.

Wrap lines

// ==UserScript==
// @name         Git-SCM Background Color Changer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Dynamically replace the background color of Git-SCM pages based on the system theme
// @author       mcwindy
// @match        https://git-scm.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  const darkModeBg = '#1B1B1B'; // for dark mode
  const lightModeBg = '#fff'; // for light mode

  // Detection system theme
  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

  const bgColor = isDarkMode ? darkModeBg : lightModeBg;

  const bodyElement = document.querySelector('body');
  if (bodyElement) {
    bodyElement.style.background = bgColor;
  }

  // Replace the background attribute in all style sheets
  const styleSheets = document.styleSheets;
  for (let i = 0; i < styleSheets.length; i++) {
    const styleSheet = styleSheets[i];
    try {
      const cssRules = styleSheet.cssRules || styleSheet.rules;
      for (let j = 0; j < cssRules.length; j++) {
        const rule = cssRules[j];
        if (rule.selectorText === 'body' && rule.style.background) {
          rule.style.background = bgColor;
        }
      }
    } catch (e) {
      // Cross-domain style sheet cannot be accessed, ignored
    }
  }
})();