☰

Simpleicons.org Dynamic Colors

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

// ==UserScript==
// @name         Simpleicons.org Dynamic Colors
// @namespace    https://github.com/appel/userscripts
// @version      0.0.3
// @description  Allows you to customize the color of the svg before download.
// @author       Ap
// @match        https://simpleicons.org/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    function isColorDark(hexcolor) {
        const r = parseInt(hexcolor.substr(1, 2), 16);
        const g = parseInt(hexcolor.substr(3, 2), 16);
        const b = parseInt(hexcolor.substr(5, 2), 16);
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance < 0.5;
    }

    function expandHex(hex) {
        if (hex.length === 4) {
            return "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
        }
        return hex;
    }

    function addCustomColorButton() {
        const iconColorButton = document.querySelector('#icon-color');
        if (iconColorButton && !document.querySelector('.custom-color-btn')) {
            const customColorButton = document.createElement('button');
            customColorButton.innerText = 'Custom color';
            customColorButton.classList.add('custom-color-btn');
            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;";
            customColorButton.addEventListener('click', function () {
                const hexcode = prompt('Please enter hex code for color.');
                if (hexcode && /^#?([0-9A-Fa-f]{3}){1,2}$/.test(hexcode)) {
                    let formattedHexcode = hexcode.startsWith("#") ? hexcode : `#${hexcode}`;
                    formattedHexcode = expandHex(formattedHexcode);
                    const downloadLink = document.querySelector('#icon-download-color-svg');
                    if (downloadLink) {
                        const svgFillRegex = /%23[0-9A-Fa-f]{6}/i;
                        if (svgFillRegex.test(downloadLink.href)) {
                            downloadLink.href = downloadLink.href.replace(svgFillRegex, `%23${formattedHexcode.slice(1)}`);
                            downloadLink.setAttribute("download", downloadLink.getAttribute("download").replace("-color.svg", `-${formattedHexcode.slice(1)}.svg`));
                        }
                    }
                    iconColorButton.innerText = formattedHexcode;
                    iconColorButton.style.background = formattedHexcode;
                    if (isColorDark(formattedHexcode)) {
                        iconColorButton.style.color = "#ffffff";
                    } else {
                        iconColorButton.style.color = "#000000";
                    }
                } else {
                    alert('Invalid hex code. Please enter a valid hex color.');
                }
            });
            iconColorButton.insertAdjacentElement('afterend', customColorButton);
        }
    }

    const observer = new MutationObserver(addCustomColorButton);
    observer.observe(document.body, { childList: true, subtree: true });

    addCustomColorButton();

})();