利用chatgpt5分鐘實現了網站的暗黑主題切換功能

qzuser1212 · 發表于 2023-3-26 23:51:28

用的還是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模板

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

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

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

s77 · 發表于 2023-3-27 15:06:31

學習學習。

小花 · 發表于 2023-3-27 16:30:34

謝謝謝謝謝尋尋

276397082 · 發表于 2023-3-27 21:06:29

提示: 作者被禁止或刪除內容自動屏蔽

gulaibai · 發表于 2023-3-27 22:06:14

以后都不會有站長了

yezirui · 發表于 2023-3-29 02:35:22

感謝分享

Guoyuh78 · 發表于 2023-3-29 22:04:18

利用chatgpt5分鐘實現了網站的暗黑主題切換

Guoyuh78 · 發表于 2023-3-29 22:07:57

我搭建了一個ChatGPT 網頁可以直接用 ailiao.wang

276397082 · 發表于 2023-3-30 16:06:31

提示: 作者被禁止或刪除內容自動屏蔽

qzuser1212 · 發表于 2023-3-30 19:28:20

Guoyuh78 發表于 2023-3-29 22:07
我搭建了一個ChatGPT 網頁可以直接用 ailiao.wang

好的我的經常掉線

利用chatgpt5分鐘實現了網站的暗黑主題切換功能

相關帖子

產品服務

開發者服務

使用教程