Mode sombre facile (et tous les thèmes de couleur!) Dans React

Ce guide démontre une implémentation simple en mode sombre dans une application React, en se concentrant sur la facilité d'utilisation et l'intégration de l'équipe. Il évite les stratégies CSS complexes et exploite les variables CSS et les attributs de données pour une solution propre et efficace.

Le défi de gérer les styles et de mettre en œuvre le mode sombre dans un grand projet React conduit souvent à des solutions complexes. Bien qu'il existe de nombreuses options, elles s'appuient fréquemment sur des méthodologies ou des cadres CSS spécifiques. Cette approche privilégie la simplicité et la vitesse, ce qui la rend idéale pour les équipes de niveaux de compétence variables.

Une méthode améliorée, combinant des variables CSS avec le crochet useLocalStorage , fournit un système de thème robuste et convivial. Ce tutoriel vous guide en configurant et en exécutant ce système à partir de zéro, présentant son efficacité dans une nouvelle application React. En outre, il démontre l'intégration avec react-scoped-css pour une organisation CSS améliorée.

Configuration du projet

Ce guide assume la familiarité de base avec CSS, JavaScript et React. Assurez-vous que le nœud et le NPM sont installés. Créez une nouvelle application React en utilisant:

 NPX Create-React-App Easy-REACT-THEMES - Template TypeScript

(Remplacez easy-react-themes par le nom de votre projet; omettez --template typescript pour JavaScript). Ouvrez le projet dans votre éditeur de code (par exemple, VS Code en utilisant cd easy-react-themes; code . ) Et démarrez le serveur de développement ( npm start ). Enfin, installez use-local-storage :

 npm i use-local-storage

Implémentation de code

Effacez le contenu de App.css . Dans index.css , définissez vos thèmes en utilisant les variables CSS:

 :racine {
  - Background: blanc;
  --Text-primaire: noir;
  - Texte-Secondary: RoyalBlue;
  --Accent: violet;
}
[data-thème = 'dark'] {
  - Background: noir;
  --Text-primaire: blanc;
  --Text-secondaire: gris;
  --Accent: Darkred;
}

Cela utilise des propriétés personnalisées CSS (variables) et des attributs de données. Le sélecteur [data-theme='dark'] remplace les variables :root lorsque l'attribut data-theme est défini sur «Dark».

Dans App.tsx , importez useLocalStorage :

 importer uselocalstorage à partir de «use-local-storage»;

Ensuite, gérez l'état du thème:

 const defaultDark = window.matchMedia ('(préfère-Color-Scheme: Dark)'). Matches;
const [thème, setTheme] = usElocalStorage ('thème', defaultDark? 'Dark': 'Light');

Cela utilise useLocalStorage pour persister la sélection de thème à travers les sessions, en respectant les préférences du navigateur. L'attribut data-theme est appliqué au niveau supérieur<div> :<pre class="brush:php;toolbar:false">&lt;div data-theme=&quot;{theme}&quot;&gt; {/ * Votre contenu d'application ici * /} &lt;/div&gt;</pre> <p>Style vos composants dans <code>App.css à l'aide des variables CSS:

 .App {
  Couleur: var (- Text-primaire);
  Color d'arrière-plan: var (- arrière-plan);
  / * ... autres styles ... * /
  Transition: Tous .5S;
}
bouton {
  / * ... Styles de bouton utilisant les variables CSS ... * /
  Transition: Tous .5S;
}

Cela garantit que les styles se mettent à jour en douceur lorsque le thème change. Ajoutez un bouton pour basculer le thème.

Élargir la demande

Ajoutez un nouveau composant (par exemple, un carré coloré) pour démontrer l'évolutivité du système. Importez ce composant dans App.tsx .

Bonus: l'intégration avec React Scoped CSS

Pour l'amélioration de l'organisation CSS, intégrez react-scoped-css . Suivez les instructions d'installation pour Craco et craco-plugin-scoped-css . Renommez vos fichiers CSS (par exemple, app.css sur app.scoped.css ) et mettez à jour les importations en conséquence. Surtout, Leave index.css a non encope pour garantir l'application globale des variables CSS.

Cette approche offre une solution simple, efficace et maintenable pour implémenter le mode Dark et plusieurs thèmes dans les applications React. Le référentiel GitHub et la démo en direct fournissent d'autres ressources.