Implémentation du mode sombre dans les applications React à l'aide de composants de style

L'une des fonctionnalités logicielles les plus demandées est le mode sombre (ou mode nuit, comme d'autres l'appellent). Nous voyons le mode sombre dans les applications que nous utilisons tous les jours. Des applications mobiles aux applications Web, le mode sombre est devenu vital pour les entreprises qui souhaitent prendre soin des yeux de leurs utilisateurs.

Le mode sombre est une fonctionnalité supplémentaire qui affiche principalement des surfaces sombres dans l'interface utilisateur. La plupart des grandes entreprises (telles que YouTube, Twitter et Netflix) ont adopté le mode sombre dans leurs applications mobiles et Web.

Bien que nous n'entrerons pas en détail dans React et les composants de style, une connaissance de base de React, CSS, et les composants de style seraient utiles. Ce tutoriel bénéficiera à ceux qui cherchent à améliorer leurs applications Web en s'adressant à ceux qui aiment le mode sombre.

Quelques jours avant la rédaction de cet article, StackOverflow a annoncé sa sortie du mode sombre, offrant aux utilisateurs la possibilité de basculer entre les deux modes.

Le mode sombre réduit la fatigue oculaire et aide lorsque vous travaillez longtemps

Qu'est-ce que le mode sombre?

Le mode sombre est le jeu de couleurs de toute interface qui affiche du texte clair et des éléments d'interface sur un fond sombre, ce qui rend l'écran un peu plus facile à regarder. téléphones portables, tablettes et ordinateurs. Le mode sombre réduit la lumière émise par l'écran, tout en conservant les rapports de contraste de couleur minimum requis pour la lisibilité.

Pourquoi devriez-vous vous soucier du mode sombre?

Le mode sombre améliore l'ergonomie visuelle en réduisant la fatigue oculaire, en ajustant l'écran à conditions d'éclairage actuelles et facilité d'utilisation la nuit ou dans des environnements sombres.

Avant d'implémenter le mode sombre dans notre application, examinons ses avantages.

Économie de batterie

Le mode sombre dans les applications Web et mobiles peut prolonge la durée de vie de la batterie d'un appareil. Google a confirmé que le mode sombre sur les écrans OLED a été d'une grande utilité pour la durée de vie de la batterie.

Par exemple, avec une luminosité de 50%, le mode sombre dans l'application YouTube économise environ 15% plus d'énergie à l'écran qu'un fond plat blanc. Avec une luminosité de l'écran de 100%, l'interface sombre permet d'économiser 60% d'énergie de l'écran.

Le mode sombre est beau

Le mode sombre est beau et il peut améliorer considérablement l'attrait de l'écran.

Bien que la plupart des produits look blanc fade similaire le mode sombre offre quelque chose de différent qui semble mystérieux et nouveau.

Il offre également de grandes opportunités pour présenter le contenu graphique comme les tableaux de bord, les images et les photos d'une manière nouvelle .

Maintenant que vous savez pourquoi vous devez implémenter le mode sombre dans votre prochaine application Web, plongeons-nous dans les composants stylisés, qui sont la ressource déterminante de ce tutoriel.

Le mode sombre est le jeu de couleurs de toute interface qui affiche du texte clair et des éléments d'interface sur un fond sombre, ce qui le rend un peu plus facile à regarder sur les téléphones mobiles, t

Que sont les composants de style?

Tout au long de cet article, nous utiliserons très souvent la bibliothèque de composants de style . Il y a toujours eu plusieurs façons de styliser une application web moderne. Il existe la méthode traditionnelle de stylisation au niveau du document, qui comprend la création d'un fichier index.css et sa liaison au code HTML ou le style à l'intérieur du fichier HTML.

Beaucoup de choses ont changé dans la manière dont le Web les applications sont conçues récemment, depuis l'introduction de CSS-in-JS.

CSS-in-JS fait référence à un modèle dans lequel CSS est composé à l'aide de JavaScript. Il utilise des littéraux de modèle balisés pour styliser les composants dans un fichier JavaScript.

Pour en savoir plus sur CSS-in-JS, consultez l'article d'Anna Monus sur le sujet.

styled-components est une bibliothèque CSS-in-JS qui vous permet d'utiliser toutes les fonctionnalités de CSS que vous aimez, y compris les requêtes multimédias, les pseudo-sélecteurs et l'imbrication.

