Home
JavaScript
tutoriel

Comment ajouter le mode nuit sur son site - LocalStorage

MODE-NUIT

Bienvenue sur notre guide pour créer un mode nuit persistant sur votre site web. Aujourd'hui, nous allons résoudre un problème qui a causé des petits fracas parmi nos amis développeurs : le mode nuit qui disparaît lorsque vous rafraîchissez la page. Ne vous inquiétez pas, nous allons mettre fin à cette éclipse !

Étape 1 : HTML

Double tap pour copier le code 


<!-- Bouton pour activer/désactiver le mode nuit -->
<button id="night-mode-toggle">Activer le Mode Nuit</button>

<!-- Votre contenu HTML habituel ici -->

Étape 2 : CSS

Double tap pour copier le code 


/* Styles pour le mode nuit */
body.night-mode {
    background-color: #121212;
    color: #fff;
}

Étape 3 : JavaScript

Double tap pour copier le code 


// Fonction pour basculer entre le mode jour et le mode nuit
function toggleNightMode() {
    const body = document.body;
    body.classList.toggle('night-mode');
    // Stockez l'état du mode nuit dans le local storage
    localStorage.setItem('nightMode', body.classList.contains('night-mode'));
}

// Écoutez les clics sur le bouton
const nightModeToggle = document.getElementById('night-mode-toggle');
if (nightModeToggle) {
    nightModeToggle.addEventListener('click', toggleNightMode);
}

// Vérifiez l'état du mode nuit dans le local storage
const nightMode = localStorage.getItem('nightMode');
if (nightMode && nightMode === 'true') {
    toggleNightMode(); // Activez le mode nuit si c'était activé précédemment
}

Et voilà ! Vous avez maintenant un mode nuit fonctionnel sur votre site web. Maintenant, vos visiteurs peuvent profiter de votre contenu, que ce soit en plein jour ou en pleine nuit.

© Coding Team - Tous droits réservés. Sauf la nuit, où nous partons faire la fête dans l'obscurité !

Commentaires

  • A+
  • A-