Fermer

avril 5, 2022

Basculer dynamiquement entre les modes clair et sombre avec KendoReact


Une fois que vous avez un thème sombre, comment implémentez-vous une bascule entre le mode sombre et le mode clair ? Que se passe-t-il si vous souhaitez apporter des modifications dynamiques aux thèmes lors de l'exécution ?

En tant que développeurs, nous aimons pouvoir faire passer nos sites préférés du mode clair au mode sombre. Ma coéquipière Kathryn a écrit un blog utile expliquant comment vous pouvezcréer un thème sombre avec KendoReact , ce qui a laissé une question intéressante sur la table. La question, qui m'a rendu très curieux, est la suivante : une fois que vous avez un thème sombre, comment implémentez-vous la bascule entre le mode sombre et le mode clair ?

Est-ce quelque chose que vous vous êtes demandé? Vous êtes au bon endroit.

Le défi

Le blog de Kathryn explique en détail les différentes méthodes de création de beaux thèmes sombres avecKendoRéagir . Quelle que soit la méthode que vous choisissez, à la fin, vous aurez deux feuilles de style contenant les styles pour les thèmes clairs et sombres.

Vous pouvez télécharger ces deux feuilles de style sur un réseau de diffusion de contenu (CDN) et basculer entre les liens à l'aide d'un simple composant déroulant ThemeChooser. J'ai créé un exemple simple pour illustrer cette approche en utilisant nos thèmes clairs et sombres pré-construits pour l'interface utilisateur de Kendo :

Que se passe-t-il si vous souhaitez apporter des modifications dynamiques aux thèmes lors de l'exécution ? Vous devrez probablement télécharger une nouvelle version des feuilles de style à chaque modification. Cela peut devenir exagéré si vous voulez changer une seule couleur. Découvrons comment résoudre ce problème !

La solution

Il existe deux étapes pour mettre en œuvre la commutation dynamique :

  1. Compiler les feuilles de style Sass en CSS au moment de l'exécution
  2. Implémenter un fournisseur pour basculer ces styles

Dans l'application, j'ai utilisé le gestionnaire de tâches Gulp pour compiler les fichiers Sass en CSS, puis les ajouter au dossier public afin qu'ils soient disponibles pour le client. Ensuite, j'ai utilisé lepackage npm react-css-theme-switchpour permuter entre les feuilles de style compilées par SASS pré-extraites au moment de l'exécution.

Si vous souhaitez suivre les étapes au fur et à mesure, vous pouvez trouver le code complet dansce référentiel GitHub . Passons maintenant à la configuration de l'application !

Configuration du projet

Nous allons utiliserCréer une application React pour échafauder rapidement un nouveau projet React. Exécutez la commande ci-dessous dans votre terminal pour créer un nouveau projet React.

$ npx create-react-app kendo-react-dark-mode $ cd kendo-react-dark-mode

Ce projet nécessite :

  • Node.js v14 ou plus récent
  • Gulp v4
  • npm v7 ou plus récent (si vous utilisez npm version < 7, assurez-vous que les dépendances suivantes sont installées :postcss préfixe automatique postcss-calc)
  • KendoRéagir –essai gratuit de 30 joursdisponible

Une fois la création du projet terminée, exécutez les commandes suivantes pour accéder au répertoire du projet et installer toutes les dépendances.

$ npm installer

Enfin, vous pouvez démarrer le serveur de développement en exécutant le$npm débutcommander.

Installation des composants KendoReact

Pour cette démo, nous allons ajouter leBouton de réactionetCommutateur de réactioncomposants de la bibliothèque KendoReact, nous commençons donc par l'installation des packages et des dépendances npm.

$ npm install --save @progress/kendo-react-buttons @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-drawing @progress/kendo-licensing

Noter: KendoRéagir est une bibliothèque de composants d'interface utilisateur commerciale, et dans le cadre de cela, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans vos projets React. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous diriger versPage de licence KendoReact.

Ajout des feuilles de style pour les thèmes clairs et sombres

Dans un premier temps, nous allons installer leThème par défaut de KendoReactvia au-dessus du niveau de la mer :

$ npm install --save @progress/kendo-theme-default

Ensuite, nous devons créer les feuilles de style Sass qui contiendront les styles KendoReact. Pour cela, il nous suffit d'importer les variables SCSS dont nous avons besoin pour chaque thème. Par exemple, pour le thème clair, nous utiliserons le style par défaut sans autres personnalisations :


@importer "~@progress/kendo-theme-default/dist/all.scss";

Et pour le thème sombre :


$thème sombre: vrai;
$ border-radius: 2pixels;
$primaire: #42e142;
$secondaire: # f6f6f6;
$info: #3e80ed;
$succès: #5ec232;
$avertissement: #fdce3e;
$erreur: #d51923;
$corps-texte: #ffffff;
$body-bg: #000000;
$titres-texte: #ffffff;
$texte-subtil: # e0e0e0;
$ texte désactivé: # d0d0d0;
$composant-texte: #ffffff;
$composant-bg: #101010;
$texte de base: #ffffff;
$base-bg: #151515;
$ texte survolé: #ffffff;
$ survolé-bg: #202020;
$texte-sélectionné: #ffffff;
$selected-bg: #42e142;
$kendo-bouton-texte: #ffffff;
$kendo-bouton-bg: #404040;
$lien-texte: #42e142;
$lien-survol-texte: #38c138;
$ série-a: #ff6358;
$ série-b: # ffe162;
$ série-c: #4cd180;
$ série-d: #4b5ffa;
$ série-e: #ac58ff;
$ série-f: #ff5892;
$kendo-switch-on-thumb-bg: #42e142;
$kendo-switch-off-thumb-bg: #42e142;
@importer~@progress/kendo-theme-default/dist/all.scss;

