微信读书

修改字体、颜色，阅读时宽屏，隐藏一切
目前為 2025-04-19 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         微信读书
// @namespace    http://tampermonkey.net/
// @version      0.40
// @description  修改字体、颜色，阅读时宽屏，隐藏一切
// @author       Oscar
// @match        https://weread.qq.com/web/reader/*
// @license      AGPL License
// @grant        GM_addStyle
// ==/UserScript==

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

  /*━━ 2. 颜色变量样式 ━━*/
  GM_addStyle(`
    :root{--wr-bg:${bg};--wr-fg:${fg}}
    .wr_whiteTheme .readerContent .app_content{background:var(--wr-bg)!important}
    .wr_whiteTheme .readerContent .app_content,
    .wr_whiteTheme .readerContent .app_content *{color:var(--wr-fg)!important}
  `);

  /*━━ 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. 轮询等待底栏 (最多 15 次 ≈ 3s) ━━*/
  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">
        ${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 { fg = sw.dataset.c; cFg.value = fg; }
        return;
      }
      if (e.target.classList.contains('ok')) { // 应用
        GM_setValue('wr_bgColor', bg);
        GM_setValue('wr_fontColor', fg);
        document.documentElement.style.setProperty('--wr-bg', bg);
        document.documentElement.style.setProperty('--wr-fg', fg);
        hide();
      }
    });
    cBg.oninput = e => { bg = e.target.value; };
    cFg.oninput = e => { fg = e.target.value; };

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