·设为首页收藏本站📧邮箱修改🎁免费下载专区🔐设置/修改密码👽群雄群聊
返回列表 发布新帖

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

568 0
发表于 2023-3-27 07:42:18 | 显示全部楼层 阅读模式

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

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

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

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

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

提问

    如何快速让网页支持暗黑模式怎么实现切换呢可以弄好看一点么怎么保存用户选择是否启用暗黑模式可以把check换成两个图标切换么 样式更美观一些用了你的代码 提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
哈哈,能看到我提问了很多废话,其实有时候提问真的需要技巧,会提问也是一种能力
但是最终它还是给了我完整代码
  1. <!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分钟实现了网站的暗黑主题切换功能 利用,分钟,实现,网站,暗黑
利用chatgpt5分钟实现了网站的暗黑主题切换功能 利用,分钟,实现,网站,暗黑
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:3.80.131.164,180.97.66.59,GMT+8, 2024-3-28 23:49 , Processed in 0.152740 second(s), 68 queries , Gzip On, Redis On.

Based on Discuz! W1.0 Licensed

© 2001-2024 Discuz! Team.

关灯 快速发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表