☰

微信阅读背景色修改

修改微信阅读网页版的阅读背景色

目前为 2025-02-10 提交的版本。查看 最新版本。

// ==UserScript==
// @name         微信阅读背景色修改
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  修改微信阅读网页版的阅读背景色
// @author       Your name
// @match        https://weread.qq.com/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license MIT
// ==/UserScript==

(function () {
  'use strict';

  // 添加自定义样式
  GM_addStyle(`
        .bg-color-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px !important;
            height: 48px !important;
            margin: 0;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 16px;
            border-radius: 50%;
        }
        
        .bg-color-button:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
        
        .bg-color-button.dark {
            color: #666;
        }
        
        .bg-color-button.white {
            color: #fff;
        }
        
        .bg-color-button.white:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .bg-color-panel {
            position: absolute;
            z-index: 110;
            transition: all .2s ease-in-out;
            width: 360px;
            box-sizing: border-box;
            padding: 16px 24px;
            border-radius: 16px;
            display: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .bg-color-panel.dark {
            background-color: #fff;
            color: #333;
        }
        
        .bg-color-panel.white {
            background-color: #262628;
            color: #fff;
        }

        .bg-color-panel.show {
            display: block;
        }

        .bg-color-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .bg-color-option {
            height: 40px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: transform 0.2s;
        }
        
        .bg-color-option:hover {
            transform: scale(1.02);
        }
        
        .bg-color-option.dark {
            color: #333;
        }
        
        .bg-color-option.white {
            color: #fff;
        }
    `);

  // 预设的背景色选项
  const bgColors = [
    { name: '默认背景', value: '#ffffff', darkValue: '#1f1f1f' },
    { name: '护眼绿', value: '#cce8cf', darkValue: '#1a291b' },
    { name: '杏色', value: '#faf9de', darkValue: '#292916' },
    { name: '淡蓝', value: '#edf4ed', darkValue: '#162929' },
    { name: '灰白', value: '#f5f5f5', darkValue: '#262626' },
    { name: '米色', value: '#f5e6ca', darkValue: '#29231a' },
  ];

  // 创建背景色按钮
  function createBgColorButton() {
    const button = document.createElement('button');
    button.className = 'bg-color-button readerControls_item';
    button.innerHTML = '🎨';
    button.title = '背景色';
    return button;
  }

  // 判断是否为深色模式
  function isDarkMode() {
    const darkModeButton = document.querySelector('.readerControls_item.white, .readerControls_item.dark');
    return darkModeButton && darkModeButton.classList.contains('white');
  }

  // 创建背景色面板
  function createBgColorPanel() {
    const panel = document.createElement('div');
    panel.className = 'bg-color-panel';

    const grid = document.createElement('div');
    grid.className = 'bg-color-grid';

    bgColors.forEach((color) => {
      const option = document.createElement('div');
      option.className = 'bg-color-option';
      option.style.backgroundColor = color.value;
      option.textContent = color.name;
      option.onclick = () => {
        const content = document.querySelector('.readerChapterContent');
        if (content) {
          const bgColor = isDarkMode() ? color.darkValue : color.value;
          content.style.backgroundColor = bgColor;
          GM_setValue('selectedBgColor', bgColor);
          GM_setValue('selectedColorIndex', bgColors.indexOf(color));
        }
        panel.classList.remove('show');
      };
      grid.appendChild(option);
    });

    panel.appendChild(grid);
    return panel;
  }

  // 重置背景色为默认
  function resetBackgroundColor() {
    const content = document.querySelector('.readerChapterContent');
    if (content) {
      content.style.backgroundColor = '';
    }
    GM_setValue('selectedColorIndex', -1);
    GM_setValue('selectedBgColor', '');
  }

  // 更新深浅色模式
  function updateTheme(button, panel) {
    const isDark = isDarkMode();

    // 重置背景色
    resetBackgroundColor();

    // 更新按钮和面板样式
    button.className = `bg-color-button readerControls_item ${isDark ? 'white' : 'dark'}`;
    panel.className = `bg-color-panel ${isDark ? 'white' : 'dark'}`;

    // 更新选项样式
    const options = panel.querySelectorAll('.bg-color-option');
    options.forEach((option, index) => {
      option.className = `bg-color-option ${isDark ? 'white' : 'dark'}`;
      option.style.backgroundColor = isDark ? bgColors[index].darkValue : bgColors[index].value;
    });
  }

  // 监听DOM变化,添加按钮和面板
  function init() {
    const targetNode = document.querySelector('.readerControls');
    if (!targetNode) return;

    const button = createBgColorButton();
    const panel = createBgColorPanel();

    // 插入到深色/浅色按钮后面
    const darkModeButton = document.querySelector('.readerControls_item.white, .readerControls_item.dark');
    if (darkModeButton) {
      darkModeButton.parentNode.insertBefore(button, darkModeButton.nextSibling);
      document.body.appendChild(panel);

      // 初始化主题
      updateTheme(button, panel);

      // 监听深浅色模式切换
      const themeObserver = new MutationObserver(() => {
        // 使用 requestAnimationFrame 确保在DOM更新后执行
        requestAnimationFrame(() => {
          updateTheme(button, panel);
        });
      });

      themeObserver.observe(darkModeButton, {
        attributes: true,
        attributeFilter: ['class'],
      });
    }

    // 点击按钮显示/隐藏面板
    button.onclick = (e) => {
      e.stopPropagation();
      const buttonRect = button.getBoundingClientRect();
      panel.style.top = buttonRect.top + 'px';
      panel.style.right = window.innerWidth - buttonRect.left + 10 + 'px';

      // 在显示面板前更新选项的背景色
      const isDark = isDarkMode();
      const options = panel.querySelectorAll('.bg-color-option');
      options.forEach((option, index) => {
        option.style.backgroundColor = isDark ? bgColors[index].darkValue : bgColors[index].value;
      });

      panel.classList.toggle('show');
    };

    // 点击其他区域隐藏面板
    document.addEventListener('click', (e) => {
      if (!panel.contains(e.target) && !button.contains(e.target)) {
        panel.classList.remove('show');
      }
    });
  }

  // 监听页面变化
  const observer = new MutationObserver(() => {
    if (!document.querySelector('.bg-color-button')) {
      init();
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });

  // 初始化
  init();
})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址