Comment puis-je créer un mode sombre personnalisable pour mon site Web à l'aide de variables CSS et de JavaScript ?

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 transparente. 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.

À 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 :

<code class="css">:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

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

Appelez les variables là où cela est nécessaire pour ajuster les styles de manière dynamique.

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

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

<code class="javascript">function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();</code>

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

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

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);</code>

HTML pour le basculement de thème

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

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
    <input type="checkbox" id="checkbox_theme">
</label></code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!