Personnalisation du mode sombre avec des variables CSS et JavaScript

La mise en œuvre d'un mode sombre pour votre application ou votre site Web est cruciale pour offrir une expérience utilisateur fluide. Les règles multimédias CSS natives offrent aux navigateurs une option pour détecter les modes sombres définis par le système, mais les utilisateurs peuvent préférer un thème différent pour des sites spécifiques ou des navigateurs qui ne le prennent pas encore en charge, comme Microsoft Edge.

Pour résoudre Ceci, nous pouvons utiliser des variables CSS et JavaScript pour gérer les paramètres du thème.

Personnalisation CSS avec des variables et des thèmes

Définissez les variables CSS à la racine ou au niveau par défaut, et spécifiez un thème sombre :

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

Appelez les variables si nécessaire pour ajuster les styles de manière dynamique.

JavaScript pour la détection et le basculement de thèmes

Dans la section d'en-tête de votre code HTML, ajoutez JavaScript pour détecter le thème préféré de l'utilisateur :

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

Utilisez JavaScript pour basculer entre les thèmes clairs et sombres :

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

HTML pour le basculement de thème

Créez une case à cocher HTML pour le changement de thème contrôlé par l'utilisateur :

Avec cette approche, vous pouvez détecter automatiquement le thème de l'utilisateur, lui permettre de le remplacer et offrir une expérience personnalisée sur tous les navigateurs et plates-formes.