知乎 - 强行设为暗色主题

根据网页源代码，很久以前，知乎网页版就已经有了暗色主题。设置项都有了。但官方迟迟不开放使用。等不下去了，先这样了。现已支持切换主题。使用按钮切换主题后，如果页面显示有错误，刷新即可。
目前為 2020-05-10 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name        知乎 - 强行设为暗色主题
// @description 根据网页源代码，很久以前，知乎网页版就已经有了暗色主题。设置项都有了。但官方迟迟不开放使用。等不下去了，先这样了。现已支持切换主题。使用按钮切换主题后，如果页面显示有错误，刷新即可。
// @namespace   RainSlide
// @author      RainSlide
// @icon        https://static.zhihu.com/static/favicon.ico
// @version     1.1
// @match       https://*.zhihu.com/*
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_registerMenuCommand
// @grant       GM_unregisterMenuCommand
// @inject-into context
// @run-at      document-start
// ==/UserScript==
 
const name = "data-theme";
const d = document.documentElement;
 
Object.defineProperties(
	this, {
		"localTheme": {
			configurable: true,
			enumerable: false,
			get:    () => GM_getValue(name),
			set: value => GM_setValue(name, value)
		},
		"pageTheme": {
			configurable: true,
			enumerable: false,
			get:    () => d.getAttribute(name),
			set: value => d.setAttribute(name, value)
		}
	}
);
 
const  dark = "dark";
const light = "light";
 
// 将 localTheme 的 state 同步至 pageTheme
const sync = () => {
	if (pageTheme !== localTheme) {
		pageTheme = localTheme;
	}
};
 
// 如果设置了暗色主题
if ( localTheme === dark ) {
 
	sync(); // if ( pageTheme !== dark ) pageTheme = dark;
 
	// 强行设为暗色主题
	document.addEventListener(
		"DOMContentLoaded", () => {
			const data = document.getElementById("js-initialData");
			if (data) data.textContent = data.textContent.replace(
				'"theme":"light"', '"theme":"dark"'
			);
		}
	);
 
}
 
// 定时同步 state
setInterval(sync, 2000);
 
// 切换主题
 
const setTheme = theme => pageTheme = localTheme = theme;
 
const invertMap = new Map([
	[ dark, light ],
	[ light, dark ]
]);
 
const switchTheme = () => setTheme( invertMap.get(localTheme) || dark );
 
// 脚本管理器菜单按钮
this.GM_registerMenuCommand &&
this.GM_registerMenuCommand( "切换主题", switchTheme );
 
// 页面右下角按钮
window.addEventListener(
	"load", () => {
		const buttons = document.querySelector('.CornerButtons');
		if (buttons) {
 
			const container = document.createElement("div");
			const button = document.createElement("button");
 
			const label = "切换主题";
 
			container.className = "CornerAnimayedFlex";
 
			new Map([
				[ "data-tooltip", label ],
				[ "data-tooltip-position", "left" ],
				[ "data-tooltip-will-hide-on-click", "true" ],
				[ "aria-label", label ],
				[ "type", "button" ],
				[ "class", "Button CornerButton Button--plain" ]
			]).forEach(
				(value, key) => button.setAttribute(key, value)
			);
 
			button.innerHTML =
// 图标来自 Google Material Icons
`<svg xmlns="http://www.w3.org/2000/svg" class="Zi" aria-label="${ label }" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"/></svg>`;
 
			button.addEventListener("mouseenter", sync);
			button.addEventListener("focus", sync);
			button.addEventListener("click", switchTheme);
 
			container.appendChild(button);
			buttons.insertBefore(container, buttons.firstElementChild);
 
		}
	}
);
 
/*
<div class="CornerAnimayedFlex">
	<button data-tooltip="暗色主题" data-tooltip-position="left" data-tooltip-will-hide-on-click="true" aria-label="暗色主题" type="button" class="Button CornerButton Button--plain">
		<svg xmlns="http://www.w3.org/2000/svg" class="Zi" aria-label="暗色主题" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"/></svg>
	</button>
</div>
*/
欢迎访问Greasy Fork镜像
