Customize Selection Colors - 自定义选中颜色

Change the color of selected text across all websites with high priority - 修改选中内容的颜色

// ==UserScript==
// @name         Customize Selection Colors - 自定义选中颜色
// @version      1.0
// @description  Change the color of selected text across all websites with high priority - 修改选中内容的颜色
// @author       ZiLite
// @license      MIT
// @match        *://*/*
// @namespace    https://greasyfork.org/users/1131465
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @icon         https://m.qpic.cn/psc?/V10YE8Jx247iW0/ruAMsa53pVQWN7FLK88i5l0iQp8*LN4Ex9R89cVA*vLporiTR32ItvbXakCw6YMUwwgtNrjoW*nPlcH09oy5V*fZVXzqAK3MXUUB50*zJ7k!/b&bo=OAQ4BAAAAAADByI!&rf=viewer_4
// ==/UserScript==

(function() {
    'use strict';

    // 添加默认样式
    function addCustomStyles(textColor, bgColor) {
        GM_addStyle(`
            body ::selection {
                color: ${textColor} !important;
                background: ${bgColor} !important;
            }
            body ::-moz-selection {
                color: ${textColor} !important;
                background: ${bgColor} !important;
            }
        `);
    }

    // 获取保存的颜色值
    const defaultTextColor = '#fff';
    const defaultBgColor = '#FF490D';
    const textColor = GM_getValue('textColor', defaultTextColor);
    const bgColor = GM_getValue('bgColor', defaultBgColor);

    addCustomStyles(textColor, bgColor);

    // 创建设置面板
    let settingsPanel = null;

    function createSettingsPanel() {
        if (settingsPanel) return; // 防止打开多个设置面板

        const panel = document.createElement('div');
        const titleFontSize = 24; // 标题字体大小
        const fontSize = titleFontSize * 0.618; // 内容字体大小，黄金比例
        panel.style.position = 'fixed';
        panel.style.top = '50%';
        panel.style.left = '50%';
        panel.style.transform = 'translate(-50%, -50%)';
        panel.style.padding = '20px';
        panel.style.width = '450px';
        panel.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; // 透明度降低20%
        panel.style.border = '1px solid #ccc';
        panel.style.borderRadius = '10px';
        panel.style.zIndex = '9999';
        panel.style.fontSize = `${fontSize}px`;
        panel.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.5)';
        panel.style.fontFamily = 'Segoe UI, Arial, sans-serif';
        panel.style.textAlign = 'center';
        panel.style.backdropFilter = 'blur(10px)'; // 实时背景模糊效果

        panel.innerHTML = `
            <h2 style="margin-top: 0; margin-bottom: 20px; color: #000; font-size: ${titleFontSize}px;">选中颜色设置面板</h2>
            <div style="margin-bottom: 20px; color: #000;">
                <div>文本颜色设置:</div>
                <input type="color" id="textColor" value="${textColor}" style="margin-top: 10px; width: 50px; height: 50px; border: none; cursor: pointer;">
            </div>
            <div style="margin-bottom: 20px; color: #000;">
                <div>背景颜色设置:</div>
                <input type="color" id="bgColor" value="${bgColor}" style="margin-top: 10px; width: 50px; height: 50px; border: none; cursor: pointer;">
            </div>
            <div>
                <button id="saveBtn" style="margin-right: 10px; padding: 10px 20px; background-color: #FF490D; color: #fff; border: none; border-radius: 5px; font-size: ${fontSize}px;">保存</button>
                <button id="closeBtn" style="padding: 10px 20px; background-color: #f2f2f2; color: #000; border: none; border-radius: 5px; font-size: ${fontSize}px;">关闭</button>
            </div>
            <p style="text-align: center; margin-top: 20px; font-size: ${fontSize * 0.5}px; color: #666;">By ZiLite (=╹ヮ╹=)</p>
        `;

        document.body.appendChild(panel);
        settingsPanel = panel;

        // 警告提示框
        const warning = document.createElement('div');
        warning.id = 'warning';
        warning.style.position = 'fixed';
        warning.style.top = 'calc(50% + 250px)'; // 设置面板底部下方
        warning.style.left = '50%';
        warning.style.transform = 'translateX(-50%)';
        warning.style.backgroundColor = '#ffcc00';
        warning.style.color = '#000';
        warning.style.borderRadius = '15px';
        warning.style.padding = '10px';
        warning.style.marginTop = '10px';
        warning.style.fontSize = `${fontSize * 0.8}px`;
        warning.style.display = 'none';
        warning.style.zIndex = '9999';
        warning.textContent = '⚠️此设置可能会导致无法正常阅读';
        document.body.appendChild(warning);

        // 颜色选择器事件处理
        document.getElementById('textColor').addEventListener('click', function(event) {
            event.stopPropagation(); // 阻止冒泡，防止点击周围空白处也触发事件
        });
        document.getElementById('bgColor').addEventListener('click', function(event) {
            event.stopPropagation(); // 阻止冒泡，防止点击周围空白处也触发事件
        });

        // 添加颜色变化的监听器
        function checkColorContrast() {
            const newTextColor = document.getElementById('textColor').value;
            const newBgColor = document.getElementById('bgColor').value;

            // 简单对比算法，判断颜色是否接近
            const textRGB = parseInt(newTextColor.slice(1), 16);
            const bgRGB = parseInt(newBgColor.slice(1), 16);
            const rDiff = Math.abs((textRGB >> 16) - (bgRGB >> 16));
            const gDiff = Math.abs(((textRGB >> 8) & 0xff) - ((bgRGB >> 8) & 0xff));
            const bDiff = Math.abs((textRGB & 0xff) - (bgRGB & 0xff));
            const threshold = 100; // 加大颜色相似度的判断阈值

            if (rDiff < threshold && gDiff < threshold && bDiff < threshold) {
                warning.style.display = 'block';
            } else {
                warning.style.display = 'none';
            }
        }

        document.getElementById('textColor').addEventListener('input', checkColorContrast);
        document.getElementById('bgColor').addEventListener('input', checkColorContrast);

        document.getElementById('saveBtn').addEventListener('click', function() {
            const newTextColor = document.getElementById('textColor').value;
            const newBgColor = document.getElementById('bgColor').value;

            GM_setValue('textColor', newTextColor);
            GM_setValue('bgColor', newBgColor);

            // 重新应用新样式
            addCustomStyles(newTextColor, newBgColor);

            // 反馈保存成功
            alert('颜色已保存！');
        });

        document.getElementById('closeBtn').addEventListener('click', function() {
            document.body.removeChild(panel);
            document.body.removeChild(warning);
            settingsPanel = null;
        });

        // 防止点击面板以外的地方关闭面板
        panel.addEventListener('click', function(event) {
            event.stopPropagation();
        });

        document.body.addEventListener('click', function() {
            if (settingsPanel) {
                document.body.removeChild(settingsPanel);
                document.body.removeChild(warning);
                settingsPanel = null;
            }
        });

        // 初始化颜色对比检查
        checkColorContrast();
    }

    // 注册菜单命令
    GM_registerMenuCommand('设置选中颜色', createSettingsPanel);
})();