☰

Simpleicons.org Dynamic Colors

Allows you to customize the color of the svg before download.

  1. // ==UserScript==
  2. // @name         Simpleicons.org Dynamic Colors
  3. // @namespace    https://github.com/appel/userscripts
  4. // @version      0.0.3
  5. // @description  Allows you to customize the color of the svg before download.
  6. // @author       Ap
  7. // @match        https://simpleicons.org/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     function isColorDark(hexcolor) {
  16.         const r = parseInt(hexcolor.substr(1, 2), 16);
  17.         const g = parseInt(hexcolor.substr(3, 2), 16);
  18.         const b = parseInt(hexcolor.substr(5, 2), 16);
  19.         const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  20.         return luminance < 0.5;
  21.     }
  22.  
  23.     function expandHex(hex) {
  24.         if (hex.length === 4) {
  25.             return "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
  26.         }
  27.         return hex;
  28.     }
  29.  
  30.     function addCustomColorButton() {
  31.         const iconColorButton = document.querySelector('#icon-color');
  32.         if (iconColorButton && !document.querySelector('.custom-color-btn')) {
  33.             const customColorButton = document.createElement('button');
  34.             customColorButton.innerText = 'Custom color';
  35.             customColorButton.classList.add('custom-color-btn');
  36.             customColorButton.style.cssText = "position:absolute;top:10px;right:10px;width:fit-content;font-family:var(--font-family-stylized);font-size:13px;color:var(--color-button-text);background:#000;border-radius:4px;padding:4px 8px;cursor:pointer;";
  37.             customColorButton.addEventListener('click', function () {
  38.                 const hexcode = prompt('Please enter hex code for color.');
  39.                 if (hexcode && /^#?([0-9A-Fa-f]{3}){1,2}$/.test(hexcode)) {
  40.                     let formattedHexcode = hexcode.startsWith("#") ? hexcode : `#${hexcode}`;
  41.                     formattedHexcode = expandHex(formattedHexcode);
  42.                     const downloadLink = document.querySelector('#icon-download-color-svg');
  43.                     if (downloadLink) {
  44.                         const svgFillRegex = /%23[0-9A-Fa-f]{6}/i;
  45.                         if (svgFillRegex.test(downloadLink.href)) {
  46.                             downloadLink.href = downloadLink.href.replace(svgFillRegex, `%23${formattedHexcode.slice(1)}`);
  47.                             downloadLink.setAttribute("download", downloadLink.getAttribute("download").replace("-color.svg", `-${formattedHexcode.slice(1)}.svg`));
  48.                         }
  49.                     }
  50.                     iconColorButton.innerText = formattedHexcode;
  51.                     iconColorButton.style.background = formattedHexcode;
  52.                     if (isColorDark(formattedHexcode)) {
  53.                         iconColorButton.style.color = "#ffffff";
  54.                     } else {
  55.                         iconColorButton.style.color = "#000000";
  56.                     }
  57.                 } else {
  58.                     alert('Invalid hex code. Please enter a valid hex color.');
  59.                 }
  60.             });
  61.             iconColorButton.insertAdjacentElement('afterend', customColorButton);
  62.         }
  63.     }
  64.  
  65.     const observer = new MutationObserver(addCustomColorButton);
  66.     observer.observe(document.body, { childList: true, subtree: true });
  67.  
  68.     addCustomColorButton();
  69.  
  70. })();