微信读书

修改背景颜色、字体颜色，阅读时宽屏，隐藏按钮和菜单
Wrap lines
// ==UserScript==
// @name         微信读书
// @namespace    http://tampermonkey.net/
// @version      0.46
// @description  修改背景颜色、字体颜色，阅读时宽屏，隐藏按钮和菜单
// @author       Oscar
// @match        https://weread.qq.com/web/reader/*
// @license      AGPL License
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(() => {
    /* 1. 预设与持久化 */
    const BG = ['#FFFFFF', '#F9F3E3', '#E8F5E9', '#000000'];
    const FG = ['#FFFFFF', '#0A1F44', '#39FF14'];
    let bg = GM_getValue('wr_bgColor') || BG[0];
    let fg = GM_getValue('wr_fontColor') || FG[1];
    let useDefaultFg = GM_getValue('wr_useDefaultFg') || false;

    /* 2. 颜色变量样式 */
    let styleRules = `
    :root{--wr-bg:${bg};${!useDefaultFg ? `--wr-fg:${fg}` : ''}}
    .wr_whiteTheme .readerContent .app_content,
    .wr_whiteTheme .wr_horizontalReader .readerChapterContent,
    .wr_whiteTheme .wr_horizontalReader .readerControls_fontSize {
        background: var(--wr-bg) !important;
        ${!useDefaultFg ? 'color: var(--wr-fg) !important;' : ''}
    }

    .wr_whiteTheme .readerContent .app_content * ,
    .wr_whiteTheme .wr_horizontalReader .readerChapterContent * ,
    .wr_whiteTheme .wr_horizontalReader .readerControls_fontSize * {
        ${!useDefaultFg ? 'color: var(--wr-fg) !important;' : ''}
    }
`;

    GM_addStyle(styleRules);

    /* 3. 固定样式 */
    GM_addStyle(`
    #tm{font:14px sans-serif;color:#333;line-height:1.4}
    #tm .ttl{margin:6px 0 4px;font-weight:600}
    #tm .row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
    #tm .sw{width:24px;height:24px;border:1px solid #aaa;cursor:pointer}
    #tm .sw:hover{outline:2px solid #888}
    #tm input[type=color]{width:24px;height:24px;border:1px solid #aaa;padding:0;cursor:pointer}
    #tm .ok{margin-left:auto;padding:2px 12px;font-size:13px;cursor:pointer;border-radius:4px;border:1px solid #3e8ef7;background:#3e8ef7;color:#fff;transition:.15s}
    #tm .ok:hover{background:#66a9ff}
    #tm .ok:active{background:#2e7be6}
    .cp .icon{font-size:28px;display:flex;justify-content:center;align-items:center;width:100%;height:100%}
    img.wr_readerImage_opacity{opacity:.8!important}
    .readerControls{margin-left:calc(50% - 60px)!important}
    .app_content,.readerTopBar{max-width:100%!important}
    .readerControls,.readerTopBar{opacity:0;transition:opacity .2s}
    .readerControls:hover,.readerTopBar:hover,.readerControls.tm-show{opacity:1!important}
    .readerCatalog,.readerAIChatPanel,.readerNotePanel{left:unset!important;right:0!important}
  `);

    /* 4. 轮询等待底栏 */
    let attempts = 0;
    const iv = setInterval(() => {
        const ctl = document.querySelector('.readerControls');
        if (ctl) {
            clearInterval(iv);
            try { init(ctl); } catch (err) { console.error('[取色面板] 初始化失败:', err); }
        } else if (++attempts > 15) {
            clearInterval(iv);
        }
    }, 200);

    /* 5. 初始化面板 */
    function init(controls) {
        const btn = document.createElement('button');
        btn.className = 'readerControls_item cp';
        btn.title = '取色';
        btn.innerHTML = '<span class="icon">🎨</span>';
        controls.prepend(btn);

        const panel = document.createElement('div');
        panel.id = 'tm';
        panel.style.cssText = 'display:none;position:fixed;width:220px;z-index:9999;background:#fff;border:1px solid #ccc;border-radius:6px;padding:6px';
        panel.innerHTML = `
      <div class="ttl">背景色</div>
      <div class="row">
        ${BG.map(c => `<div class="sw b" data-c="${c}" style="background:${c}"></div>`).join('')}
        <label style="display:flex;align-items:center;gap:4px">自定义:<input type="color" class="cb" value="${bg}"></label>
      </div>
      <div class="ttl">字体色</div>
      <div class="row">
        <div class="sw f default" data-default="true" title="默认字体色" style="background:repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 10px 10px"></div>
        ${FG.map(c => `<div class="sw f" data-c="${c}" style="background:${c}"></div>`).join('')}
        <label style="display:flex;align-items:center;gap:4px">自定义:<input type="color" class="cf" value="${fg}"></label>
      </div>
      <div class="row"><button class="ok">应用</button></div>`;
        document.body.append(panel);

        const cBg = panel.querySelector('.cb');
        const cFg = panel.querySelector('.cf');

        const show = () => { locate(); panel.style.display = 'block'; controls.classList.add('tm-show'); };
        const hide = () => { panel.style.display = 'none'; controls.classList.remove('tm-show'); };
        btn.onclick = e => { e.stopPropagation(); panel.style.display === 'block' ? hide() : show(); };
        document.addEventListener('click', e => {
            if (panel.style.display === 'block' && !panel.contains(e.target) && !btn.contains(e.target)) hide();
        }, true);

        panel.addEventListener('click', e => {
            const sw = e.target.closest('.sw');
            if (sw) {
                if (sw.classList.contains('b')) {
                    bg = sw.dataset.c;
                    cBg.value = bg;
                } else {
                    if (sw.dataset.default) {
                        useDefaultFg = true;
                        fg = '';
                    } else {
                        useDefaultFg = false;
                        fg = sw.dataset.c;
                        cFg.value = fg;
                    }
                }
                return;
            }
            if (e.target.classList.contains('ok')) {
                GM_setValue('wr_bgColor', bg);
                GM_setValue('wr_fontColor', fg);
                GM_setValue('wr_useDefaultFg', useDefaultFg);

                document.documentElement.style.setProperty('--wr-bg', bg);
                if (!useDefaultFg) {
                    document.documentElement.style.setProperty('--wr-fg', fg);
                } else {
                    document.documentElement.style.removeProperty('--wr-fg');
                }
                hide();
            }
        });

        cBg.oninput = e => { bg = e.target.value; };
        cFg.oninput = e => { fg = e.target.value; useDefaultFg = false; };

        function locate() {
            const { left, top } = btn.getBoundingClientRect();
            panel.style.left = (left - 250) + 'px';
            panel.style.top = top + 'px';
        }
    }
})();
欢迎访问Greasy Fork镜像
