☰

Custom Color Twitter

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

  1. // ==UserScript==
  2. // @name        Custom Color Twitter
  3. // @name:fr     Custom Color Twitter
  4. // @match       https://twitter.com/*
  5. // @match       https://x.com/*
  6. // @grant       none
  7. // @version     1.26
  8. // @author      LOUDO
  9. // @license     MIT
  10. // @run-at      document-body
  11. // @description Allows you to set a custom color instead of the 6 predefined by Twitter
  12. // @description:fr Permet de définir une couleur personnalisée au lieu des 6 couleurs prédéfinies par Twitter
  13. // @namespace https://greatest.deepsurf.us/users/1135033
  14. // ==/UserScript==
  15.  
  16.  
  17.  
  18. const style1 = document.createElement("style");
  19. const style2 = document.createElement("style");
  20. const colorPicker = document.createElement('input');
  21. const colorPickerDesc = document.createElement('p')
  22. const btnReset = document.createElement('button')
  23. const head = document.head;
  24. let color;
  25. let rgbColor;
  26.  
  27. colorPicker.type = "color";
  28. colorPicker.setAttribute('id', 'colorPicker');
  29. colorPicker.value = localStorage.getItem('color');
  30. colorPickerDesc.textContent = 'Replace the last color using the color pick to the one you want!'
  31. colorPickerDesc.setAttribute('id', 'colorPickerDesc')
  32.  
  33.  
  34. btnReset.textContent = 'Reset'
  35. btnReset.setAttribute('id', 'btnReset')
  36.  
  37. btnReset.addEventListener('click', () => {
  38.   localStorage.removeItem("color");
  39.   localStorage.removeItem("rgbColor");
  40.   changeColorTheme('changeColor')
  41. })
  42.  
  43.  
  44. if(document.querySelector('body').style.backgroundColor == 'rgb(0, 0, 0)' || document.querySelector('body').style.backgroundColor == 'rgb(21, 32, 43)'){
  45.   colorPickerDesc.style.color = "white"
  46. } else {
  47.   colorPickerDesc.style.color = "black"
  48. }
  49.  
  50. async function addColorPicker() {
  51.   style1.innerHTML = `
  52.     #colorPicker{
  53.       padding: 0;
  54.       margin-top: 10px;
  55.       cursor: pointer;
  56.     }
  57.     #colorPickerDesc{
  58.         position: absolute;
  59.         right: 12px;
  60.         width: 141px;
  61.         top: -65px;
  62.         text-align: right;
  63.     }
  64.  
  65.     #btnReset{
  66.       position: absolute;
  67.       right: 29px;
  68.       bottom: -7px;
  69.     }
  70.   `;
  71.  
  72.   const colorPickerParent = await document.querySelector('div[class="css-175oi2r r-18u37iz r-a2tzq0"]');
  73.   if (colorPickerParent !== null) {
  74.     head.appendChild(style1);
  75.     colorPickerParent.appendChild(colorPicker);
  76.     colorPickerParent.appendChild(colorPickerDesc)
  77.     colorPickerParent.appendChild(btnReset)
  78.     colorPicker.addEventListener('change', (e) => {
  79.       changeColorTheme('addNewColor', e.target.value)
  80.     })
  81.     observer.disconnect();
  82.     observer.observe(document, { subtree: true, childList: true });
  83.  
  84.  
  85.   }
  86. }
  87.  
  88. function changeColorTheme(order, color) {
  89.   const fetchColorData = () => {
  90.       let hex = color.replace("#", "");
  91.       const r = parseInt(hex.substring(0, 2), 16);
  92.       const g = parseInt(hex.substring(2, 4), 16);
  93.       const b = parseInt(hex.substring(4, 6), 16);
  94.       localStorage.setItem('rgbColor', `rgba(${r}, ${g},${b}`);
  95.       localStorage.setItem('color', color);
  96.       updateStyles();
  97.  
  98.   }
  99.  
  100.   const updateStyles = () => {
  101.     const color = localStorage.getItem('color');
  102.     const rgbColor = localStorage.getItem('rgbColor');
  103.  
  104.     style2.innerHTML = `
  105.  
  106.      /* "Show More" text */
  107.      div[style*="color: rgb(0, 186, 124);"]:not(div[class="css-1rynq56 r-bcqeeo r-qvutc0 r-37j5jr r-a023e6 r-rjixqe r-16dba41 r-1awozwy r-6koalj r-1h0z5md r-o7ynqc r-clp7b1 r-3s2u2q"]){
  108.         color: ${color} !important;
  109.      }
  110.  
  111.      /* Outline */
  112.       div[style*="border-color: rgb(0, 186, 124);"]{
  113.         border-color: ${color} !important;
  114.      }
  115.  
  116.      /* Color line settings display */
  117.      div[style*="background-color: rgb(128, 221, 190);"]{
  118.       background-color: ${rgbColor}, 0.3) !important;
  119.      }
  120.  
  121.  
  122.      /* Random Element */
  123.      div[style*="background-color: rgb(0, 186, 124);"]{
  124.       background-color: ${color} !important;
  125.      }
  126.  
  127.  
  128.      /* Some random text */
  129.      span[style*="color: rgb(0, 186, 124);"]{
  130.          color: ${color} !important;
  131.      }
  132.  
  133.  
  134.      /* Circle settings display */
  135.  
  136.      div[class="css-1dbjc4n r-sdzlij r-15ce4ve r-tbmifm r-16eto9q"]{
  137.       background-color: ${color} !important;
  138.      }
  139.  
  140.     /* Link like hashtag or @*/
  141.     a[style*="color: rgb(0, 186, 124);"]{
  142.       color: ${color} !important;
  143.     }
  144.  
  145.     /* SVG color */
  146.      svg[style*="color: rgb(0, 186, 124);"]{
  147.         color: ${color} !important;
  148.      }
  149.  
  150.      /* Trend word */
  151.      .r-o6sn0f{
  152.         color: ${color} !important;
  153.      }
  154.  
  155.  
  156.     /* Circle Loading Beginning */
  157.      circle[cx="16"]{
  158.         stroke: ${color} !important;
  159.      }
  160.  
  161.      /* Circle tweeting */
  162.      circle[stroke="#00BA7C"]{
  163.         stroke: ${color} !important;
  164.      }
  165.  
  166.      /* Global color like tweet button, lines... */
  167.       .r-s224ru {
  168.         background-color: ${color} !important;
  169.       }
  170.  
  171.       /* Tweet button */
  172.  
  173.       a[data-testid="SideNav_NewTweet_Button"][style*="background-color: rgb(0, 186, 124);"]{
  174.          background-color: ${color} !important;
  175.       }
  176.  
  177.       a[data-testid="SideNav_NewTweet_Button"][style*="background-color: rgb(0, 186, 124);"]:hover{
  178.          background-color: ${rgbColor}, 0.9) !important ;
  179.       }
  180.  
  181.       a[href="/i/verified-choose"][style*="background-color: rgb(0, 186, 124);"]{
  182.           background-color: ${color} !important;
  183.       }
  184.  
  185.        /* Hover effect */
  186.       .r-1iwjfv5 {
  187.         background-color: ${rgbColor}, 0.9) !important ;
  188.       }
  189.  
  190.  
  191.       /* Rectangle Color */
  192.       .r-h7o7i8{
  193.         background-color: ${rgbColor}, 0.3) !important;
  194.  
  195.       }
  196.  
  197.       /* Outline Get Verified Section */
  198.       .r-156p8rw{
  199.          border-color: ${color} !important;
  200.       }
  201.  
  202.  
  203.  
  204.       /* More tweet click */
  205.       .r-pxc13i{
  206.          background-color: ${rgbColor}, 0.9) !important;
  207.       }
  208.  
  209.       /* Border right color selected */
  210.       .r-jgqioj{
  211.           border-right-color: ${color} !important;
  212.       }
  213.  
  214.  
  215.       /* Hover effect on svg */
  216.       .r-15azkrj{
  217.           background-color: ${rgbColor}, 0.1) !important;
  218.       }
  219.  
  220.       /* Message background color when clicked */
  221.       .r-721b40{
  222.           background-color: ${color} !important;
  223.       }
  224.  
  225.  
  226.       /* Background color click 3 points on message */
  227.       .r-1x669os{
  228.           background-color: ${rgbColor}, 0.2) !important;
  229.       }
  230.  
  231.       svg[style="background-color: rgb(0, 186, 124);"]{
  232.          background-color: transparent !important;
  233.          color: white !important;
  234.       }
  235.  
  236.  
  237.     `;
  238.  
  239.     head.appendChild(style2);
  240.   }
  241.  
  242.   if (order === "addNewColor") {
  243.     fetchColorData();
  244.   } else if (order === "changeColor") {
  245.     updateStyles();
  246.   }
  247.  
  248.   observer.disconnect();
  249.   observer.observe(document, { subtree: true, childList: true });
  250. }
  251.  
  252.  
  253. const observer = new MutationObserver(() => {
  254.   const url = location.href;
  255.   if (url === "https://twitter.com/settings/display") {
  256.     addColorPicker();
  257.   }
  258. });
  259.  
  260.  
  261. observer.observe(document, { subtree: true, childList: true });
  262.  
  263.  
  264. changeColorTheme('changeColor');
  265.