Last active
November 14, 2021 03:38
-
-
Save x-magic/8d3898e5ed51d64814393ab42dbe0673 to your computer and use it in GitHub Desktop.
根据网页源代码,很久以前,知乎网页版就已经有了暗色主题。设置项都有了。但官方迟迟不开放使用。等不下去了,先这样了。现已支持切换主题。使用按钮切换主题后,如果页面显示有错误,刷新即可。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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>'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
在Safari,这个似乎不起作用……