Le « dark mode par défaut » est une tendance en webdesign où les sites web proposent une interface sombre comme option principale ou par défaut, plutôt que le traditionnel fond clair.
Cette approche répond à plusieurs besoins :
- Réduction de la fatigue oculaire, surtout dans des environnements peu éclairés
- Économie d’énergie sur les appareils à écran OLED
- Esthétique moderne et élégante
Exemple d’implémentation en CSS et JavaScript.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode par Défaut</title>
<style>
body {
transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
background-color: #1a1a1a;
color: #ffffff;
}
body.light-mode {
background-color: #ffffff;
color: #1a1a1a;
}
.toggle-btn {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body class="dark-mode">
<h1>Bienvenue sur notre site</h1>
<p>Ce site utilise le mode sombre par défaut.</p>
<button class="toggle-btn" onclick="toggleMode()">Changer de mode</button>
<script>
function toggleMode() {
const body = document.body;
body.classList.toggle('dark-mode');
body.classList.toggle('light-mode');
}
// Vérifier la préférence de l'utilisateur
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.body.classList.remove('dark-mode');
document.body.classList.add('light-mode');
}
</script>
</body>
</html>