微信读书网页端阅读样式优化、阅读区背景色调整。

布吉岛葫芦娃

本人经常在电脑和手机上阅读，需要多端同步功能，但是网页版的微信读书背景色不能更换，非常不符合自己的阅读习惯
于是通过想通过油猴脚本定制自己喜欢的阅读样式，但又对油猴代码编写一窍不通，于是在网上搜索从果壳剥壳找到一版代码，
但导入油猴后阅读区无法调整阅读区的颜色且调整颜色方式太复杂，随将其代码导入文心一言中进行优化，增加了悬浮按钮方便快速调整背景颜色，阅读区的背景色也能调整了。
目前使用还行，在论坛也没找到相关的代码分享，于是将代码分享，顺便请教一下为啥该代码不能将背景色进行网页全覆盖。


使用截图如下：

悬浮按钮

背景色调整

使用后效果

经文心一言调整后代码如下

[Python] 纯文本查看 复制代码

// ==UserScript==// @name         微信读书2026定制美化
// @Icon         https://weread.qq.com/favicon.ico
// @namespace    https://greasyfork.org/users/878514
// @version      20260327.2
// @description  WeReadSytle适配新版网页支持深色模式
// @AuThor       Velens
// @match        https://weread.qq.com/web/reader/*
// @require      https://code.jquery.com/jquery-3.7.1.min.js
// @license      MIT
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

// 配置参数
const widths = [
    {width:"100%",align_items:"flex-end",margin_left:"45.5%"},
    {width:"80%",align_items:"center",margin_left:"41.5%"},
    {width:"默认",align_items:"flex-start",margin_left:""}
];
const footers = [
    {titlet:"隐藏",padding:"20px"},
    {titlet:"显示",padding:"40px"},
    {titlet:"默认",padding:""}
];
const scrollbars = [
    {titles:"滚动条：隐藏",displays:"none"},
    {titles:"滚动条：显示",displays:"auto"}
];
const colors = [
    {titlec:"豆沙绿",RGB:"#C7EDCC"},{titlec:"杏仁黄",RGB:"#FAF9DE"},
    {titlec:"秋叶褐",RGB:"#FFF2E2"},{titlec:"胭脂红",RGB:"#FDE6E0"},
    {titlec:"海天蓝",RGB:"#DCE2F1"},{titlec:"葛巾紫",RGB:"#E9EBFE"},
    {titlec:"极光灰",RGB:"#EAEAEF"},{titlec:"青草绿",RGB:"#E3EDCD"},
    {titlec:"银河白",RGB:"#FFFFFF"}
];
const themes = [
    {titlet:"深色模式",dark:true},
    {titlet:"浅色模式",dark:false},
    {titlet:"跟随系统",dark:"auto"}
];
// 本地存储读取
let iw = GM_getValue("numw",0),
    io = GM_getValue("numo",0),
    is = GM_getValue("nums",0),
    ic = GM_getValue("numc",0),
    it = GM_getValue("numt",2),
    flagt = GM_getValue("flagt",true);

// 样式初始化
function initStyles() {
    // 宽度设置
    if(widths[iw].width !== "默认"){
        GM_addStyle(`.readerContent .app_content, .readerTopBar {max-width: ${widths[iw].width} !important;}`);
        GM_addStyle(`.readerControls {align-items: ${widths[iw].align_items} !important;}`);
        GM_addStyle(`.readerControls {margin-left: ${widths[iw].margin_left} !important;}`);
    }
    // 页脚设置
    if(footers[io].titlet !== "默认"){
        GM_addStyle(`.readerFooter {padding: ${footers[io].padding};}`);
        GM_addStyle(".readerFooter_action {font-weight: 600;}");
    }
    if(footers[io].titlet === "隐藏"){
        GM_addStyle(`.wr_whiteTheme .readerFooter_action {background-color: ${colors[ic].RGB} !important;}`);
    }
    // 滚动条设置
    GM_addStyle(`body::-webkit-scrollbar {display: ${scrollbars[is].displays} !important;}`);
    // 背景色设置（全屏覆盖）
    GM_addStyle(`
        :root, body, .wr_whiteTheme, .readerContent .app_content,
        .readerTopBar, .readerControls_fontSize, .readerControls_item,
        .readerChapterContent, .navBarOffset {
            background-color: ${colors[ic].RGB} !important;
        }
    `);
    // 主题设置
    if(themes[it].dark !== "auto"){
        const themeValue = themes[it].dark ? "dark" : "light";
        GM_addStyle(`:root { color-scheme: ${themeValue}; }`);
        GM_addStyle(`.wr_whiteTheme { --bg-color: ${themes[it].dark ? "#1E1E1E" : colors[ic].RGB}; }`);
    }
}

