微信读书加宽可视范围和几个白色主题的护眼模式

将宽度改的更宽,看起来舒服一些,在url地址栏加参数,自定义程度高一些,也添加了几个白色主题下的背景颜色,对眼睛更友好写吧

// ==UserScript==
// @name         微信读书加宽可视范围和几个白色主题的护眼模式
// @namespace    http://tampermonkey.net/
// @version      1.1.2
// @description  将宽度改的更宽,看起来舒服一些,在url地址栏加参数,自定义程度高一些,也添加了几个白色主题下的背景颜色,对眼睛更友好写吧
// @author       yehuda
// @icon         https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/favicon/favicon_32h.png
// @match        https://weread.qq.com/web/reader/*
// @match      *://https://weread.qq.com/web/reader/*
// @license MIT
// @grant        none
// ==/UserScript==

(function () {
	'use strict';
	// bg 为背景颜色
	// rbg为导航栏头部header的颜色
	// bgb为画布即阅读容器的背景颜色
	// bgbBar为打开抽屉侧边栏的背景颜色
	// 支持RGB、RGBA、十六进制等等格式
	const colors = [
		{ bg: 'rgba(236, 217, 172, 0.4)', rbg: 'rgba(243, 227, 188, 1)', bgb: 'rgba(251, 239, 209, 0.5)',bgbBar: '#dbdbdb', white: true },
		{
			bg: 'rgba(102, 128, 102, 0.1)',
			rbg: 'rgba(65, 94, 62, 1)',
			bgb: 'rgba(102, 128, 102, 0.25)',
			bgbbgbBar: '#dbdbdb',
			white: true
		},
		{ bg: '#b5b5b5', rbg: '#c5c5c5', bgb: '#dbdbdb',bgbBar: '#dbdbdb', white: true }
	];
	const getUrlParam = (name, url) => {
		let qs = arguments[1] || window.location.href,
			reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'),
			r = qs.substr(qs.indexOf('?') + 1).match(reg);
		if (r !== null) {
			let i = decodeURI(r[2]).indexOf('#');
			if (i !== -1) {
				return decodeURI(r[2]).substring(0, i);
			} else {
				return decodeURI(r[2]);
			}
		} else {
			return '';
		}
	};
	const tarWidth = getUrlParam('w') || '1500';
	const tartoolsMargin = getUrlParam('m') || '800';
	const fontSize_range = getUrlParam('r') || '-75';
	const routerViewDOM = document.getElementById('routerView');
	if (routerViewDOM) {
		// 主体内容宽度
		const app_contentTarDOM = routerViewDOM.getElementsByClassName('app_content').item(0);
		if (app_contentTarDOM) {
			app_contentTarDOM.style.maxWidth = tarWidth ? `${tarWidth}px` : ``;
			const readerTopBarDOM = routerViewDOM.getElementsByClassName('readerTopBar').item(0);
			if (readerTopBarDOM) {
				readerTopBarDOM.style.maxWidth = tarWidth ? `${tarWidth}px` : ``;
			}
		}
		// 功能栏定位
		const readerControlsDOM = routerViewDOM.getElementsByClassName('readerControls').item(0);
		if (readerControlsDOM) {
			readerControlsDOM.style.marginLeft = tartoolsMargin ? `${tartoolsMargin}px` : ``;
			// 字体大小设置
			const fontSizerangeDOM = routerViewDOM.getElementsByClassName('readerControls_fontSize').item(0);
			if (fontSizerangeDOM) {
				// 大小选择栏位置
				fontSizerangeDOM.addEventListener(
					'click',
					(e) => {
						e.stopPropagation();
						fontSizerangeDOM.style.transition = `none`;
						fontSizerangeDOM.style.transform = `translateX(${fontSize_range}px)`;
					},
					false
				);
				document.addEventListener('click', () => {
					fontSizerangeDOM.style.transition = `none`;
					fontSizerangeDOM.style.transform = ``;
				});
			}
		}
	}
	// 两个弹框设置成紧贴右边
	const readerCatalogDOM = document.getElementsByClassName('readerCatalog').item(0);
	const readerNotePaneltDOM = document.getElementsByClassName('readerNotePanel').item(0);
	if (readerCatalogDOM && readerCatalogDOM.style) {
		readerCatalogDOM.style.left = 'unset';
		readerCatalogDOM.style.right = '0';
		readerNotePaneltDOM.style.left = 'unset';
		readerNotePaneltDOM.style.right = '0';
	}

	setTimeout(load, 100);

	function load() {
		const style = getStyleStr();
		document.head.innerHTML = document.head.innerHTML + style;
		init();
		// 注销下载app按钮绑定的事件
		let appDownloadbutton = document.querySelector('[title="下载App"]');
		// 获取改变主体颜色的按钮
		let themeButton = document.querySelector('[title="深色"]') || document.querySelector('[title="浅色"]');
		themeButton.addEventListener('click', () => {
			removeEventListeners(appDownloadbutton);
			if (themeButton.title == '深色') {
				addWatchThemeChange();
			}
			removeStyle();
		});
		removeEventListeners(appDownloadbutton);
		addWatchThemeChange();
		// 添加主体样式监听
		function addWatchThemeChange() {
			appDownloadbutton = document.querySelector('[title="下载App"]');
			appDownloadbutton.addEventListener('click', function () {
				const body = document.body;
				const mode = body.getAttribute('color-mode');
				let nextMode = null;
				if (!mode) {
					nextMode = 0;
					body.classList.add('wr-mode-0');
					body.setAttribute('color-mode', 0);
				} else {
					nextMode = parseInt(mode) + 1;
					if (nextMode >= colors.length) {
						nextMode = 0;
					}
				}
				changeMode(nextMode, mode);
			});
		}
	}
	// 获取样式
	function init() {
		const localMode = localStorage.getItem('wr-mode');
		if (localMode) {
			changeMode(localMode);
		}
	}
	// 删除绑定的事件
	function removeEventListeners(element) {
		// 获取目标元素下的所有子孙元素
		const descendants = element.getElementsByTagName('*');

		// 移除目标元素上绑定的事件
		element.replaceWith(element.cloneNode(true));

		// 移除目标元素下的所有子孙元素上绑定的事件
		for (let i = 0; i < descendants.length; i++) {
			const clone = descendants[i].cloneNode(true);
			descendants[i].replaceWith(clone);
		}
	}
	// 删除自定义的护眼样式
	function removeStyle() {
		const body = document.body;
		colors.forEach((color, index) => {
			body.classList.remove('wr-mode-' + index);
			if (localStorage.getItem('wr-mode')) {
				localStorage.removeItem('wr-mode');
			}
		});
	}
	// 修改模式
	function changeMode(modeIndex, currentModeIndex = null) {
		const body = document.body;
		if (currentModeIndex) {
			body.classList.remove('wr-mode-' + currentModeIndex);
		}
		body.classList.add('wr-mode-' + modeIndex);
		body.setAttribute('color-mode', modeIndex);
		localStorage.setItem('wr-mode', modeIndex);
	}
	// 获取初始化样式
	function getStyleStr() {
		let style = '<style>';
		for (let i = 0; i < colors.length; i++) {
			const color = colors[i];
			style += `
              body.wr-mode-${i} .change-mode-plugins span{
                  color:${color.white ? '#2a2a2a' : '#b9b9ba'};
              }
              body.wr-mode-${i}{
                  background-color:${color.bg} !important;
              }
              body.wr-mode-${i} .readerTopBar {
                  background-color:${color.rbg} !important;
              }
              body.wr-mode-${i} .readerControls_item,body.wr-mode-${i} .readerControls_fontSize,body.wr-mode-${i} .app_content
              {
                  background-color:${color.bgb} !important;
              }
              body.wr-mode-${i} .readerCatalog {
                background-color:${color.bgbbgbBar} !important;
              }
              body.wr-mode-${i} .chapterItem_link {
                border: dashed #2a2a2a !important;
                border-width: 0 0 2px !important;
              }
              body.wr-mode-${i} .chapterItem_text {
                font-size: 18px !important;
              }
              body.wr-mode-${i} .readerNotePanel {
                background-color:${color.bgbbgbBar} !important;
              }
              body.wr-mode-${i} .sectionListItem_divider {
                border: dashed #2a2a2a !important;
                border-width: 0 0 2px !important;
              }
              body.wr-mode-${i} .readerNotePanelBottomBar {
                border: solid ${color.bgbBar} !important;
                border-width: 0 0 2px !important;
                background-color:${color.rbg} !important;
              }
          `;
			if (color.white) {
				style += `
                  body.wr-mode-${i} .readerFooter_button,body.wr-mode-${i} .readerFooter_button:hover{
                      background-color:${color.bg} !important;
                      color:#2a2a2a !important;
                  }
              `;
			}
		}
		style += '</style>';
		return style;
	}
})();

QingJ © 2025

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