Pourquoi les styled-components? [19659002] styled-components a été créé pour les raisons suivantes:

• Aucun nom de classe hell
  Au lieu de vous gratter la tête pour trouver un nom de classe pour un élément, styled-components génère des noms de classe uniques pour vos styles. Vous n'aurez jamais à vous soucier des fautes d'orthographe ou de l'utilisation de noms de classe qui n'ont aucune signification.
• L'utilisation d'accessoires
  styled-components nous permet d'étendre les propriétés de style à l'aide du paramètre props couramment utilisé dans React – ainsi, affectant dynamiquement la sensation d'un composant via l'état de l'application.
• Prend en charge la syntaxe Sass
  Écriture Sass la syntaxe prête à l'emploi sans avoir à configurer de préprocesseurs ou d'outils de construction supplémentaires est possible avec des composants stylisés. Dans vos définitions de style, vous pouvez utiliser les caractères et pour cibler le composant actuel, utiliser des pseudo-sélecteurs et expérimenter l'imbrication.
• Theming
  les styles-composants ont une prise en charge thématique complète en exportant un composant wrapper ThemeProvider . Ce composant fournit un thème à tous les composants React en lui-même via l'API Context. Dans l'arborescence de rendu, tous les composants de style auront accès au thème fourni, même lorsqu'ils ont plusieurs niveaux de profondeur. Alors que nous continuons dans ce didacticiel, nous allons approfondir les fonctionnalités de thème des composants stylisés.

Pour en savoir plus sur les avantages des composants stylisés, consultez l'article de Kris Guzman .

Implémentation du mode sombre

Dans cet article, nous allons implémenter le mode sombre sur une simple page Web de type YouTube.

Pour continuer, assurez-vous de cloner le référentiel d'origine de la branche starter

Configuration

Installons toutes les dépendances dans notre fichier package.json . Depuis le terminal, exécutez la commande suivante:

 npm install

Une fois l'installation réussie, exécutez npm start . Voici à quoi ressemble la page Web sans mode sombre implémenté dessus.

Pour installer composants de style dans votre exécution de terminal npm installez des composants de style .

Implémentation

Pour implémenter mode sombre, nous devons créer quatre composants différents.

• Thème
  Il contient les propriétés de couleur de nos thèmes clairs et sombres.
• GlobalStyles
  Ceci contient les styles globaux pour l'ensemble du document.
• Toggler
  Ceci contient l'élément bouton qui bascule la fonctionnalité.
• useDarkMode
  Ce crochet personnalisé gère la logique derrière le changement de thème et la persistance de notre thème dans localStorage.

Composant de thème

Dans dans le dossier src vous verrez des composants dans le dossier composants . Créez un fichier Themes.js et ajoutez-y le code suivant:

 export const const LightTheme = {
    corps: '#FFF',
    texte: '# 363537',
    toggleBorder: '#FFF',
    fond: '# 363537',
}
export const constThème = {
    corps: '# 363537',
    texte: '#FAFAFA',
    toggleBorder: '# 6B8096',
    fond: '# 999',
}

Ici, nous avons défini et exporté lightTheme et darkTheme des objets avec des variables de couleur distinctes. N'hésitez pas à expérimenter et à personnaliser les variables qui vous conviennent.

GlobalStyles Component

Restant dans votre dossier components créez un fichier globalStyles.js et ajoutez le code suivant :

 import {createGlobalStyle} de "styled-components"
