Le moyen le plus simple d'ajouter le mode sombre à votre site Web-js tutoriel-php.cn

Le moyen le plus simple d'ajouter le mode sombre à votre site Web

WBOY

Libérer： 2024-07-29 04:46:23

original

590 Les gens l'ont consulté

The Easiest Way to Add Dark Mode to Your Website

La possibilité d'utiliser des sites Web et des applications en mode sombre a gagné en popularité ces dernières années. Il soulage la fatigue oculaire, prolonge la durée de vie de la batterie des appareils à écran OLED et offre un substitut esthétique au thème lumineux traditionnel. Ce tutoriel vous montrera comment utiliser JavaScript pour basculer les thèmes et les variables CSS afin d'ajouter le mode sombre à votre site Web.

Étape 1 : Configuration de votre code HTML

Tout d'abord, commençons par une structure HTML de base. Créez un fichier index.html avec le contenu suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Dark Mode Tutorial</h1>
        <button id="theme-toggle">Toggle Dark Mode</button>
    </header>
    <main>
        <p>This is a sample website to demonstrate dark mode implementation.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

Copier après la connexion

Ce fichier HTML comprend un en-tête avec un titre et un bouton pour basculer en mode sombre, une zone de contenu principale avec du texte et des liens vers nos fichiers CSS et JavaScript.

Étape 2 : Définition des variables CSS

Définissons maintenant les variables dans notre CSS. Créez un fichier styles.css avec le contenu suivant :

:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background-color: #f1f1f1;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

header {
    background-color: var(--header-background-color);
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

.dark-mode {
    --background-color: #181818;
    --text-color: #ffffff;
    --header-background-color: #242424;
}

Copier après la connexion

Nous utilisons :root pour définir un groupe de variables CSS dans ce fichier CSS. Pour le mode clair, ces variables déterminent la couleur d’arrière-plan, la couleur du texte et la couleur d’arrière-plan de l’en-tête. De plus, une classe .dark-mode est définie et ses paramètres ont priorité sur ces variables. Une transition transparente entre les thèmes est garantie par la propriété de transition de l'élément body.

Étape 3 : ajout de JavaScript pour le basculement de thème

Maintenant, ajoutons le JavaScript pour gérer le basculement du thème. Créez un fichier script.js avec le contenu suivant :

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.add(savedTheme);
}

// Toggle dark mode
themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save user preference
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.removeItem('theme');
    }
});

Copier après la connexion

Ce script sélectionne le bouton bascule du thème et l'élément body. Lorsque vous cliquez sur le bouton, il active la classe mode sombre sur le corps. Le script enregistre également les préférences de thème de l'utilisateur dans localStorage, de sorte que le thème persiste lors des rechargements de page.

Étape 4 : tester la mise en œuvre

Lancez votre navigateur Web et ouvrez le fichier index.html pour tester l'implémentation. Pour basculer entre les thèmes clairs et sombres, cliquez sur le bouton « Basculer le mode sombre ».
N'oubliez pas que l'actualisation de la page ne devrait pas affecter la préférence du thème.

Conclusion

Vous pouvez rapidement ajouter un mode sombre à votre site Web en utilisant des variables CSS et un peu de JavaScript. Cette méthodologie facilite des transitions de thème transparentes et offre une expérience utilisateur améliorée. N'hésitez pas à ajouter plus d'éléments à votre page et à modifier les styles afin de vous appuyer sur cette leçon.

Bon codage :D

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!