Fermer

novembre 30, 2021

Ajouter un mode sombre à votre application KendoReact


Que votre équipe cherche simplement à implémenter rapidement un mode sombre prêt à l'emploi ou à créer un thème de mode sombre entièrement personnalisé, KendoReact vous donne les outils pour personnaliser nos composants à votre guise ![19659002]Alors, vous souhaitez ajouter un mode sombre à votre application en utilisant KendoReact ? Tu n'es pas seul! Le mode sombre est extrêmement populaire pour de nombreuses raisons. C'est plus agréable pour les yeux, économise la batterie sur les appareils mobiles et les ordinateurs portables, a l'air élégant et peut être une excellente fonction d'accessibilité s'il est configuré correctement. C'est toujours agréable de pouvoir offrir une autre fonctionnalité à vos utilisateurs et, aussi populaire que le mode sombre soit devenu, de plus en plus d'utilisateurs s'attendent à ce qu'il fasse partie des offres par défaut d'une application !

KendoReact est hautement personnalisable et thématique, y compris (mais sans s'y limiter) la possibilité d'ajouter un mode sombre à votre application. En fait, il existe plusieurs façons d'atteindre cet objectif, selon le niveau de personnalisation de la conception que vous souhaitez apporter à votre implémentation en mode sombre. Nous examinerons toutes les options et vous pourrez décider laquelle conviendra le mieux à votre équipe et à votre application.

KendoReact Theming

Avant de plonger dans les options, voyons comment KendoReact définit divers termes liés Thème et personnalisation :

  • Les thèmes de conception sont un ensemble de styles mis à jour qui modifieront l'apparence de tous les composants, en modifiant la marge, le rembourrage, le rayon de la bordure et d'autres éléments physiques des composants. KendoReact propose trois magnifiques thèmes (Bootstrap, Material et Default) que vous pouvez appliquer à la bibliothèque complète de plus de 100 composants pour modifier l'apparence et la convivialité en fonction de votre application. Alternativement, vous pouvez créer votre propre thème ! Les échantillons sont un ensemble de variables SASS prédéfinies qui modifieront la palette de couleurs des thèmes KendoReact, en modifiant les couleurs désignées comme primaires, secondaires, etc. Cela ne change pas la structure des composants, mais uniquement les couleurs qui leur sont appliquées. KendoReact propose plusieurs échantillons prédéfinis pour chaque thème, ou vous pouvez créer le vôtre !

Donc, pour récapituler, si vous cherchez à modifier l'apparence structurelle des composants (par exemple, « La partie héritée de notre application utilise Bootstrap , et nous voulons toujours que tout ce que nous construisons maintenant soit cohérent »), alors vous voulez un thème. Si vous cherchez à changer les couleurs des composants (par exemple, « Lorsque l'utilisateur clique sur cette bascule, cela devrait faire passer le schéma de couleurs en mode sombre »), alors vous voulez des échantillons.

Méthode 1: Utilisez nos échantillons de mode sombre prédéfinis

Peut-être n'avez-vous pas de concepteur dans votre équipe ou n'êtes-vous pas un grand fan de CSS. Ou, hé, peut-être que vous êtes juste occupé ! Peu importe la raison, nous vous soutenons avec les magnifiques échantillons de mode sombre déjà inclus dans KendoReact. Parmi tous nos thèmes disponibles, il existe 14 nuances de mode sombre préexistantes possibles créées par nos concepteurs, parmi lesquelles vous pouvez choisir!

Pour profiter de ces nuances existantes, rendez-vous simplement sur le générateur de thèmes KendoReact, choisissez votre thème, puis utilisez le menu déroulant à côté du nom du thème sur la page d'aperçu et de réglage pour appliquer un échantillon prédéfini. Une fois que vous avez trouvé un échantillon que vous aimez, cliquez sur le bouton de téléchargement dans le coin supérieur droit.

Vous serez invité à saisir un nom pour votre nouveau thème et votre nouveau combo d'échantillons, puis les styles que vous avez choisis seront téléchargés dans un fichier zip comprenant un fichier .SASS, un fichier .CSS compilé et un fichier .JSON . Choisissez le fichier qui convient le mieux à votre méthode de gestion des styles, puis vous pouvez simplement déposer ce fichier dans votre application et voir les styles appliqués, sans avoir à modifier une seule ligne de CSS.

Thème KendoReact Capture d'écran du constructeur montrant les nuances disponibles

Méthode 2 : ajuster ou créer une nuance à l'aide du générateur de thèmes

