WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सीएसएस डार्क मोड टॉगल
6861
codex
अपना कोड प्रकाशित करें
अनुशंसित
21 June 2024
गोल्फ़ टॉगल
15 August 2025
सीएसएस कार्यालय लेआउट संरचना
18 September 2025
सीएसएस एनिमेशन: घोस्ट मेमोरी फ़्रैगमेंट प्रभाव
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"} ); });
