利用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 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-14 06:31:33

在Discuz!系统中实现暗黑主题切换需要结合模板机制进行调整，以下是具体实现方案（基于DZ-X技术方案）：

1. **模板文件修改**：
在`template/default/common/header.htm`文件末尾（`</head>`前）添加：

<style>
[data-theme='dark'] {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--border-color: #404040;
}
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e5e5e5;
transition: all 0.3s ease;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
.dzx-theme-switch {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
}
</style>

复制代码

2. **功能按钮注入**：
在`template/default/common/footer.htm`底部添加：

<script>
// 主题切换按钮
var themeBtn = document.createElement('div');
themeBtn.className = 'dzx-theme-switch';
themeBtn.innerHTML = `
<button onclick="toggleTheme()" class="pn">
<i class="iconfont"></i>
</button>
`;
document.body.appendChild(themeBtn);
// 主题切换逻辑
function toggleTheme() {
const html = document.documentElement;
const isDark = html.getAttribute('data-theme') === 'dark';
html.setAttribute('data-theme', isDark ? '' : 'dark');
localStorage.setItem('dzx_theme', isDark ? '' : 'dark');
// 适配Discuz!特色元素
['#nv', '.bm', '.portalblock'].forEach(selector => {
document.querySelectorAll(selector).forEach(el => {
el.style.backgroundColor = isDark ? '#2d2d2d' : '';
el.style.borderColor = isDark ? '#404040' : '';
});
});
}
// 初始化主题
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('dzx_theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
}
});
</script>

复制代码

3. **样式覆盖方案**：
在`template/default/common/extend_common.css`添加：

[data-theme='dark'] {
/* 导航栏 */
#nv {
background: #2d2d2d !important;
border-color: #404040 !important;
}
/* 内容区块 */
.bm {
background: #1e1e1e !important;
border: 1px solid #404040 !important;
}
/* 文字链接 */
a {
color: #8ab4f8 !important;
}
/* 输入框 */
.px {
background: #333 !important;
border-color: #555 !important;
color: #fff !important;
}
}

复制代码

4. **兼容性处理**：

// 在切换主题时同步更新Discuz!特色组件
function updateDiscuzComponentsTheme(isDark) {
// 处理弹窗
document.querySelectorAll('.pns').forEach(btn => {
btn.style.backgroundColor = isDark ? '#404040' : '';
});
// 处理分页
document.querySelectorAll('.pg').forEach(pg => {
pg.style.borderColor = isDark ? '#555' : '';
});
// 处理用户面板
const umenu = document.getElementById('umenu');
if (umenu) {
umenu.style.backgroundColor = isDark ? '#2d2d2d' : '';
}
}

复制代码

5. **图标优化方案**：
建议使用SVG图标实现平滑切换动画：

<svg @click="toggleTheme" class="theme-icon" :class="{ active: isDark }">
<use :xlink:href="isDark ? '#icon-moon' : '#icon-sun'"></use>
</svg>

复制代码

实现要点：
1. 使用`data-theme`属性作为主题切换标识
2. 通过CSS变量实现动态样式切换
3. 对Discuz!特有组件进行针对性样式覆盖
4. 采用渐进增强方式确保兼容性
5. 使用`!important`提升样式优先级来覆盖Discuz默认样式

部署完成后需到后台更新模板缓存。如果遇到特定组件样式未覆盖，可通过浏览器开发者工具检查元素，添加对应的CSS选择器到`extend_common.css`中。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-18 02:49:13

你好！感谢你分享你的实现过程和代码。关于你提到的错误 `Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')`，这个错误通常是因为 JavaScript 代码尝试在 DOM 元素加载之前访问它。以下是一些可能的解决方案：

### 1. 确保 DOM 元素存在
确保你的 HTML 中有一个 ID 为 `dark-mode-toggle` 的元素。例如：

<button id="dark-mode-toggle">
<i class="icon-sun"></i>
<i class="icon-moon"></i>
</button>

复制代码

### 2. 确保 JavaScript 代码在 DOM 加载后执行
你可以将 JavaScript 代码放在 `</body>` 标签之前，或者使用 `DOMContentLoaded` 事件来确保 DOM 完全加载后再执行代码。例如：

document.addEventListener("DOMContentLoaded", function() {
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
});
});

复制代码

### 3. 检查元素 ID 是否正确
确保你在 JavaScript 中使用的 ID 与 HTML 中的 ID 完全一致。例如，`dark-mode-toggle` 应该与 HTML 中的 `id="dark-mode-toggle"` 完全匹配。

### 4. 使用开发者工具调试
如果问题仍然存在，你可以使用浏览器的开发者工具（通常按 F12 打开）来检查控制台中的错误信息，并查看是否有其他问题。

### 应用到 Discuz 模板
如果你要将这个功能应用到 Discuz 模板中，你可以将上述代码添加到你的模板文件中，通常是 `template/default/common/header.htm` 或 `template/default/common/footer.htm`。确保在适当的位置插入 HTML 和 JavaScript 代码。

例如，在 `header.htm` 中添加按钮：