网页增加亮暗主题切换按钮的方式
以 discuz 论坛为例：1. 后台 -> 界面 -> 导航设置 -> 顶部导航，添加新导航，名称：暗色主题，链接：#switch-theme
2. 后台 -> 全局 -> SEO设置 -> 其它 -> 其他头部信息，添加如下代码：<!-- Dark mode switcher -->
<script>
if (localStorage.getItem('darkEnabled') === 'true') {
document.documentElement.style.backgroundColor = '#121212';
document.documentElement.style.color = '#e0e0e0';
}
(function() {
var darkScript = document.createElement('script');
darkScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js';
darkScript.onload = function() {
var darkEnabled = localStorage.getItem('darkEnabled') === 'true';
if(darkEnabled) {
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
}
function setupSwitchTheme() {
var switchThemeLink = document.querySelector('a');
if (switchThemeLink) {
switchThemeLink.textContent = darkEnabled ? '亮色主题' : '暗色主题';
switchThemeLink.addEventListener('click', function(e) {
e.preventDefault();
if(darkEnabled) {
DarkReader.disable();
switchThemeLink.textContent = '暗色主题';
darkEnabled = false;
localStorage.setItem('darkEnabled', 'false');
} else {
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
switchThemeLink.textContent = '亮色主题';
darkEnabled = true;
localStorage.setItem('darkEnabled', 'true');
}
});
}
}
if(document.readyState === 'loading'){
document.addEventListener('DOMContentLoaded', setupSwitchTheme);
} else {
setupSwitchTheme();
}
};
document.head.appendChild(darkScript);
})();
</script>这个方法适用于任何不支持暗色主题的亮色网站，只需在自己网页增加 href 为 #switch-theme 的 a 标签，然后将上述代码放到网页的 head 标签内即可 不错
总算有暗黑模式了
页:
[1]