Skip to content

Instantly share code, notes, and snippets.

@x-magic
Last active November 14, 2021 03:38
Show Gist options
  • Save x-magic/8d3898e5ed51d64814393ab42dbe0673 to your computer and use it in GitHub Desktop.
Save x-magic/8d3898e5ed51d64814393ab42dbe0673 to your computer and use it in GitHub Desktop.
根据网页源代码,很久以前,知乎网页版就已经有了暗色主题。设置项都有了。但官方迟迟不开放使用。等不下去了,先这样了。现已支持切换主题。使用按钮切换主题后,如果页面显示有错误,刷新即可。
// ==UserScript==
// @name 知乎 - 强行设为暗色主题
// @description 根据网页源代码,很久以前,知乎网页版就已经有了暗色主题。设置项都有了。但官方迟迟不开放使用。等不下去了,先这样了。现已支持切换主题。使用按钮切换主题后,如果页面显示有错误,刷新即可。
// @namespace RainSlide
// @author RainSlide
// @icon https://static.zhihu.com/static/favicon.ico
// @version 1.1.1
// @match https://*.zhihu.com/*
// @updateURL https://gist.githubusercontent.com/x-magic/8d3898e5ed51d64814393ab42dbe0673/raw/知乎 - 强行设为暗色主题.user.js
// @downloadURL https://gist.githubusercontent.com/x-magic/8d3898e5ed51d64814393ab42dbe0673/raw/知乎 - 强行设为暗色主题.user.js
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @inject-into context
// @run-at document-start
// ==/UserScript==
//此版本基于 https://greasyfork.org/zh-CN/scripts/397672-%E7%9F%A5%E4%B9%8E-%E5%BC%BA%E8%A1%8C%E8%AE%BE%E4%B8%BA%E6%9A%97%E8%89%B2%E4%B8%BB%E9%A2%98
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>
*/
/* 修复视频页评论区 */
if (/\/zvideo\/.*$/.test(location.pathname)) document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<style type="text/css">div.CommentListV2{color:white}</style>');
@zhiyuanzhai
Copy link

在Safari,这个似乎不起作用……

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment