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

浅生 · 发表于 2023-3-27 07:42:18

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

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

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

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

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

提问

如何快速让网页支持暗黑模式

怎么实现切换呢

哈哈，能看到我提问了很多废话，其实有时候提问真的需要技巧，会提问也是一种能力
但是最终它还是给了我完整代码

<!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元素加载完毕之后再运行代码。
      如果问题仍然存在，您可以在浏览器的开发者工具中打开控制台，查看更详细的错误信息。

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

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

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

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com