☰

Custom Color Twitter

Allows you to set a custom color instead of the 6 predefined by Twitter

目前為 2023-07-27 提交的版本，檢視 最新版本。

// ==UserScript==
// @name        Custom Color Twitter
// @name:fr     Custom Color Twitter
// @match       https://twitter.com/*
// @match       https://x.com/*
// @grant       none
// @version     1.20
// @author      LOUDO
// @license     MIT
// @run-at      document-body
// @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://gf.zukizuki.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')
})

console.log(document.querySelector('body').style.backgroundColor)

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 = () => {
      let hex = color.replace("#", "");
      const r = parseInt(hex.substring(0, 2), 16);
      const g = parseInt(hex.substring(2, 4), 16);
      const b = parseInt(hex.substring(4, 6), 16);
      localStorage.setItem('rgbColor', `rgba(${r}, ${g},${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;
    }

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

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


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

     circle[stroke="#00BA7C"]{
        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;

      }

      .r-156p8rw{
         border-color: ${color} !important;
      }


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


    `;

    head.appendChild(style2);
    const i = setInterval(()=>{
    const tweet = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]')
    if(tweet !== null){
        tweet.style.backgroundColor = color;
        clearInterval(i);
    }
    });
  }

  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');