利用chatgpt5分鐘實(shí)現(xiàn)了網(wǎng)站的暗黑主題切換功能

qzuser1212 · 發(fā)表于 2023-3-26 23:51:28

用的還是3.5版本的，沒有付費(fèi)不能用最新版本，聽說最新版更強(qiáng)大。
因?yàn)椴粫釂枺瑔柫撕芏鄠€(gè)問題才得到想要的效果
這里我直接把貼出全部過程和效果圖。

先上效果圖，還不是很完美，有些細(xì)節(jié)還需要優(yōu)化
效果圖

提問

如何快速讓網(wǎng)頁支持暗黑模式
怎么實(shí)現(xiàn)切換呢
可以弄好看一點(diǎn)么
怎么保存用戶選擇是否啟用暗黑模式
可以把check換成兩個(gè)圖標(biāo)切換么樣式更美觀一些
用了你的代碼提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

哈哈，能看到我提問了很多廢話，其實(shí)有時(shí)候提問真的需要技巧，會提問也是一種能力
但是最終它還是給了我完整代碼

<!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>

復(fù)制代碼

應(yīng)用到dz模板

1、<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
這段代碼是引入font-awesome圖標(biāo)，一般放在common/header.htm里
2、<style>...</style>代碼是切換主題圖標(biāo)的css，放common/extend_common.css里
3、<button id="dark-mode-toggle">...</button>是切換主題圖標(biāo)的代碼，放到你想顯示的位置，我是放到common/header.htm導(dǎo)航欄的右側(cè)
4、<script>...</script>是用來切換主題、圖標(biāo)及保存用戶選擇的主題的代碼，放到common/footer.htm里的</body>之前，最后一個(gè)問題就是因?yàn)槲曳诺搅薶eader導(dǎo)致了錯(cuò)誤，ai糾正了我

我問：用了你的代碼提示uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

AI：這個(gè)錯(cuò)誤通常表示JavaScript代碼嘗試訪問一個(gè)不存在的DOM元素。可能是因?yàn)镈OM元素尚未加載到頁面中，或者元素ID或類名錯(cuò)誤。您可以檢查以下內(nèi)容：
      確保<button>元素具有正確的ID屬性，即id="dark-mode-toggle"。
      確保您的JavaScript代碼位于<body>元素的末尾，以確保在DOM元素加載完畢之后再運(yùn)行代碼。
      如果問題仍然存在，您可以在瀏覽器的開發(fā)者工具中打開控制臺，查看更詳細(xì)的錯(cuò)誤信息。

s77 · 發(fā)表于 2023-3-27 15:06:31

學(xué)習(xí)學(xué)習(xí)。

小花 · 發(fā)表于 2023-3-27 16:30:34

謝謝謝謝謝尋尋

276397082 · 發(fā)表于 2023-3-27 21:06:29

提示: 作者被禁止或刪除內(nèi)容自動屏蔽

gulaibai · 發(fā)表于 2023-3-27 22:06:14

以后都不會有站長了

yezirui · 發(fā)表于 2023-3-29 02:35:22

感謝分享

Guoyuh78 · 發(fā)表于 2023-3-29 22:04:18

利用chatgpt5分鐘實(shí)現(xiàn)了網(wǎng)站的暗黑主題切換

Guoyuh78 · 發(fā)表于 2023-3-29 22:07:57

我搭建了一個(gè)ChatGPT 網(wǎng)頁可以直接用 ailiao.wang

276397082 · 發(fā)表于 2023-3-30 16:06:31

提示: 作者被禁止或刪除內(nèi)容自動屏蔽

qzuser1212 · 發(fā)表于 2023-3-30 19:28:20

Guoyuh78 發(fā)表于 2023-3-29 22:07
我搭建了一個(gè)ChatGPT 網(wǎng)頁可以直接用 ailiao.wang

好的我的經(jīng)常掉線

利用chatgpt5分鐘實(shí)現(xiàn)了網(wǎng)站的暗黑主題切換功能

相關(guān)帖子

產(chǎn)品服務(wù)

開發(fā)者服務(wù)

使用教程