Il est devenu populaire pour les applications d'avoir un paramètre qui vous permet de basculer entre les modes sombre et clair. C'est peut-être dû à la popularité des interfaces utilisateur sombres, peut-être parce que les applications deviennent progressivement plus configurables.

Le contexte React est un moyen simple de partager des données à l'échelle mondiale, mais il peut rendre la réutilisation des composants plus difficile. Comme alternative, vous pouvez créer un composant de bouton en mode sombre qui utilise les hooks useEffect et useState au lieu du contexte. Il basculera un attribut de données sur l'élément de corps que les styles CSS peuvent cibler.

Ce dont vous aurez besoin

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

  • Une version récente de Node installée sur votre machine.
  • Une compréhension de base de React et Crochets de réaction.
  • Un projet de démarrage React. Juste créer une application React et vous êtes prêt à partir.

Créer un composant de bouton

Le composant bouton sera chargé de basculer le thème de sombre à clair. Dans une application réelle, ce bouton peut faire partie du composant Navbar.

instagram viewer

Dans le dossier src, créez un nouveau fichier appelé Button.js et ajoutez le code suivant.

importer { useState } de 'réagir'
exporterdéfautfonctionBouton() {
 const [theme, settheme] = useState("foncé")
constante handleToggle = () => {
 const nouveauThème = thème "lumière"? "foncé": "lumière"
 définir le thème (nouveau thème)
 }
revenir (
<>
<bouton className="thèmeBtn" onClick={handleToggle}>
 {thème "lumière"? <envergure>foncé</span>: <envergure>lumière</span>}
</button>
</>
 )
}

Tout d'abord, importez le hook useState() de React. Vous l'utiliserez pour garder une trace du thème actuel.

Dans le composant Button, initialisez l'état à dark. La fonction handleToggle() s'occupera de la fonctionnalité de basculement. Il s'exécute à chaque clic sur le bouton.

Ce composant bascule également le texte du bouton lorsqu'il change de thème.

Pour afficher le composant Button, importez-le dans App.js.

importer Bouton de './Bouton';
fonctionApplication() {
revenir (
<div>
<Bouton/>
</div>
 );
}
exporterdéfaut application ;

Créer les styles CSS

À l'heure actuelle, cliquer sur le bouton ne modifie pas l'interface utilisateur de l'application React. Pour cela, vous devrez d'abord créer les styles CSS pour le mode sombre et clair.

Dans App.css, ajoutez ce qui suit.

corps {
 --color-text-primaire: #131616;
 --color-text-secondaire: #ff6b00 ;
 --color-bg-primaire: #E6EDEE ;
 --color-bg-secondaire: #7d86881c;
 Contexte: var(--couleur-bg-primaire);
 Couleur: var(--couleur-texte-primaire);
transition: Contexte 0.25sfacilité d'entrée;
}
corps[data-theme="lumière"] {
 --color-text-primaire: #131616;
 --color-bg-primaire: #E6EDEE ;
}
corps[data-theme="foncé"] {
 --color-text-primaire: #F2F5F7 ;
 --color-bg-primaire: #0E141B ;
}

Ici, vous définissez les styles de l'élément body à l'aide des attributs de données. Il y a l'attribut de données de thème clair et l'attribut de données de thème sombre. Chacun d'eux a des variables CSS avec des couleurs différentes. L'utilisation des attributs de données CSS vous permettra de changer les styles en fonction des données. Si un utilisateur sélectionne un thème sombre, vous pouvez définir l'attribut de données du corps sur sombre et l'interface utilisateur changera.

Vous pouvez également modifier les styles d'élément de bouton pour changer avec le thème.

.themeBtn {
 rembourrage: 10px ;
 Couleur: var(--couleur-texte-primaire);
 fond: transparent ;
 frontière: 1px solide var(--couleur-texte-primaire);
 curseur: pointeur ;
}

Modifier le composant du bouton pour basculer les styles

Pour basculer les styles définis dans le fichier CSS, vous devrez définir les données dans l'élément body dans la fonction handleToggle().

Dans Button.js, modifiez handleToggle() comme ceci :

