WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Basculer mode sombre CSS
6197
codex
Publiez votre code
Recommandé
15 July 2025
Modèle HTML de générateur de citations en français
30 June 2023
Barre de navigation CSS responsive
4 May 2025
Modèle de barre de navigation HTML et CSS réactif
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"} ); });
