color picker figuccio inspirato ha (Eye-protection Mode)

Color picker con box value hex
// ==UserScript==
// @name          color picker figuccio inspirato ha (Eye-protection Mode)
// @namespace     https://greasyfork.org/users/237458
// @version       2.4
// @description   Color picker con box value hex
// @author        figuccio
// @match         https://*.facebook.com/*
// @require       http://code.jquery.com/jquery-latest.js
// @require       https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @grant         GM_getValue
// @grant         GM_setValue
// @grant         GM_addStyle
// @grant         GM_registerMenuCommand
// @icon          https://facebook.com/favicon.ico
// @run-at        document-start
// @noframes
// @license       MIT
// ==/UserScript==

(function() {
    'use strict';

    var $ = window.jQuery.noConflict();
    var body = document.body;
    var style = "position:fixed; top:0px;left:720px;z-index:99999;";
    var box = document.createElement("div");
    box.id = "myMenu";
    box.style = style;
    $(box).draggable();
    body.appendChild(box);

    // Mostra/nascondi il menu
    function toggleMenu() {
        var box = document.getElementById('myMenu');
        box.style.display = (box.style.display !== 'none') ? 'none' : 'block';
    }

    GM_registerMenuCommand("Nascondi/Mostra Box", toggleMenu);

    var userData = { color: 'figuccio' };
    var myColor = /^#+\w+$/.test(GM_getValue(userData.color)) ? GM_getValue(userData.color) : "#980000";

    // Salva i dati personalizzati
    window.setTimeout(saveSetting, 3000);
    function saveSetting() {
        GM_setValue(userData.color, myColor);
        $('div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);
        // Chiude il box dopo aver salvato il colore e lo riapre dopo 3 secondi
        toggleMenu();
        window.setTimeout(toggleMenu, 3000);
    }

    // Imposta lo stile CSS degli elementi nel menu
    GM_addStyle(`
        #myMenu {
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;
            font-size: 14px;
            z-index: 2147483648;
        }

        #myMenu .button {
            padding: 3px 6px;
            line-height: 16px;
            margin-top: 6px;
            display: inline-block;
            border: 1px solid #999;
            border-radius: 3px;
            cursor: pointer;
        }

        #colorspan {
            margin-left: 0px;
            margin-bottom: -19px;
            color: lime;
            background-color: brown;
            border: 1px solid yellow;
            border-radius: 5px;
        }

        #setui {
            width: auto;
            height: 25px;
            margin-top: -14px;
            margin-left: -4px;
            margin-right: -4px;
            margin-bottom: 0px;
            border-width: 1px;
            border-style: none;
            color: lime;
        }

        #colorinput {
            margin-left: 4px;
            margin-top: 12px;
            background-color: #3b3b3b;
            color: red;
            border: 1px solid yellow;
            border-radius: 5px;
            height: 20px;
        }

        input[type="datetime-local"] {
            background: #3b3b3b;
            color: lime;
            border: 1px solid yellow;
            border-radius: 5px;
            margin: 0px;
            text-align: center;
            font-size: px;
        }

        .button {
            padding: 2px 2px;
            margin-top: -19px;
            display: inline-block;
            border: 1px solid yellow;
            border-radius: 3px;
            cursor: pointer;
            background: red;
        }
    `);

    setInterval(function() {
        let today = new Date();
        today.setMinutes(today.getMinutes() - today.getTimezoneOffset());
        document.getElementById('datePicker').value = today.toISOString().slice(0, -1);
    }, 70);

    // Elemento HTML all'interno del div
    box.innerHTML = `
        <fieldset style="background:#3b3b3b; border:2px solid red;color:lime;border-radius:7px;text-align:;height:35px;width:300px;">
            <legend>Time<input readonly id="datePicker" type="datetime-local" /></legend>
            <div id=setui>
                <div id="seletcolor">
                    Hex <button id="colorspan">${myColor}</button> Color
                    <input type="color" list="colors" id="colorinput" value="${myColor}" title="color picker">
                    <span class="button" title="memorizza" id='save'>salva</span>
                    <span class="button" title="chiudi" id='close'>X</span>
                </div>
            </div>
        </fieldset>
    `;

    // Serie di elementi get
    var colorSpan = document.querySelector('#colorspan');
    var colorInput = document.querySelector('#colorinput');
    var saveButton = document.querySelector('#save');
    var closeButton = document.querySelector('#close');

    // Aggiunta di eventi di ascolto
    colorInput.addEventListener('input', function(event) {
        myColor = event.target.value;
        colorSpan.innerHTML = event.target.value;
        $('div[aria-label="Facebook"][role="navigation"]').css("background-color", myColor);
    }, false);

    saveButton.addEventListener('click', saveSetting, false);
    closeButton.addEventListener('click', toggleMenu, false);
})();