Philip : /* Exemple de Basculement entre Thème Clair et Sombre */

2025-02-10T08:10:13Z

Exemple de Basculement entre Thème Clair et Sombre

@@ Ligne 101 : / Ligne 101 : @@
 == Exemple de Basculement entre Thème Clair et Sombre ==
-<syntaxhighlight lang="html" copy>
+{{Iframe
-<!DOCTYPE html>
+|lien = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=fr
-<html lang="fr">
+|hauteur = 500px
-<head>
+|titre = Thème sombre avec CSS
-    <meta charset="UTF-8">
+}}
 == Conclusion ==

Philip : Page créée avec « Ces dernières années, le mode sombre est devenu une partie intégrante du design web moderne. Non seulement il réduit la fatigue oculaire lors du travail dans des conditions de faible luminosité, mais il économise également la batterie sur les appareils équipés d'écrans OLED. L'implémentation d'un thème sombre sur un site web en utilisant CSS est assez simple, mais il est important de le faire correctement pour que les utilisateurs puissent facilement... »

2025-02-05T18:28:19Z

Page créée avec « Ces dernières années, le mode sombre est devenu une partie intégrante du design web moderne. Non seulement il réduit la fatigue oculaire lors du travail dans des conditions de faible luminosité, mais il économise également la batterie sur les appareils équipés d'écrans OLED. L'implémentation d'un thème sombre sur un site web en utilisant CSS est assez simple, mais il est important de le faire correctement pour que les utilisateurs puissent facilement... »

Nouvelle page

Ces dernières années, le mode sombre est devenu une partie intégrante du design web moderne. Non seulement il réduit la fatigue oculaire lors du travail dans des conditions de faible luminosité, mais il économise également la batterie sur les appareils équipés d'écrans OLED. L'implémentation d'un thème sombre sur un site web en utilisant CSS est assez simple, mais il est important de le faire correctement pour que les utilisateurs puissent facilement basculer entre les versions claire et sombre.

== Principes de Base du Travail avec les Thèmes ==
Les thèmes sombres et clairs sont deux ensembles de styles qui peuvent être appliqués dynamiquement aux éléments du site web. Idéalement, les utilisateurs devraient avoir la possibilité de choisir quel thème utiliser, mais les préférences système du système d'exploitation peuvent également être prises en compte.

Il existe deux principales méthodes pour implémenter un thème sombre :

* Utilisation de variables CSS et basculement des styles via JavaScript
* Application automatique du thème basée sur les paramètres système en utilisant <code>prefers-color-scheme</code>

Les deux approches peuvent être combinées pour rendre la gestion des thèmes plus flexible.

== Utilisation des Variables CSS pour les Thèmes ==
L'une des méthodes les plus pratiques pour implémenter un thème sombre est d'utiliser des variables CSS (<code>custom properties</code>). Cela facilite la gestion des couleurs et autres paramètres de style.

Tout d'abord, créons des variables racine dans <code>:root</code> qui seront utilisées dans tout le document :
<syntaxhighlight lang="css" copy>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}

.dark-theme {
--bg-color: #121212;
--text-color: #ffffff;
}
</syntaxhighlight>
Ensuite, appliquons ces variables aux éléments de la page :
<syntaxhighlight lang="css" copy>
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Maintenant, il suffit d'ajouter la classe <code>.dark-theme</code> à <code><html></code> ou <code><body></code> pour changer les couleurs.

== Basculement des Thèmes avec JavaScript ==
Pour permettre aux utilisateurs de basculer entre les thèmes clair et sombre, vous pouvez utiliser JavaScript :
<syntaxhighlight lang="javascript" copy>
const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-theme');

// Sauvegarder le choix de l'utilisateur dans localStorage
if (document.documentElement.classList.contains('dark-theme')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});

// Vérifier les paramètres sauvegardés au chargement de la page
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark-theme');
}
</syntaxhighlight>
De cette façon, le choix de l'utilisateur est conservé après le rechargement de la page.

