Il ne fait aucun doute que le mode sombre fait fureur ces jours-ci. De plus en plus d'applications offrent la possibilité de basculer sur un thème sombre, et pour cause. Si vous cherchez à ajouter le mode sombre à votre application React, il y a quelques choses que vous devrez faire. Dans cet article, vous apprendrez à ajouter le mode sombre à une application React à l'aide des crochets useState et useEffect.

Qu'est-ce que le mode sombre ?

Le mode sombre est un thème qui fait passer la palette de couleurs d'une application du clair au foncé. De nos jours, la plupart des applications ont la possibilité de basculer entre les modes clair et sombre. Cela peut être utile pour ceux qui préfèrent travailler dans un environnement sombre ou pour ceux qui trouvent cela plus agréable pour les yeux.

Pourquoi utiliser le mode sombre ?

Il existe un certain nombre de raisons pour lesquelles vous pourriez vouloir utiliser le mode sombre dans votre application React. Jetons un coup d'œil à quelques-uns des plus populaires.

instagram viewer

1. Améliorer la durée de vie de la batterie

L'un des avantages du mode sombre est qu'il peut aider à améliorer la durée de vie de la batterie sur les appareils dotés d'écrans OLED ou AMOLED. En effet, les pixels plus sombres nécessitent moins d'énergie pour s'afficher.

2. Réduire la fatigue oculaire

Si vous vous retrouvez à naviguer sur le Web ou à utiliser des applications la nuit, le mode sombre peut aider à réduire la fatigue oculaire. En effet, cela diminue la quantité de lumière blanche ou bleue brillante émise par l'écran.

3. Créez une expérience plus immersive

Certaines personnes trouvent que le mode sombre crée une expérience plus immersive. Cela peut être particulièrement vrai lorsque vous utilisez des applications ou des sites Web avec beaucoup de contenu, tels que des applications d'actualités ou des médias sociaux.

Comment ajouter le mode sombre à une application React

Ajouter le mode sombre à une application React est relativement simple. Les étapes nécessaires pour ajouter le mode sombre à votre application React sont répertoriées ci-dessous.

Avant de commencer, vous devez vous assurer que vous disposez d'un Mise en place de l'application React.

1. Utiliser le crochet useState

La première chose que vous devrez faire est de créer une variable d'état pour suivre le thème actuel de votre application. Cela peut être fait en utilisant le crochet useState. Pour cela, vous devez avoir une compréhension de base de comment travailler avec le hook useState.

importer Réagissez, { useState } de 'réagir';
fonctionApplication() {
 const [theme, setTheme] = useState('lumière');
revenir (
`Application ${thème}`}>
<h1>Bonjour le monde!</h1>
</div>
 );
}
exporterdéfaut application ;

L'extrait de code importe le hook useState de React et crée une variable d'état appelée theme. La variable de thème suit le thème actuel de l'application, que le code définit par défaut sur "light".

2. Ajouter un bouton bascule

Ensuite, ajoutez un bouton bascule à l'application afin que les utilisateurs puissent basculer entre les modes clair et sombre. Cela peut être fait avec le code suivant :

importer Réagissez, { useState } de 'réagir';
fonctionApplication() {
 const [theme, setTheme] = useState('lumière');
constante toggleTheme = () => {
 si (thème 'lumière') {
 setTheme('foncé');
 } autre {
 setTheme('lumière');
 }
 };
revenir (
`Application ${thème}`}>
<bouton onClick={toggleTheme}>Basculer le thème</button>
<h1>Bonjour le monde!</h1>
</div>
 );
}
exporterdéfaut application ;

L'extrait de code ci-dessus inclut une fonction toggleTheme pour changer la variable d'état du thème entre 'light' et 'dark', ainsi qu'un bouton pour appeler la fonction toggleTheme lorsqu'on clique dessus.

3. Utilisez le crochet useEffect

Ensuite, utilisez le crochet useEffect pour mettre à jour dynamiquement le thème de l'application en fonction de la variable d'état du thème.

