☰

background-color

Change the white elements to your wanted color!

目前为 2018-12-15 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         background-color
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.9.3
  5. // @description  Change the white elements to your wanted color!
  6. // @author       developerdong
  7. // @match        http*://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10. (function () {
  11.     "use strict";
  12.  
  13.     function toHex(N) {
  14.         if (N == null) return "00";
  15.         N = parseInt(N);
  16.         if (N === 0 || isNaN(N)) return "00";
  17.         N = Math.max(0, N);
  18.         N = Math.min(N, 255);
  19.         N = Math.round(N);
  20.         // return "0123456789abcdef".charAt((N - N % 16) / 16) + "0123456789abcdef".charAt(N % 16); // Lower case
  21.         return "0123456789ABCDEF".charAt((N - N % 16) / 16) + "0123456789ABCDEF".charAt(N % 16); // Upper case
  22.     }
  23.  
  24.     /**
  25.      * Transform RGB or RGBA color to HEX color
  26.      * @return {string}
  27.      */
  28.     function RGBAtoHEX(str) {
  29.         const leftParenthesisIndex = str.indexOf('(');
  30.         const rightParenthesisIndex = str.indexOf(')');
  31.         const colorFormat = str.substring(0, leftParenthesisIndex);
  32.         const colorValueArray = str.substring(leftParenthesisIndex + 1, rightParenthesisIndex).split(',');
  33.         if (colorFormat === "rgba" && parseFloat(colorValueArray[3]) !== 1) {
  34.             return "TRANSPARENT";
  35.         } else if (colorFormat === "rgba" || colorFormat === "rgb") {
  36.             const r = colorValueArray[0].trim(), g = colorValueArray[1].trim(), b = colorValueArray[2].trim();
  37.             const hex = [toHex(r), toHex(g), toHex(b)];
  38.             return '#' + hex.join('');
  39.         } else {
  40.             return str;
  41.         }
  42.     }
  43.  
  44.     /**
  45.      * Change the background color of all sub elements by level order
  46.      */
  47.     function changeBackgroundColor(node) {
  48.         const WANTED_COLOR = "#DCE2F1";
  49.         const WHITE = "#FFFFFF";
  50.         const queue = [];
  51.         while (node) {
  52.             // nodeType === 1 means the node is an element
  53.             if (node.nodeType === 1) {
  54.                 if (RGBAtoHEX(node.style.getPropertyValue("background-color")) === WANTED_COLOR) {
  55.                     node.style.removeProperty("background-color");
  56.                 }
  57.                 const nodeStyle = window.getComputedStyle(node);
  58.                 const hexColor = RGBAtoHEX(nodeStyle.backgroundColor);
  59.                 // nodeStyle.cursor !== "pointer" means the node is non-clickable
  60.                 if ((node === document.body && hexColor === "TRANSPARENT") || (hexColor === WHITE && nodeStyle.cursor !== "pointer")) {
  61.                     if (nodeStyle.transitionProperty.includes("background-color")) {
  62.                         node.style.setProperty("transition-property", nodeStyle.transitionProperty.replace("background-color", "null"), "important");
  63.                     }
  64.                     node.style.setProperty("background-color", WANTED_COLOR, "important");
  65.                 } else {
  66.                     node.style.removeProperty("transition-property");
  67.                 }
  68.                 Array.from(node.children).forEach(function (child) {
  69.                     queue.push(child);
  70.                 });
  71.             }
  72.             node = queue.shift();
  73.         }
  74.     }
  75.  
  76.     // Change the background color of newly added elements
  77.     const observer = new MutationObserver(function (records) {
  78.         records.map(function (record) {
  79.             if (record.type === "childList") {
  80.                 record.addedNodes.forEach(changeBackgroundColor);
  81.             } else if (record.type === "attributes") {
  82.                 changeBackgroundColor(record.target);
  83.             }
  84.         });
  85.     });
  86.     const option = {
  87.         childList: true,
  88.         subtree: true,
  89.         attributes: true,
  90.         attributeFilter: ["class"]
  91.     };
  92.     observer.observe(document.body, option);
  93.  
  94.     // Change the background color of initially loaded elements
  95.     changeBackgroundColor(document.body);
  96.  
  97. })();