WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Dark Mode Toggle
6622
codex
Publish Your Code
Recommended
10 July 2025
CSS Floating Interface Animation
17 May 2025
modern web sit
30 October 2025
CSS Social Media Navigation Bar
index.html
Copy
<!DOCTYPE html> <html lang="en"> <head> <title>Webleb</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="/css/styles.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="darkmode"> <div class="light fa fa-sun"></div> <div class="dark fa fa-moon"></div> </div> <p href="">Join our discord <a href="https://discord.com/invite/SnM3Z8VJEA" style="text-decoration: none;">here</a></p> <script src="/js/main.js"></script> </body> </html>
styles.css
Copy
body { background: #f9f9f9; color: #202225; align-items:center; display: flex; justify-content:center; height: 100vh; } body div.darkmode { display: inline-block; font-size: 2rem; padding: 1rem 1rem 0.75rem 1rem; cursor: pointer; } body.dark .darkmode .light, body:not(.dark) .darkmode .dark { display: none; } .fa{ cursor: pointer; }
main.js
Copy
$(".darkmode").click(function(){ $("body").toggleClass("dark") .css( //3 $("body").hasClass("dark") ? {background:"#000000", color:"#f9f9f9"} : {background:"#f9f9f9", color:"#202225"} ); });
