☰

Git-SCM Background Color Changer

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

  1. // ==UserScript==
  2. // @name         Git-SCM Background Color Changer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Dynamically replace the background color of Git-SCM pages based on the system theme
  6. // @author       mcwindy
  7. // @match        https://git-scm.com/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.   'use strict';
  14.  
  15.   const darkModeBg = '#1B1B1B'; // for dark mode
  16.   const lightModeBg = '#fff'; // for light mode
  17.  
  18.   // Detection system theme
  19.   const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  20.  
  21.   const bgColor = isDarkMode ? darkModeBg : lightModeBg;
  22.  
  23.   const bodyElement = document.querySelector('body');
  24.   if (bodyElement) {
  25.     bodyElement.style.background = bgColor;
  26.   }
  27.  
  28.   // Replace the background attribute in all style sheets
  29.   const styleSheets = document.styleSheets;
  30.   for (let i = 0; i < styleSheets.length; i++) {
  31.     const styleSheet = styleSheets[i];
  32.     try {
  33.       const cssRules = styleSheet.cssRules || styleSheet.rules;
  34.       for (let j = 0; j < cssRules.length; j++) {
  35.         const rule = cssRules[j];
  36.         if (rule.selectorText === 'body' && rule.style.background) {
  37.           rule.style.background = bgColor;
  38.         }
  39.       }
  40.     } catch (e) {
  41.       // Cross-domain style sheet cannot be accessed, ignored
  42.     }
  43.   }
  44. })();