Custom Color Twitter

CustomColorTwitter

Allows you to set a custom color instead of the 6 predefined by Twitter
目前為 2023-07-26 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name        CustomColorTwitter
// @name:fr        CustomColorTwitter
// @match       https://twitter.com/*
// @match       https://X.com/*
// @grant       none
// @version     1.0
// @author      LOUDO
// @license     MIT
// @description Allows you to set a custom color instead of the 6 predefined by Twitter
// @description:fr Permet de définir une couleur personnalisée au lieu des 6 couleurs prédéfinies par Twitter
// @namespace https://greasyfork.org/users/1135033
// ==/UserScript==



const style1 = document.createElement("style");
const style2 = document.createElement("style");
const colorPicker = document.createElement('input');
const colorPickerDesc = document.createElement('p')
const btnReset = document.createElement('button')
const head = document.head;
let color;
let rgbColor;

colorPicker.type = "color";
colorPicker.setAttribute('id', 'colorPicker');
colorPickerDesc.textContent = 'Replace the last color using the color pick to the one you want!'
colorPickerDesc.setAttribute('id', 'colorPickerDesc')
btnReset.textContent = 'Reset'
btnReset.setAttribute('id', 'btnReset')

btnReset.addEventListener('click', () => {
  localStorage.removeItem("color");
  localStorage.removeItem("rgbColor");
  changeColorTheme('changeColor')
})

if(document.querySelector('body').style.backgroundColor == 'rgb(0, 0, 0)' || document.querySelector('body').style.backgroundColor == 'rgb(21, 32, 43)'){
  colorPickerDesc.style.color = "white"
} else {
  colorPickerDesc.style.color = "black"
}

async function addColorPicker() {
  style1.innerHTML = `
    #colorPicker{
      padding: 0;
      margin-top: 10px;
      cursor: pointer;
    }
    #colorPickerDesc{
        position: absolute;
        right: 12px;
        width: 141px;
        top: -65px;
        text-align: right;
    }

    #btnReset{
      position: absolute;
      right: 29px;
      bottom: -7px;
    }
  `;

  const colorPickerParent = await document.querySelector('div[class="css-1dbjc4n r-18u37iz r-a2tzq0"]');
  if (colorPickerParent !== null) {
    head.appendChild(style1);
    colorPickerParent.appendChild(colorPicker);
    colorPickerParent.appendChild(colorPickerDesc)
    colorPickerParent.appendChild(btnReset)
    colorPicker.addEventListener('change', (e) => {
      changeColorTheme('addNewColor', e.target.value)
    })
    observer.disconnect();
    observer.observe(document, { subtree: true, childList: true });


  }
}

function changeColorTheme(order, color) {
  const fetchColorData = () => {
    fetch(`https://www.thecolorapi.com/id?hex=${color.replace("#", "")}`)
      .then(res => res.json())
      .then(data => {
        localStorage.setItem('rgbColor', `rgba(${data.rgb.r}, ${data.rgb.g},${data.rgb.b}`);
        localStorage.setItem('color', color);
        updateStyles();
      });
  }

  const updateStyles = () => {
    const color = localStorage.getItem('color');
    const rgbColor = localStorage.getItem('rgbColor');
    style2.innerHTML = `


     div[style="color: rgb(0, 186, 124);"]{
        color: ${color} !important;
     }


      div[style="border-color: rgb(0, 186, 124);"]{
        border-color: ${color} !important;
     }

     div[class="css-1dbjc4n r-1awozwy r-1xfd6ze r-18u37iz r-16y2uox r-hdaws3"]{
      background-color: ${rgbColor}, 0.3) !important;
     }

     div[class="css-1dbjc4n r-sdzlij r-15ce4ve r-tbmifm r-16eto9q"]{

      background-color: ${color} !important;
     }

     span[style="color: rgb(0, 186, 124);"]{
        color: ${color} !important;
     }

     a[style="color: rgb(0, 186, 124);"]{
        color: ${color} !important;
     }

     a[data-testid="SideNav_NewTweet_Button"]{
        background=color: ${color} !important;
     }

     svg[style="color: rgb(0, 186, 124);"]{
        color: ${color} !important;
     }

     .r-o6sn0f{
        color: ${color} !important;
     }


     circle[cx="16"]{
        stroke: ${color} !important;
     }

      .r-s224ru {
        background-color: ${color} !important;
      }

      .r-1iwjfv5 {
        background-color: ${rgbColor}, 0.9) !important;
      }


      .r-h7o7i8{
        background-color: ${rgbColor}, 0.3) !important;

      }


    `;

    head.appendChild(style2);
  }

  if (order === "addNewColor") {
    fetchColorData();
  } else if (order === "changeColor") {
    updateStyles();
  }

  observer.disconnect();
  observer.observe(document, { subtree: true, childList: true });
}


const observer = new MutationObserver(() => {
  const url = location.href;
  if (url === "https://twitter.com/settings/display") {
    addColorPicker();
  }
});


observer.observe(document, { subtree: true, childList: true });


changeColorTheme('changeColor');