微信读书底色修改

修改微信读书的背景颜色，提升阅读体验
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         微信读书底色修改
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  修改微信读书的背景颜色，提升阅读体验
// @author       木子火玄
// @match        https://weread.qq.com/*
// @icon         https://weread.qq.com/favicon.ico
// @license      GNU GPLv3
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 默认背景色
    const DEFAULT_BACKGROUND_COLOR = '#FFF9E6';
    let isColorEnabled = GM_getValue('isColorEnabled', true);
 
    // 判断颜色是否为浅色
    function isLightColor(color) {
        // 移除#符号并转换为RGB
        const hex = color.replace('#', '');
        const r = parseInt(hex.substr(0, 2), 16);
        const g = parseInt(hex.substr(2, 2), 16);
        const b = parseInt(hex.substr(4, 2), 16);
 
        // 计算亮度 (根据人眼对不同颜色的敏感度)
        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
 
        // 亮度大于125认为是浅色
        return brightness > 125;
    }
 
    // 应用阅读模式样式
    function applyReadingStyle(backgroundColor) {
        // 检查是否已存在样式标签
        let styleTag = document.getElementById('reading-mode-style');
        if (!styleTag) {
            styleTag = document.createElement('style');
            styleTag.id = 'reading-mode-style';
            document.head.appendChild(styleTag);
        }
 
        // 计算文本颜色（根据背景色亮度）
        const isLightBackground = isLightColor(backgroundColor);
        const textColor = isLightBackground ? '#333333' : '#ffffff';
 
        // 设置CSS规则
        styleTag.textContent = `
            body {
                background-color: ${backgroundColor} !important;
                color: ${textColor} !important;
            }
 
            /* 保持文本容器的背景色，但确保文本可见 */
            .post-content, .readerTopBar, .app_content {
                background-color: ${backgroundColor} !important;
                color: ${textColor} !important;
            }
 
            /* 确保链接文本可见 */
            a {
                color: ${isLightBackground ? '#0066cc' : '#66b3ff'} !important;
            }
        `;
    }
 
    // 初始化背景色
    function initBackgroundColor() {
        const backgroundColor = GM_getValue('backgroundColor', DEFAULT_BACKGROUND_COLOR);
        if (isColorEnabled) {
            applyReadingStyle(backgroundColor);
        }
    }
 
    // 注册(不可用)菜单命令
    function registerMenu() {
        GM_registerMenuCommand('设置背景颜色', function() {
            const currentColor = GM_getValue('backgroundColor', DEFAULT_BACKGROUND_COLOR);
            const newColor = prompt('请输入新的背景颜色（十六进制格式，如：#FFF9E6）：', currentColor);
            if (newColor && /^#[0-9A-Fa-f]{6}$/.test(newColor)) {
                GM_setValue('backgroundColor', newColor);
                applyReadingStyle(newColor);
            }
        });
    }
 
    // 添加颜色切换按钮
    function addColorToggleButton() {
        const readerControls = document.querySelector('.readerControls');
        if (!readerControls) return;
 
        const toggleButton = document.createElement('button');
        toggleButton.title = '切换背景颜色';
        toggleButton.className = 'readerControls_item cg_color';
        toggleButton.innerHTML = '<span class="icon"></span>';
 
        // 添加按钮样式
        const style = document.createElement('style');
        style.textContent = `
            .cg_color .icon {
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>');
                width: 24px;
                height: 24px;
                display: inline-block;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                transition: opacity 0.2s ease;
                opacity: 0.7;
            }
            .cg_color:hover .icon {
                opacity: 1;
            }
            .cg_color.active .icon {
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230066cc"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>');
            }
        `;
        document.head.appendChild(style);
 
        // 设置按钮状态
        if (isColorEnabled) {
            toggleButton.classList.add('active');
        }
 
        // 添加点击事件
        toggleButton.addEventListener('click', function() {
            isColorEnabled = !isColorEnabled;
            GM_setValue('isColorEnabled', isColorEnabled);
 
            if (isColorEnabled) {
                toggleButton.classList.add('active');
                const backgroundColor = GM_getValue('backgroundColor', DEFAULT_BACKGROUND_COLOR);
                applyReadingStyle(backgroundColor);
            } else {
                toggleButton.classList.remove('active');
                // 移除自定义样式
                const styleTag = document.getElementById('reading-mode-style');
                if (styleTag) {
                    styleTag.remove();
                }
            }
        });
 
        readerControls.appendChild(toggleButton);
    }
 
    // 页面加载完成后执行
    window.addEventListener('load', function() {
        initBackgroundColor();
        registerMenu();
        addColorToggleButton();
    });
})();
欢迎访问Greasy Fork镜像
