本帖最后由 老王 于 2023-8-15 01:16 编辑
用的还是3.5版本的， 没有付费不能用最新版本，听说最新版更强大。
因为不会提问，问了很多个问题才得到想要的效果
这里我直接把贴出全部过程和效果图。
先上效果图，还不是很完美，有些细节还需要优化，效果图：
提问
- 如何快速让网页支持暗黑模式
- 怎么实现切换呢
- 可以弄好看一点么
- 怎么保存用户选择是否启用暗黑模式
- 可以把check换成两个图标切换么 样式更美观一些
- 用了你的代码 提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
哈哈，能看到我提问了很多废话，其实有时候提问真的需要技巧，会提问也是一种能力
但是最终它还是给了我完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dark Mode Toggle</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
:root {
--background-color: #fff;
--text-color: #333;
}
.dark {
--background-color: #222;
--text-color: #fff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
#dark-mode-toggle {
background: transparent;
border: none;
color: #333;
cursor: pointer;
font-size: 1.5rem;
position: fixed;
right: 20px;
top: 20px;
z-index: 9999;
}
#dark-mode-toggle i {
display: none;
}
#dark-mode-toggle.dark i:first-child {
display: block;
}
#dark-mode-toggle:not(.dark) i:last-child {
display: block;
}
</style>
</head>
<body>
<h1>Dark Mode Toggle</h1>
<p>This is a simple example of how to toggle dark mode using JavaScript and CSS.</p>
<button id="dark-mode-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
<script>
var button = document.getElementById("dark-mode-toggle");
var theme = localStorage.getItem('theme'); // get saved theme, if any
if (theme) {
document.documentElement.classList.add(theme); // apply saved theme
}
button.addEventListener("click", function() {
document.documentElement.classList.toggle("dark");
var theme = document.documentElement.classList.contains('dark') ? 'dark' : '';
localStorage.setItem('theme', theme); // save current theme
});
</script>
</body>
</html>
应用到dz模板
1、<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
这段代码是引入font-awesome图标，一般放在 common/header.htm 里
2、<style>...</style> 代码是切换主题图标的css，放common/extend_common.css里
3、<button id="dark-mode-toggle">...</button> 是切换主题图标的代码，放到你想显示的位置，我是放到 common/header.htm 导航栏的右侧
4、<script>...</script> 是用来切换主题、图标及保存用户选择的主题的代码，放到 common/footer.htm 里的 </body> 之前，最后一个问题就是因为我放到了header导致了错误，ai纠正了我
我问：用了你的代码 提示 uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
AI答：这个错误通常表示JavaScript代码尝试访问一个不存在的DOM元素。可能是因为DOM元素尚未加载到页面中，或者元素ID或类名错误。您可以检查以下内容：
- 确保
<button>元素具有正确的ID属性，即 id="dark-mode-toggle"。
- 确保您的JavaScript代码位于
<body>元素的末尾，以确保在DOM元素加载完毕之后再运行代码。
- 如果问题仍然存在，您可以在浏览器的开发者工具中打开控制台，查看更详细的错误信息。
| 