constante handleToggle = () => {
 const nouveauThème = thème "lumière"? "foncé": "lumière"
 définir le thème (nouveau thème)
document.body.dataset.theme = thème
}

Si vous cliquez sur le bouton, l'arrière-plan doit passer du foncé au clair ou du clair au foncé. Cependant, si vous actualisez la page, le thème se réinitialise. Pour conserver le paramètre de thème, stockez la préférence de thème dans stockage local.

Préférence utilisateur persistante dans le stockage local

Vous devez récupérer la préférence utilisateur dès que le composant Button s'affiche. Le hook useEffect() est parfait pour cela car il s'exécute après chaque rendu.

Avant de récupérer le thème du stockage local, vous devez d'abord le stocker.

Créez une nouvelle fonction appelée storeUserPreference() dans Button.js.

constante storeUserSetPreference = (préf) => {
 localStorage.setItem("thème", préf);
};

Cette fonction reçoit la préférence de l'utilisateur en tant qu'argument et la stocke en tant qu'élément appelé thème.

Vous appellerez cette fonction chaque fois que l'utilisateur basculera le thème. Modifiez donc la fonction handleToggle() pour qu'elle ressemble à ceci :

constante handleToggle = () => {
 const nouveauThème = thème "lumière"? "foncé": "lumière"
 définir le thème (nouveau thème)
 storeUserSetPreference (nouveau thème)
document.body.dataset.theme = thème
}

La fonction suivante récupère le thème du stockage local :

constante getUserSetPreference = () => {
 return localStorage.getItem("thème");
};

Vous l'utiliserez dans le crochet useEffect afin que chaque fois que le composant s'affiche, il récupère la préférence du stockage local pour mettre à jour le thème.

useEffet(() => {
constante userSetPreference = getUserSetPreference();
si (userSetPreference) {
 définir le thème (userSetPreference)
 }
document.body.dataset.theme = thème
}, [thème])

Obtenir les préférences de l'utilisateur à partir des paramètres du navigateur

Pour une expérience utilisateur encore meilleure, vous pouvez utiliser le préfère-color-schema Fonction multimédia CSS pour définir le thème. Cela doit refléter les paramètres système d'un utilisateur qu'il peut contrôler via son système d'exploitation ou son navigateur. Le réglage peut être clair ou sombre. Dans votre application, vous devez vérifier ce paramètre immédiatement après le chargement du composant de bouton. Cela signifie implémenter cette fonctionnalité dans le crochet useEffect().

Tout d'abord, créez une fonction qui récupère la préférence de l'utilisateur.

Dans Button.js, ajoutez ce qui suit.

constante getMediaQueryPreference = () => {
 const mediaQuery = "(préfère le jeu de couleurs: sombre)";
constante mql = la fenêtre.matchMedia (mediaQuery);
constante aPréférence = Type de mql.matches "booléen" ;
si (aPréférence) {
 retourner mql.matches? "foncé": "lumière";
 }
};

Ensuite, modifiez le crochet useEffect() pour récupérer la préférence de requête multimédia et utilisez-la si aucun thème n'est défini dans le stockage local.

useEffet(() => {
constante userSetPreference = getUserSetPreference();
constante mediaQueryPreference = getMediaQueryPreference();
si (userSetPreference) {
 définir le thème (userSetPreference)
 } autre {
 définir le thème (mediaQueryPreference)
 }
document.body.dataset.theme = thème
}, [thème])

Si vous redémarrez votre application, le thème doit correspondre aux paramètres de votre système.

Utilisation de React Context pour basculer en mode sombre

Vous pouvez utiliser des attributs de données, CSS et des crochets React pour basculer le thème d'une application React.

Une autre approche pour gérer le mode sombre dans React consiste à utiliser l'API de contexte. Le contexte React vous permet de partager des données entre les composants sans avoir à les transmettre via des accessoires. Lorsque vous l'utilisez pour basculer entre les thèmes, vous créez un contexte de thème auquel vous pouvez accéder dans toute l'application. Vous pouvez ensuite utiliser la valeur de thème pour appliquer des styles correspondants.

Bien que cette approche fonctionne, l'utilisation des attributs de données CSS est plus simple.