// 创建悬浮控制面板
function createControlPanel() {
    const panel = document.createElement('div');
    panel.id = 'customControlPanel';
    panel.style.cssText = `
        position: fixed; top: 100px; right: 20px; z-index: 9999;
        background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        padding: 15px; min-width: 180px;
    `;
    // 背景色选择器
    const colorSelect = document.createElement('select');
    colors.forEach((color, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = color.titlec;
        option.selected = index === ic;
        colorSelect.appendChild(option);
    });
    colorSelect.addEventListener('change', (e) => {
        ic = parseInt(e.target.value);
        GM_setValue("numc", ic);
        initStyles();
    });
    panel.appendChild(createLabeledElement('背景色:', colorSelect));

    // 宽度选择器
    const widthSelect = document.createElement('select');
    widths.forEach((width, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = width.width;
        option.selected = index === iw;
        widthSelect.appendChild(option);
    });
    widthSelect.addEventListener('change', (e) => {
        iw = parseInt(e.target.value);
        GM_setValue("numw", iw);
        initStyles();
    });
    panel.appendChild(createLabeledElement('宽度:', widthSelect));

    // 主题切换
    const themeSelect = document.createElement('select');
    themes.forEach((theme, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = theme.titlet;
        option.selected = index === it;
        themeSelect.appendChild(option);
    });
    themeSelect.addEventListener('change', (e) => {
        it = parseInt(e.target.value);
        GM_setValue("numt", it);
        initStyles();
    });
    panel.appendChild(createLabeledElement('主题:', themeSelect));

    // 沉浸式阅读开关
    const immersionSwitch = document.createElement('input');
    immersionSwitch.type = 'checkbox';
    immersionSwitch.checked = flagt;
    immersionSwitch.addEventListener('change', (e) => {
        flagt = e.target.checked;
        GM_setValue("flagt", flagt);
        location.reload();
    });
    panel.appendChild(createLabeledElement('沉浸式:', immersionSwitch));

    document.body.appendChild(panel);

    // 面板拖动功能
    let isDragging = false, startX, startY, startLeft, startTop;
    panel.addEventListener('mousedown', (e) => {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        startLeft = panel.offsetLeft;
        startTop = panel.offsetTop;
        panel.style.cursor = 'grabbing';
    });
    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        panel.style.left = `${startLeft + dx}px`;
        panel.style.top = `${startTop + dy}px`;
    });
    document.addEventListener('mouseup', () => {
        isDragging = false;
        panel.style.cursor = 'grab';
    });
}
// 辅助函数：创建带标签的元素
function createLabeledElement(labelText, element) {
    const container = document.createElement('div');
    container.style.marginBottom = '12px';
    const label = document.createElement('label');
    label.style.display = 'inline-block';
    label.style.width = '60px';
    label.style.fontSize = '14px';
    label.textContent = labelText;
    element.style.padding = '4px 8px';
    element.style.fontSize = '14px';
    container.appendChild(label);
    container.appendChild(element);
    return container;
}

// 初始化调用
initStyles();
createControlPanel();

// 原滚动事件处理
if(flagt){
    $(window).scroll(function(){
        const scroll = $(this).scrollTop();
        const paddingtop = $(".navBarOffset").css("padding-top");
        const lineheight = $(".readerHeaderButton").css("line-height");
        const scrollTop = parseFloat(paddingtop) + parseFloat(lineheight);
        const readerTopBar = document.getElementsByClassName("readerTopBar")[0];
        const readerControls = document.getElementsByClassName("readerControls")[0];
        if(scroll <= scrollTop){
            readerTopBar.style.display = "flex";
            readerControls.style.display = "flex";
        }else{
            readerTopBar.style.display = "none";
            readerControls.style.display = "none";
        }
    });
}