使用CSS和JavaScript在明暗模式之間切換。
1.添加CSS
設置<body>元素的樣式並創建.dark-mode用於切換的類
body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; }
2。添加JavaScript
獲取<body>元素並在.dark-mode類之間切換：
function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); }
3.完整代碼
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; } </style> </head> <body> <h2>Toggle Dark/Light Mode</h2> <p>Click the button to toggle between dark and light mode for this page.</p> <button onclick="myFunction()">Toggle dark mode</button> <script> function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); } </script> </body> </html>
4.演示