importer Réagir, { useState, useEffect } de 'réagir';
fonctionApplication() {
 const [theme, setTheme] = useState('lumière');
constante toggleTheme = () => {
 si (thème 'lumière') {
 setTheme('foncé');
 } autre {
 setTheme('lumière');
 }
 };
 useEffet(() => {
document.body.className = thème ;
 }, [thème]);
revenir (
`Application ${thème}`}>
<bouton onClick={toggleTheme}>Basculer le thème</button>
<h1>Bonjour le monde!</h1>
</div>
 );
}
exporterdéfaut application ;

L'extrait de code ci-dessus utilise le crochet useEffect pour mettre à jour le nom de classe de l'élément document.body en fonction de la variable d'état du thème. Cela permet de mettre à jour dynamiquement le CSS de l'application en fonction du thème.

4. Ajout du CSS pour les modes sombre et clair

Ensuite, ajoutez le CSS pour les modes sombre et clair. Vous pouvez le faire en créant un fichier appelé "darkMode.css" et en ajoutant le CSS suivant :

.foncé {
 Couleur de l'arrière plan: #333;
 Couleur: #fff;
}
.lumière {
 Couleur de l'arrière plan: #fff;
 Couleur: #333;
}

Après cela, vous devrez importer le fichier CSS dans votre application. Cela peut être fait avec le code suivant :

importer Réagir, { useState, useEffect } de 'réagir';
importer './darkMode.css';
fonctionApplication() {
 const [theme, setTheme] = useState('lumière');
constante toggleTheme = () => {
 si (thème 'lumière') {
 setTheme('foncé');
 } autre {
 setTheme('lumière');
 }
 };
 useEffet(() => {
document.body.className = thème ;
 }, [thème]);
revenir (
`Application ${thème}`}>
<bouton onClick={toggleTheme}>Basculer le thème</button>
<h1>Bonjour le monde!</h1>
</div>
 );
}
exporterdéfaut application ;

5. Passer à différents modes

Maintenant que vous avez ajouté le CSS pour les modes sombre et clair, vous pouvez basculer entre eux en cliquant sur le bouton bascule. Pour ce faire, vous devez d'abord démarrer le serveur de développement. Vous pouvez le faire en exécutant la commande de terminal suivante :

npm début

Après cela, vous pouvez ouvrir l'application dans le navigateur et cliquer sur le bouton bascule pour basculer entre les modes sombre et clair.

Options supplémentaires pour le mode sombre dans React

Si vous souhaitez que le thème persiste lors des actualisations de page, vous pouvez utiliser l'API localStorage pour stocker les données. Pour ce faire, vous devez d'abord ajouter le code suivant à votre application :

importer Réagir, { useState, useEffect } de 'réagir';
importer './darkMode.css';
fonctionApplication() {
constante [theme, setTheme] = useState(
 localStorage.getItem('thème') || 'lumière'
 );
constante toggleTheme = () => {
 si (thème 'lumière') {
 setTheme('foncé');
 } autre {
 setTheme('lumière');
 }
 };
 useEffet(() => {
 localStorage.setItem('thème', thème);
document.body.className = thème ;
 }, [thème]);
revenir (
`Application ${thème}`}>
<bouton onClick={toggleTheme}>Basculer le thème</button>
<h1>Bonjour le monde!</h1>
</div>
 );
}
exporterdéfaut application ;

L'extrait de code ci-dessus inclut la possibilité de conserver le thème après l'actualisation de la page. Ceci est fait en utilisant l'API localStorage. Tout d'abord, il vérifie s'il existe un thème stocké dans localStorage.

S'il y a un thème, ce thème est utilisé. Sinon, le thème 'light' est utilisé. Ensuite, le code est ajouté au crochet useEffect pour stocker le thème dans localStorage. Cela garantit que le thème est conservé à travers les actualisations de page.

Le mode sombre ne se termine pas en réaction

Il existe de nombreuses façons d'ajouter le mode sombre à votre application React. Dans cet article, une façon de le faire en utilisant les hooks useState et useEffect est montrée. Cependant, il existe de nombreuses autres façons de le faire.

Par exemple, vous pouvez utiliser l'API React Context pour créer un fournisseur de thème. Cela vous permettrait d'envelopper l'intégralité de votre application dans un composant de fournisseur de thème et d'accéder au thème n'importe où dans votre application.

Vous pouvez également activer le mode sombre sur votre navigateur et utiliser des requêtes média CSS pour appliquer différents styles en fonction du thème du navigateur.