如何切換深色模式
使用 CSS 和 JavaScript 在深色模式和淺色模式之間切換。
切換類
步驟 1) 新增 HTML
使用任何應該儲存您要切換設計的內容的元素。在我們的示例中，為簡單起見，我們將使用 <body>
示例
<body>
步驟 2) 新增 CSS
設定 <body> 元素的樣式並建立一個用於切換的 .dark-mode 類
示例
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
步驟 3) 新增 JavaScript
獲取 <body> 元素並在 .dark-mode 類之間切換
示例
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
自己動手試一試 »
提示：另請參閱 如何新增類。
提示：在我們的 JavaScript 參考中瞭解有關 classList 屬性的更多資訊。
