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. })();