export const GlobalStyles = createGlobalStyle`
  corps {
    fond: $ {({theme}) => theme.body};
    couleur: $ {({theme}) => theme.text};
    famille de polices: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: toutes les 0,50 s linéaires;
  }
  "

Nous avons importé createGlobalStyle à partir de composants de style. La méthode createGlobalStyle remplace la méthode désormais obsolète injectGlobal de la version 3 des composants de style. Cette méthode génère un composant React qui, une fois ajouté à votre arborescence de composants, injectera des styles globaux dans le document, dans notre cas, App.js .

Nous avons défini un composant GlobalStyle et assigné arrière-plan et couleur aux propriétés des valeurs à partir de l'objet thème. Ainsi, chaque fois que nous basculons sur la bascule, les valeurs changent en fonction du thème sombre ou des objets de thème clair que nous transmettons à ThemeProvider (qui seront créés plus tard au fur et à mesure).

La propriété de transition de 0,50 s permet à ce changement de se produire un peu plus en douceur, de sorte que lorsque nous basculons d'avant en arrière, nous pouvons voir les changements se produire.

Création d'une fonctionnalité de basculement de thème

Pour implémenter la fonctionnalité de basculement de thème, nous devons ajouter seulement quelques lignes de code. Dans le fichier App.js ajoutez le code suivant (notez que le code en surbrillance est ce que vous devez ajouter):

 import React, {useState, useEffect} de "react";
importer {ThemeProvider} à partir de "styled-components";
importer {GlobalStyles} depuis "./components/Globalstyle";
importer {lightTheme, darkTheme} depuis "./components/Themes"
import "./App.css";
importer dummyData depuis "./data";
importer CardList depuis "./components/CardList";
const App = () => {
const [videos, setVideos] = useState ([]);
const [theme, setTheme] = useState ('light');
const themeToggler = () => {
  theme === 'light'? setTheme ('dark'): setTheme ('light')
}
useEffect (() => {
    const timer = setTimeout (() => {
      setVideos (dummyData);
    }, 1000);
    return () => clearTimeout (timer);
  }, []);
  revenir (
    
      <>
      
          

             Changer de thème 
      {
      videos.map ((liste, index) => {
        revenir (
          

            
 {list.section} 
            
            

          
        );
      })}
        
      >
    

  );
};
exporter l'application par défaut;

Le code en surbrillance est celui nouvellement ajouté à App.js . Nous avons importé ThemeProvider de composants de style . ThemeProvider est un composant d'aide dans la bibliothèque de composants de style qui fournit un support de thème. Ce composant d'assistance injecte un thème dans tous les composants React en dessous de lui-même via l'API Context.

Dans l'arborescence de rendu, tous les composants de style auront accès au thème fourni, même lorsqu'ils sont profonds sur plusieurs niveaux. Consultez la section « Theming ».

Ensuite, nous importons le wrapper GlobalStyle de ./ components / Globalstyle . Enfin, à partir du haut, nous importons à la fois les objets lightTheme et darkTheme de ./ components / Themes .

Pour créer un basculement , nous avons besoin d'un état qui contient la valeur de couleur initiale de notre thème. Nous créons donc un état de thème et définissons l'état initial sur clair à l'aide du crochet useState .

Maintenant, pour la fonctionnalité de basculement. [19659005] La méthode themeToggler utilise un opérateur ternaire pour vérifier l'état du thème et elle bascule sombre ou claire en fonction de la valeur de la condition.

ThemeProvider un composant d'aide à composants de style, enveloppe tout dans la déclaration de retour et injecte tous les composants en dessous. N'oubliez pas que nos GlobalStyles injectent styles globaux dans nos composants; par conséquent, il est appelé à l'intérieur du composant wrapper ThemeProvider .

Enfin, nous avons créé un bouton avec un événement onClick qui lui affecte notre méthode themeToggler . [19659005] Voyons le résultat jusqu'à présent.

Notre fichier App.js doit être refactorisé; une grande partie de son code n'est pas SEC . (DRY signifie «ne vous répétez pas», un principe de base du développement de logiciels visant à réduire la répétition.) Toute la logique semble être dans App.js ; c'est une bonne pratique de séparer notre logique par souci de clarté. Nous allons donc créer un composant qui gère la fonctionnalité de basculement.

Basculer le composant

Toujours dans le dossier composants créer un fichier Toggler.js et ajouter le code suivant:

 import React from 'react'
import {func, string} de 'prop-types';
importation stylisée à partir de "composants stylisés"
const Button = styled.button`
  fond: $ {({theme}) => theme.background};
  border: 2px solid $ {({theme}) => theme.toggleBorder};
  couleur: $ {({theme}) => theme.text};
  rayon de bordure: 30 pixels;
  curseur: pointeur;
  taille de police: 0.8rem;
  rembourrage: 0,6rem;
  }
 `;
const Toggle = ({theme, toggleTheme}) => {
    revenir (
        
          Changer de thème
        
    );
};
Toggle.propTypes = {
    theme: string.isRequired,
    toggleTheme: func.isRequired,
}
exporter Toggle par défaut;

Pour garder les choses propres, nous avons stylisé notre bouton bascule dans le composant Basculer en utilisant la fonction stylée des composants stylés.

Ceci est purement pour la présentation;

À l'intérieur du composant Toggle nous passons deux accessoires:

• le thème fournit le thème actuel (clair ou foncé);
• la fonction toggleTheme sera utilisée pour basculer entre les thèmes.

Ensuite, nous renvoyons le composant Button et assignons une fonction toggleTheme à la fonction Événement onClick .

Enfin, nous utilisons propTypes pour définir nos types, en veillant à ce que notre thème soit une chaîne et . isRequired tandis que notre toggleTheme est func et estRequired .

Utilisation de crochets personnalisés ( useDarkMode )

Quand la construction d'une application, l'évolutivité est primordiale, ce qui signifie que notre logique métier doit être réutilisable, afin que nous puissions l'utiliser dans de nombreux endroits et même dans différents projets. [19659005] C'est pourquoi il serait formidable de déplacer notre fonctionnalité de basculement vers un composant distinct. Pour cela, nous allons créer notre propre hook personnalisé.

Créons un nouveau fichier nommé useDarkMode.js dans le dossier composants et déplaçons notre logique vers ce fichier, avec certains réglages. Ajoutez le code suivant au fichier:

 import {useEffect, useState} de 'react';
export const constDarkMode = () => {
    const [theme, setTheme] = useState ('light');

    const setMode = mode => {
        window.localStorage.setItem ('thème', mode)
        setTheme (mode)
    };

    const themeToggler = () => {
        theme === 'light'? setMode ('dark'): setMode ('light')
    };

    useEffect (() => {
        const localTheme = window.localStorage.getItem ('theme');
        localTheme && setTheme (localTheme)
    }, []);
    retour [theme, themeToggler]
};

Nous avons ajouté quelques éléments ici.

• setMode
  Nous utilisons localStorage pour persister entre les sessions dans le navigateur. Donc, si un utilisateur a choisi le thème sombre ou clair, c'est ce qu'il obtiendra lors de sa prochaine visite dans l'application ou s'il rechargera la page. Par conséquent, cette fonction définit notre état et passe le thème à localStorage .
• themeToggler
  Cette fonction utilise un opérateur ternaire pour vérifier l'état du thème et bascule soit sombre soit clair en fonction de la vérité de la condition.
• useEffect
  Nous avons implémenté le crochet useEffect pour vérifier le montage des composants. Si l'utilisateur a déjà sélectionné un thème, nous le transmettrons à notre fonction setTheme . Au final, nous reviendrons sur notre thème qui contient le thème choisi et la fonction themeToggler pour basculer entre les modes.

Je pense que vous allez convenons que notre composant en mode sombre semble élégant.

Passons à App.js pour les touches finales.

 import React, {useState, useEffect} de "react";
importer {ThemeProvider} à partir de "styled-components";
importer {useDarkMode} depuis "./components/useDarkMode"
importer {GlobalStyles} depuis "./components/Globalstyle";
importer {lightTheme, darkTheme} depuis "./components/Themes"
importer Toggle à partir de "./components/Toggler"
import "./App.css";
importer dummyData depuis "./data";
importer CardList depuis "./components/CardList";
const App = () => {
const [videos, setVideos] = useState ([]);
const [theme, themeToggler] = useDarkMode ();
const themeMode = theme === 'light'? lightTheme: darkTheme;

useEffect (() => {
  const timer = setTimeout (() => {
    setVideos (dummyData);
  }, 1000);
  return () => clearTimeout (timer);
}, []);

revenir (
  
    <>
      
        

        
           {
            videos.map ((liste, index) => {
              revenir (
                

                  
 {list.section} 
                  
                  

                
              );
            })}
        
      >
    
  );
};
exporter l'application par défaut;

Le code en surbrillance vient d'être ajouté aux App.js .

Tout d'abord, nous importons notre crochet personnalisé, détruisons les thèmes et themeToggler et définissez-la avec la fonction useDarkMode .

Notez que la méthode useDarkMode remplace notre état thème qui était initialement dans . App.js .

Nous déclarons une variable themeMode qui rend un thème clair ou foncé en fonction de l'état du mode du thème à l'époque.

Maintenant, notre composant wrapper ThemeProvider se voit attribuer notre variable themeMode récemment créée au thème prop.

Et enfin, à la place du bouton normal, nous passons dans le composant Toggle .

N'oubliez pas que dans notre composant Toggle nous avons défini et stylisé un bouton et leur a transmis le thème et toggleTheme comme accessoires. Donc, tout ce que nous avons à faire est de passer ces accessoires de manière appropriée au composant Toggle qui agira comme notre bouton dans App.js .

Oui! Notre mode sombre est défini, et il persiste, ne changeant pas de couleur lorsque la page est actualisée ou visitée dans un nouvel onglet.

Voyons le résultat en action:

Presque tout fonctionne bien, mais il y a une petite chose que nous pouvons faire pour rendre notre expérience splendide. Basculez vers le thème sombre, puis rechargez la page. Voyez-vous que la couleur bleue du bouton se charge avant le gris pendant un bref instant? Cela se produit parce que notre crochet useState initie initialement le thème light . Après cela, useEffect s'exécute, vérifie localStorage puis définit le thème sur sombre . Passons à notre hook personnalisé useDarkMode.js et ajoutons un petit code:

 import {useEffect, useState} de 'react';
export const constDarkMode = () => {
    const [theme, setTheme] = useState ('light');
    const [mountedComponent, setMountedComponent] = useState (faux)
    const setMode = mode => {
        window.localStorage.setItem ('thème', mode)
        setTheme (mode)
    };
    const themeToggler = () => {
        theme === 'light'? setMode ('dark'): setMode ('light')
    };
    useEffect (() => {
        const localTheme = window.localStorage.getItem ('theme');
        localTheme? setTheme (localTheme): setMode ('light')
        setMountedComponent (true)
    }, []);
    retour [theme, themeToggler, mountedComponent]
};

Le code en surbrillance est le seul ajouté à useDarkMode.js . Nous avons créé un autre état nommé mountComponent et défini la valeur par défaut sur false à l'aide du crochet useState . Ensuite, à l'intérieur du crochet useEffect nous définissons l'état montéComposant sur vrai en utilisant setMountedComponent . Enfin, dans le tableau de retour nous incluons l'état montéComposant .

Enfin, ajoutons un peu de code dans App.js pour tout faire

 import React, {useState, useEffect} de "react";
importer {ThemeProvider} à partir de "styled-components";
importer {useDarkMode} depuis "./components/useDarkMode"
importer {GlobalStyles} depuis "./components/Globalstyle";
importer {lightTheme, darkTheme} depuis "./components/Themes"
importer Toggle à partir de "./components/Toggler"
import "./App.css";
importer dummyData depuis "./data";
importer CardList depuis "./components/CardList";
const App = () => {
  const [videos, setVideos] = useState ([]);
  const [theme, themeToggler, mountedComponent] = useDarkMode ();
  const themeMode = theme === 'light'? lightTheme: darkTheme;
  useEffect (() => {
    const timer = setTimeout (() => {
      setVideos (dummyData);
    }, 1000);
    return () => clearTimeout (timer);
  }, []);
  if (! mountComponent) return 

  revenir (
    
      <>
      
        

          
           {
            videos.map ((liste, index) => {
              revenir (
                

                  
 {list.section} 
                  
                  

                
              );
            })}
        
      >
    

  );
};
exporter l'application par défaut;

Nous avons ajouté notre état montéComposant comme accessoire dans notre crochet useDarkMode et nous avons vérifié si notre composant était monté, car c'est ce qui se passe dans le useEffect crochet. Si cela ne s'est pas encore produit, nous rendrons un div vide .

Voyons le résultat de notre page Web en mode sombre.

Maintenant, vous remarquerez qu'en mode sombre, lorsque la page se recharge, la couleur du bouton ne change pas.

Conclusion

Mode sombre devient de plus en plus une préférence utilisateur, et l'implémenter dans une application Web React est beaucoup plus facile lors de l'utilisation de l'encapsuleur de thème ThemeProvider dans des composants de style. Allez-y et expérimentez avec des composants de style lorsque vous implémentez le mode sombre; vous pouvez ajouter des icônes au lieu d'un bouton.

Veuillez partager vos commentaires et votre expérience avec la fonctionnalité de thème dans les composants de style dans la section des commentaires ci-dessous. Je serais ravi de voir ce que vous proposez!

Le référentiel de prise en charge de cet article est disponible sur GitHub . Consultez également sur CodeSandbox .

Références

(ks, ra, il, al)