Compiler les fichiers SASS avec Gulp

Dans cette étape, nous allons créer une tâche Gulp qui compilera les fichiers Sass en CSS, puis les ajoutera au dossier public de notre application afin qu'ils puissent être disponibles pour que le client soit pré-récupéré et injecté.

Installez Gulp et les dépendances nécessaires pour réduire et résoudre les importations :

$ npm install –save-dev gulp @progress/kendo-theme-tass node-sass

Et créez un gulpfile.js :

constante {kendoSassBuild} = exiger('@progress/kendo-theme-tasks/src/build/kendo-build');
constantenodeSass= exiger('noeud-sass');
constante {séries} = exiger("gorgée");

constantethèmes= ['léger', 'foncé'];

une fonction buildStyles(cb) {thèmes.pour chaque((thème) => {
    kendoSassBuild({fichier: `./src/sass/${thème}-theme.scss`,sortir: {chemin: './Publique'
      },sassOptions: {la mise en oeuvre:nodeSass,style de sortie: 'comprimé'
      }
    });
    cb();
  });
}exportations.toupet= séries(buildStyles);

Fait intéressant:Il existe une nouvelle façon simplifiée de compiler les thèmes de l'interface utilisateur de Kendo avec tous les plug-ins requis (postcss, postcss-calc et autoprefixer) et un importateur de packages configuré qui résout les chemins d'importation spécifiques aux thèmes.

Pour plus d'informations, vous pouvez consulter cet effort dans le référentiel kendo-theme-tasks :https://github.com/telerik/kendo-theme-tasks#building-from-scss

Compiler automatiquement les fichiers Sass

Dans la propriété "scripts" de votre fichier package.json, ajoutez la commande "prestart". Il s'exécutera avant le démarrage comme son nom l'indique.

"scénarios": {
  "pré-départ": « avale le cul »,
  ...
},

Basculer entre les thèmes

Maintenant, nous avons nos thèmes CSS compilés dans le dossier public. Nous pouvons continuer à les utiliser dans notre application.

Dans la démo, j'ai utilisé leréagir-css-theme-switch npm package pour basculer entre les thèmes. Ajoutez-le à votre projet via :

$ npm install --save réagir-css-theme-switcher

Ensuite, dans le fichier index.js, nous ajouterons le ThemeSwitcherProvider en tant que wrapper pour notre composant App. Ce fournisseur stockera nos thèmes et le thème actuel.

importerRéagirà partir de 'réagir';
importerRéagirDOMà partir de 'réagir-dom';
importer './index.css';
importerApplicationà partir de './Application';
importer {ThemeSwitcherProvider} à partir de "réagir-css-theme-switcher";

constantethèmes= {foncé: `${traiter.env.PUBLIC_URL}/thème-sombre.css`,léger: `${traiter.env.PUBLIC_URL}/light-theme.css`,
};RéagirDOM.rendre(
  Réagir.StrictMode>
    ThemeSwitcherProvider themeMap={thèmes}thème par défaut="léger"point d'insertion="styles-point d'insertion"
    >
      Application/>
    /ThemeSwitcherProvider>
  /Réagir.StrictMode>,document.getElementById("racine")
);

Dans le fichier App.js, nous utiliserons également leuseThemeSwitcherhook, qui changera les thèmes et récupérera d'autres métadonnées :

importerRéagirà partir de "réagir";
importer "./App.css";
importer {useThemeSwitcher} à partir de "réagir-css-theme-switcher";
importer {Bouton} à partir de "@progress/kendo-react-boutons";
importer {Changer} à partir de "@progress/kendo-react-inputs";

une fonction Application() {
  constante [estDarkMode,setIsDarkModesetIsDarkMode] =Réagir.useState(vrai);
  constante {commutateur,thème actuel,statut,thèmes} = useThemeSwitcher();

  constante toggleTheme = () => {
    setIsDarkModesetIsDarkMode(!estDarkMode);
    commutateur({thème:estDarkMode?thèmes.foncé:thèmes.léger});
  };

  
  si (statut=== "Chargement en cours") {
    retourner nul;
  }

  retourner (
    div className="k-body fondu enchaîné principal">
      h1>Le thème actuel est: {thème actuel}/h1>
      Interrupteur coché={estDarkMode}sur le changement={toggleTheme} />
      Style de bouton={{largeur: 300,marginTop: 30 }}thèmeCouleur="primaire">Bouton principal/Bouton>
    /div>
  );
}

exportation défautApplication;

Et voila ! Nous avons implémenté un commutateur de mode sombre dynamique via un fournisseur de thème dans une application React.

Vos commentaires sont importants

Vous avez peut-être l'habitude de sauter de telles demandes, mais la vérité est que vos commentaires comptent vraiment. J'apprécierais que vous laissiez un commentaire ci-dessous.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link