利用chatgpt5分钟实现了网站的暗黑主题切换功能
用的还是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模板
我问：用了你的代码 提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
AI：这个错误通常表示JavaScript代码尝试访问一个不存在的DOM元素。可能是因为DOM元素尚未加载到页面中，或者元素ID或类名错误。您可以检查以下内容：
确保<button>元素具有正确的ID属性，即id="dark-mode-toggle"。
确保您的JavaScript代码位于<body>元素的末尾，以确保在DOM元素加载完毕之后再运行代码。
如果问题仍然存在，您可以在浏览器的开发者工具中打开控制台，查看更详细的错误信息。
页:
[1]