== Détection Automatique du Thème Système ==
Si vous souhaitez respecter les paramètres système de l'utilisateur, vous pouvez utiliser <code>prefers-color-scheme</code>. Cette media query applique automatiquement le thème approprié :
<syntaxhighlight lang="css" copy>
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
</syntaxhighlight>
Cette méthode est pratique car elle adapte immédiatement le site web aux préférences système. Cependant, si l'utilisateur souhaite sélectionner manuellement un thème, vous devrez combiner cette approche avec JavaScript.

== Combinaison de la Détection Automatique et de la Sélection Manuelle ==
Pour prendre en compte les deux méthodes, vous pouvez d'abord vérifier s'il existe un choix de thème sauvegardé dans <code>localStorage</code>. Sinon, appliquez les paramètres système :
<syntaxhighlight lang="javascript" copy>
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}
</syntaxhighlight>

== Création d'un Commutateur Convivial ==
Maintenant, ajoutons un bouton de basculement de thème en HTML :
<syntaxhighlight lang="html" copy>
<button id="theme-toggle">Changer de Thème</button>
</syntaxhighlight>
Le bouton permet à l'utilisateur de changer manuellement de thème, et la logique de sauvegarde du choix rend l'interaction pratique.

== Amélioration des Animations de Transition ==
Pour rendre le changement de thème fluide, vous pouvez ajouter une animation :
<syntaxhighlight lang="css" copy>
* {
transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Cela crée un effet d'assombrissement ou d'éclaircissement progressif lors du changement de thème.

== Exemple de Basculement entre Thème Clair et Sombre ==
<syntaxhighlight lang="html" copy>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Thème Clair et Sombre</title>
<style>
/* Styles de base et variables CSS */
:root {
--bg-color: #ffffff;
--text-color: #000000;
}

.dark-theme {
--bg-color: #121212;
--text-color: #ffffff;
}

body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
transition: background-color 0.3s, color 0.3s;
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: var(--text-color);
color: var(--bg-color);
border: none;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}

/* Animation pour les transitions fluides */
* {
transition: background-color 0.3s, color 0.3s;
}

/* Détection automatique du thème système */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #ffffff;
}
}
</style>
</head>
<body>
<h1>Exemple de Thème Clair et Sombre</h1>
<p>Voici un exemple d'implémentation de thèmes clair et sombre utilisant CSS, JavaScript et localStorage.</p>
<button id="theme-toggle">Changer de Thème</button>

<script>
// Logique de basculement du thème
const toggleThemeBtn = document.getElementById('theme-toggle');

// Vérifier les paramètres sauvegardés au chargement de la page
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}

// Basculer le thème au clic
toggleThemeBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-theme');

// Sauvegarder le choix de l'utilisateur dans localStorage
if (document.documentElement.classList.contains('dark-theme')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
</script>
</body>
</html>
</syntaxhighlight>

== Conclusion ==
L'implémentation d'un thème sombre sur un site web en utilisant CSS et JavaScript est une tâche relativement simple mais importante. L'utilisation de variables CSS rend le code pratique et évolutif, tandis que la combinaison de <code>prefers-color-scheme</code> et <code>localStorage</code> offre aux utilisateurs une flexibilité dans leurs choix. En résultat, le site web sera adaptatif et confortable à utiliser dans toutes les conditions d'éclairage.

==Articles CSS Connexes==
{{Encyclopedia CSS/Navigation}}
{{Navigation/CSS}}
[[Category:CSS]]
[[wj-ru:Темная тема с использованием CSS]]
[[wj-de:Dunkles Design mit CSS]]
[[wj-en:Dark Theme using CSS]]
[[wj-es:Tema oscuro usando CSS]]
[[wj-it:Tema scuro con CSS]]

Thème sombre avec CSS - Historique des versions

Philip : /* Exemple de Basculement entre Thème Clair et Sombre */

Philip : /* Exemple de Basculement entre Thème Clair et Sombre */