利用chatgpt5分钟实现了网站的暗黑主题切换功能

qzuser1212 · 发表于 2023-3-26 23:51:28

用的还是3.5版本的，没有付费不能用最新版本，听说最新版更强大。
因为不会提问，问了很多个问题才得到想要的效果
这里我直接把贴出全部过程和效果图。

先上效果图，还不是很完美，有些细节还需要优化
效果图

mi.xcxgy.cn_forum.php (1).png

mi.xcxgy.cn_forum.php_mod=viewthread&tid=61&extra=page=1 (1).png

mi.xcxgy.cn_forum.php_mod=viewthread&tid=61&extra=page=1.png

mi.xcxgy.cn_index.php(iPhone XR) (1).png

提问

如何快速让网页支持暗黑模式
怎么实现切换呢
可以弄好看一点么
怎么保存用户选择是否启用暗黑模式
可以把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元素加载完毕之后再运行代码。
      如果问题仍然存在，您可以在浏览器的开发者工具中打开控制台，查看更详细的错误信息。

s77 · 发表于 2023-3-27 15:06:31

学习学习。

小花 · 发表于 2023-3-27 16:30:34

谢谢谢谢谢寻寻

276397082 · 发表于 2023-3-27 21:06:29

提示: 作者被禁止或删除内容自动屏蔽

gulaibai · 发表于 2023-3-27 22:06:14

以后都不会有站长了

yezirui · 发表于 2023-3-29 02:35:22

感谢分享

Guoyuh78 · 发表于 2023-3-29 22:04:18

利用chatgpt5分钟实现了网站的暗黑主题切换

Guoyuh78 · 发表于 2023-3-29 22:07:57

我搭建了一个ChatGPT 网页可以直接用 ailiao.wang

276397082 · 发表于 2023-3-30 16:06:31

提示: 作者被禁止或删除内容自动屏蔽

qzuser1212 · 发表于 2023-3-30 19:28:20

Guoyuh78 发表于 2023-3-29 22:07
我搭建了一个ChatGPT 网页可以直接用 ailiao.wang

好的我的经常掉线

利用chatgpt5分钟实现了网站的暗黑主题切换功能

产品服务

开发者服务

使用教程