WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Dark Mode Switch CSS
555
bachir123
Open In Editor
Publish Your Code
Need a Website?
Recommended
18 November 2024
CSS Card Glow
26 May 2023
CSS 5 Star Rating
16 May 2025
A Code by Maxi-Digital, site de tutoriels informatiques moderne
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./stil.css" /> </head> <body> <button id="theme-toggle" style="border-radius:10px;padding:10px;">Switch Mode</button> <script src="./script.js"></script> </body> </html><!-- Replace with your HTML Code (Leave empty if not needed) -->
CSS
Copy
body { background-color: white; color: black; transition: background-color 0.3s ease, color 0.3s ease; display: flex; align-items: center; justify-content: center; margin: 250px; } body.dark-mode { background-color: black; color: white; }<!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
const toggleButton = document.getElementById("theme-toggle"); toggleButton.addEventListener("click", () => { document.body.classList.toggle("dark-mode"); });/* Replace with your JS Code (Leave empty if not needed) */
