Mode sombre: Changer Complètement le fichier CSS!

Pour ceux-là qui gère des gros sites web qui comprennent un nombre infini du style, je vous propose un simple moyen en JavaScript qui vous permettra de remplacer juste le fichier CSS courante par un fichier CSS contenant du style sombre.

Marden Mbiya Mise à jour : 20 décembre 2022 211

Formation en Ligne en Développement Web Full stack : Début le 28 Février Inscrivez vous ici

Tout d’abord préparez vos deux fichiers CSS, je suppose que vous avez déjà des notions en HTML, CSS et JS.

Sur votre fichier HTML, insérez le lien vers votre fichier CSS courante avec un Id;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link id="stylechanger" rel="stylesheet" href="style/main.css">
    
</head>
<body>
    
</body>
</html>

Et créez y aussi un bouton qui déclenchera le processus de changement de la page avec la fonction onclick;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link id="stylechanger" rel="stylesheet" href="style/main.css">
</head>
<body>
    <button onclick="Switcher()">Cliquez pour changer en mode sombre </button>
</body>
</html>

Et sur votre fichier Javascript, Vous allez écrire votre fonction onclick qui récupère le lien (Href) par l’Id et change la source du fichier Css avec la propriété setAttribute, tout en émettant une condition de défaire cela quand on y clique pour la seconde fois.

function switcher () {


  let currentstyle = document.getElementById('stylechanger').getAttribute('href').trim();
  
  if (currentstyle == ('style/main.css')){

      document.getElementById('stylechanger').setAttribute('href', 'style/style.dark.css');
   
  }
  
  else{

      document.getElementById('stylechanger').setAttribute('href', 'style/main.css');
      
  }
   
}

Je crois que cela marche déjà, mais il reste un détail, laissez-moi devinez ; votre page revient à la normal quand vous actualisez le navigateur ? Alors il vous faut stocker la page en permanence dans votre navigateur.

Comment S’y prendre ?

On va commencer par affecter la propriété local Storage a une variable qu’on va utiliser plus tard. Et on l'écrit tout au debut.

let storage = window.localStorage;




  
  function switcher () {
  
  
    let currentstyle = document.getElementById('stylechanger').getAttribute('href').trim();
    
    if (currentstyle == ('style/main.css')){
  
        document.getElementById('stylechanger').setAttribute('href', 'style/style.dark.css');
        
    }
    
    else{
  
        document.getElementById('stylechanger').setAttribute('href', 'style/main.css');
       
    }
     
  }

Bien, notons qu'un objet Storage peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle. On lui ajoute une entrée en utilisant Storage.SetItem()

La méthode SetItem de l'interface Storage on lui donne le duo clé-valeur, on les ajoutes à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.

Pour plus savoir sur les clés et la methode SetItem, cliquez-ici savoir sur la méthode SetItem.

Ceci est un exemple, on devrait avoir quelque chose comme ça. SetIem comprends le nom de la clé et sa valeur.

storage.setItem("style", 'style/style.dark.css');

On va créer notre clé qui se sauvegarde elle-même, à chaque fois que vous décidez de basculer entre deux fichiers CSS ;

if(storage.getItem("style")!=undefined){
    document.getElementById('stylechanger').setAttribute('href', storage.getItem('style'));
  }else{
    storage.setItem("style", 'style/main.css'); // Save to storage
  
  }

Et cette clé on va l'utiliser à chaque condition, quand notre page bascule, on devrait avoir un code final comme ceci…

let storage = window.localStorage;

if(storage.getItem("style")!=undefined){
    document.getElementById('stylechanger').setAttribute('href', storage.getItem('style'));
  }else{
    storage.setItem("style", 'style/main.css'); // Save to storage
  
  }
  
  function switcher () {
  
  
    let currentstyle = document.getElementById('stylechanger').getAttribute('href').trim();
    
    if (currentstyle == ('style/main.css')){
  
        document.getElementById('stylechanger').setAttribute('href', 'style/style.dark.css');
        storage.setItem("style", 'style/style.dark.css');
    }
    
    else{
  
        document.getElementById('stylechanger').setAttribute('href', 'style/main.css');
        storage.setItem("style", 'style/main.css');
    }
     
  }

Voilà si vous avez des questions ; laissez-moi dans les commentaires. Si non vérifier ce code sur GitHub; Github code et encore visitez la démo Voir la demo en ligne

Javascript