☰

微信读书

修改背景颜色、字体颜色，阅读时宽屏，隐藏按钮和菜单

  1. // ==UserScript==
  2. // @name         微信读书
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.50
  5. // @description  修改背景颜色、字体颜色，阅读时宽屏，隐藏按钮和菜单
  6. // @author       Oscar
  7. // @match        https://weread.qq.com/web/reader/*
  8. // @license      AGPL License
  9. // @grant        GM_addStyle
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // ==/UserScript==
  13.  
  14. (() => {
  15.     /* 1. 预设与持久化 */
  16.     const BG = ['#FFFFFF', '#F9F3E3', '#E8F5E9', '#000000'];
  17.     const FG = ['#FFFFFF', '#0A1F44', '#39FF14'];
  18.     let bg = GM_getValue('wr_bgColor') || BG[0];
  19.     let fg = GM_getValue('wr_fontColor') || FG[1];
  20.     let useDefaultFg = GM_getValue('wr_useDefaultFg') || false;
  21.  
  22.     /* 2. 颜色变量样式 */
  23.     let styleRules = `
  24.     :root{--wr-bg:${bg};${!useDefaultFg ? `--wr-fg:${fg}` : ''}}
  25.     .wr_whiteTheme .readerContent .app_content,
  26.     .wr_whiteTheme .wr_horizontalReader .readerChapterContent,
  27.     .wr_whiteTheme .wr_horizontalReader .readerControls_fontSize {
  28.         background: var(--wr-bg) !important;
  29.         ${!useDefaultFg ? 'color: var(--wr-fg) !important;' : ''}
  30.     }
  31.  
  32.     .wr_whiteTheme .readerContent .app_content * ,
  33.     .wr_whiteTheme .wr_horizontalReader .readerChapterContent * ,
  34.     .wr_whiteTheme .wr_horizontalReader .readerControls_fontSize * {
  35.         ${!useDefaultFg ? 'color: var(--wr-fg) !important;' : ''}
  36.     }
  37. `;
  38.  
  39.     GM_addStyle(styleRules);
  40.  
  41.     /* 3. 固定样式 */
  42.     GM_addStyle(`
  43.     #tm{font:14px sans-serif;color:#333;line-height:1.4}
  44.     #tm .ttl{margin:6px 0 4px;font-weight:600}
  45.     #tm .row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  46.     #tm .sw{width:24px;height:24px;border:1px solid #aaa;cursor:pointer}
  47.     #tm .sw:hover{outline:2px solid #888}
  48.     #tm input[type=color]{width:24px;height:24px;border:1px solid #aaa;padding:0;cursor:pointer}
  49.     #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}
  50.     #tm .ok:hover{background:#66a9ff}
  51.     #tm .ok:active{background:#2e7be6}
  52.     .cp .icon{font-size:28px;display:flex;justify-content:center;align-items:center;width:100%;height:100%}
  53.     img.wr_readerImage_opacity{opacity:.8!important}
  54.     .readerControls{margin-left:calc(50% - 60px)!important}
  55.     .app_content,.readerTopBar{max-width:100%!important}
  56.     .readerControls,.readerTopBar{opacity:0;transition:opacity .2s}
  57.     .readerControls:hover,.readerTopBar:hover,.readerControls.tm-show{opacity:1!important}
  58.     .readerCatalog,.readerAIChatPanel,.readerNotePanel{left:unset!important;right:0!important}
  59.     
  60.     /* 双栏阅读模式 */
  61.     .wr_horizontalReader .wr_horizontalReader_app_content,
  62.     .wr_horizontalReader .readerChapterContent_container,
  63.     .wr_horizontalReader .readerChapterContent,
  64.     .wr_horizontalReader .renderTargetContainer,
  65.     .wr_horizontalReader .wr_canvasContainer {
  66.         width: 100vw !important;
  67.         max-width: 100vw !important;
  68.         margin: 0 auto !important;
  69.         padding: 0 !important;
  70.         position: static !important;
  71.     }
  72.  
  73.     .wr_horizontalReader .readerChapterContent,
  74.     .wr_horizontalReader .readerChapterContent_container {min-height: 100vh !important;}
  75.     .wr_horizontalReader .readerControls {position: fixed !important; right: 16px !important;}
  76.   `);
  77.  
  78.     /* 4. 轮询等待底栏 */
  79.     let attempts = 0;
  80.     const iv = setInterval(() => {
  81.         const ctl = document.querySelector('.readerControls');
  82.         if (ctl) {
  83.             clearInterval(iv);
  84.             try { init(ctl); } catch (err) { console.error('[取色面板] 初始化失败:', err); }
  85.         } else if (++attempts > 15) {
  86.             clearInterval(iv);
  87.         }
  88.     }, 200);
  89.  
  90.     /* 5. 初始化面板 */
  91.     function init(controls) {
  92.         const btn = document.createElement('button');
  93.         btn.className = 'readerControls_item cp';
  94.         btn.title = '取色';
  95.         btn.innerHTML = '<span class="icon">🎨</span>';
  96.         controls.prepend(btn);
  97.  
  98.         const panel = document.createElement('div');
  99.         panel.id = 'tm';
  100.         panel.style.cssText = 'display:none;position:fixed;width:220px;z-index:9999;background:#fff;border:1px solid #ccc;border-radius:6px;padding:6px';
  101.         panel.innerHTML = `
  102.       <div class="ttl">背景色</div>
  103.       <div class="row">
  104.         ${BG.map(c => `<div class="sw b" data-c="${c}" style="background:${c}"></div>`).join('')}
  105.         <label style="display:flex;align-items:center;gap:4px">自定义:<input type="color" class="cb" value="${bg}"></label>
  106.       </div>
  107.       <div class="ttl">字体色</div>
  108.       <div class="row">
  109.         <div class="sw f default" data-default="true" title="默认字体色" style="background:repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 10px 10px"></div>
  110.         ${FG.map(c => `<div class="sw f" data-c="${c}" style="background:${c}"></div>`).join('')}
  111.         <label style="display:flex;align-items:center;gap:4px">自定义:<input type="color" class="cf" value="${fg}"></label>
  112.       </div>
  113.       <div class="row"><button class="ok">应用</button></div>`;
  114.         document.body.append(panel);
  115.  
  116.         const cBg = panel.querySelector('.cb');
  117.         const cFg = panel.querySelector('.cf');
  118.  
  119.         const show = () => { locate(); panel.style.display = 'block'; controls.classList.add('tm-show'); };
  120.         const hide = () => { panel.style.display = 'none'; controls.classList.remove('tm-show'); };
  121.         btn.onclick = e => { e.stopPropagation(); panel.style.display === 'block' ? hide() : show(); };
  122.         document.addEventListener('click', e => {
  123.             if (panel.style.display === 'block' && !panel.contains(e.target) && !btn.contains(e.target)) hide();
  124.         }, true);
  125.  
  126.         panel.addEventListener('click', e => {
  127.             const sw = e.target.closest('.sw');
  128.             if (sw) {
  129.                 if (sw.classList.contains('b')) {
  130.                     bg = sw.dataset.c;
  131.                     cBg.value = bg;
  132.                 } else {
  133.                     if (sw.dataset.default) {
  134.                         useDefaultFg = true;
  135.                         fg = '';
  136.                     } else {
  137.                         useDefaultFg = false;
  138.                         fg = sw.dataset.c;
  139.                         cFg.value = fg;
  140.                     }
  141.                 }
  142.                 return;
  143.             }
  144.             if (e.target.classList.contains('ok')) {
  145.                 GM_setValue('wr_bgColor', bg);
  146.                 GM_setValue('wr_fontColor', fg);
  147.                 GM_setValue('wr_useDefaultFg', useDefaultFg);
  148.  
  149.                 document.documentElement.style.setProperty('--wr-bg', bg);
  150.                 if (!useDefaultFg) {
  151.                     document.documentElement.style.setProperty('--wr-fg', fg);
  152.                 } else {
  153.                     document.documentElement.style.removeProperty('--wr-fg');
  154.                 }
  155.                 hide();
  156.             }
  157.         });
  158.  
  159.         cBg.oninput = e => { bg = e.target.value; };
  160.         cFg.oninput = e => { fg = e.target.value; useDefaultFg = false; };
  161.  
  162.         function locate() {
  163.             const { left, top } = btn.getBoundingClientRect();
  164.             panel.style.left = (left - 250) + 'px';
  165.             panel.style.top = top + 'px';
  166.         }
  167.     }
  168. })();