Le générateur de thèmes KendoReact ne se limite pas au téléchargement de nuances prédéfinies. Si vous avez regardé l'un de nos échantillons et que vous vous êtes dit : « Ce serait parfait si cet orange était juste un peu plus rouge », alors bonne nouvelle : le Générateur de thèmes peut le faire aussi !

Si vous avez des ressources de conception existantes qui incluent les couleurs de votre marque, vous pouvez personnaliser un échantillon à appliquer aux composants KendoReact, garantissant que votre application est toujours à 100 % sur la marque. À l'aide des entrées de la barre latérale gauche, vous pouvez ajuster les couleurs dans la section Couleurs du thème et les voir se mettre automatiquement à jour sur les composants d'aperçu à droite. Cela vous permet de vérifier rapidement si toutes les couleurs fonctionnent bien ensemble ou de voir si une couleur est utilisée quelque part que vous n'auriez peut-être pas prévu.

Capture d'écran de l'éditeur de couleurs de thème dans Theme Builder" title="Capture d'écran de Éditeur de couleurs de thème dans Theme Builder"/></p data-recalc-dims=

Vous pouvez utiliser cet outil pour apporter de petits ajustements à une nuance préexistante ou pour créer quelque chose d'unique ! Une fois que vous êtes satisfait de votre nuance personnalisée en mode sombre, vous pouvez télécharger et appliquez-le exactement comme s'il s'agissait de l'un de nos préfabriqués.

Méthode 3 : utilisez les kits Figma pour créer un système de conception entièrement personnalisé

Si vous avez les ressources de votre équipe pour créer et maintenir un système de conception complet, alors nous avons les outils pour vous aider à appliquer ce langage de conception à votre application React !Saviez-vous que nous proposons des Figma Kits que vous pouvez utiliser gratuitement (même si vous ne pas de licence) pour personnaliser entièrement l'apparence de la suite de composants KendoReact ? Si votre conception Si vous souhaitez apporter des modifications qui vont au-delà de la simple sélection des couleurs principales, les kits Figma sont là pour leur permettre d'effectuer autant de modifications qu'ils le souhaitent.

Ensuite, vous pouvez utiliser le composant Unite UX UI générateur de styles (sous licence distincte des bibliothèques d'interface utilisateur) pour ajuster et exporter facilement les styles. Unite UX est un outil puissant que vous pouvez exploiter pour permettre à votre équipe, quelle que soit sa taille, de créer son propre système de conception rapidement et facilement.

Les jetons de conception de nos kits Figma sont configurés pour correspondre exactement aux variables SASS utilisées dans les composants KendoReact, donc lorsque vous utilisez cet outil avec le Unite UX Figma Pluginvous pouvez exporter des fichiers pour votre système de conception complet qui peut être déposé directement dans votre application et ils fonctionneront tout simplement ! À quelle fréquence arrivez-vous à dire que à propos de tout type de projet d'ingénierie ? également une option totalement valable pour vous permettre de modifier vous-même les variables SASS ! Ce n'est pas notre méthode recommandée, principalement parce qu'elle prend beaucoup plus de temps. Les outils que nous avons créés vous permettent d'ajuster et de prévisualiser vos styles (soit dans Theme Builder, soit dans Unite UX) avant d'exporter un fichier que nous avons spécialement conçu pour fonctionner parfaitement avec le style de chaque composant KendoReact. Mais, cela ne signifie pas que vous devez le faire de cette façon.

Si vous préférez y entrer et écrire le code vous-même, nous avons fourni cette liste de toutes nos variables pour que vous puissiez modifier comme bon vous semble. L'exemple lié ici concerne le thème par défaut, mais vous pouvez également trouver des listes pour les trois autres thèmes. Vous pouvez également trouver toutes les variables disponibles pour la personnalisation de nos principaux composants – voici celle pour la personnalisation des boutonspar exemple.

Quelle méthode convient à votre équipe ?

Que ce soit votre équipe cherche simplement à implémenter rapidement un mode sombre prêt à l'emploi, ou cherche à créer un thème de mode sombre entièrement personnalisé, KendoReact vous donne les outils pour personnaliser nos composants à votre guise ! Après tout, c'est votre application ! Il devrait ressembler exactement à ce que vous imaginez. Modifiez les thèmes pour une apparence et une sensation totalement différentes, ou échangez simplement quelques échantillons pour créer de nouvelles palettes de couleurs. Quels que soient vos besoins et la méthode que vous choisissez, sachez que l'équipe KendoReact est là pour vous aider.




Source link