Éteignez les lumières. Nouveaux thèmes sombres chauds dans l'interface utilisateur pour WPF !

Venez voir les toutes nouvelles variations de couleurs sombres intégrées de deux des interfaces utilisateur Telerik pour les thèmes les plus populaires de WPF : Material et Visual Studio 2019 ! Rendez toutes vos applications WPF de bureau encore plus magnifiques.

Bienvenue du côté obscur, les gens. Nous avons des cookies… et de toutes nouvelles variations de couleurs sombres (oui, intégrées 🤘) de deux de l'interface utilisateur Telerik pour les thèmes les plus populaires de WPF : Material et Visual Studio 2019 ! Pas besoin de chercher des titres comme "10 applications de bureau avec de magnifiques thèmes sombres". Pas besoin de chercher l'inspiration du côté obscur de la conception de l'interface utilisateur, nous nous en sommes déjà occupés. Désormais, toutes vos applications WPF de bureau peuvent devenir encore plus magnifiques.

Allons-nous éteindre les lumières et laisser notre promenade dans le noir commencer ? Bien sûr, mais voyons d'abord pourquoi s'embêter à utiliser un thème sombre.

Le bien-être des ténèbres

J'aime faire mes recherches en premier. Devinez quelle est la citation la plus courante que j'ai lue : « Tout le monde peut se sentir dans une pièce où les lumières sont éteintes et vous avez cet écran blanc qui vous aveugle. » Cela a été dit par Sameer Samat, vice-président des produits de Google lors d'une interview à Google I/O.

J'admets qu'il a raison à cent pour cent.

Lorsque nous sommes entourés de ténèbres 👻 et que nous lisons sur un fond lumineux écran, nous avons souvent l'impression que nos yeux sont plus sollicités. Nous ne pouvons généralement pas le percevoir, mais les moniteurs scintillent (très rapidement) pour produire les images et le texte sur nos écrans. Au fil du temps, ce scintillement crée un éblouissement qui stresse nos muscles oculaires et peut provoquer une fatigue oculaire numérique. Les symptômes courants incluent la fatigue oculaire, les douleurs au cou et aux épaules, les yeux secs, les maux de tête et la vision floue.

Pour faire court, le mode sombre est préférable pour les environnements à faible luminosité où il peut aider à faire le contraste entre un écran et son environnement moins choquant. Mais ce n'est pas nécessairement une solution universelle.

Eh bien, assez pour la santé et le bien-être. Il est également prouvé que l'interface utilisateur sombre permet d'économiser une partie de la durée de vie de la batterie. C'est ça. Il n'y a pas besoin d'explications supplémentaires ici. Appréciez simplement les faits. 😁

Et si tout ce qui précède ne suffit pas, je partagerai la raison la plus intrinsèque (pour moi) de choisir un thème sombre plutôt qu'un thème clair. C'est simplement a-w-e-s-o-m-e. Les couleurs semblent mieux apparaître sur les arrière-plans. Toute mon interaction avec le contenu lors de l'utilisation du mode sombre est très différente, comme une puissante explosion. Bien sûr, certaines recherches explorent la corrélation entre la rétention des utilisateurs et l'utilisation du mode sombre. Cela ne semble pas si complexe – les yeux sont moins fatigués (en particulier la nuit), donc fondamentalement, les êtres humains sont capables de consommer le contenu pendant de plus longues périodes (= productivité accrue).

Les principes sombres

Puisque nous savons que certaines personnes préfèrent les thèmes sombres parce qu'elles travaillent la nuit (ou dans des conditions de faible luminosité), ou en ont besoin pour des raisons d'accessibilité (c. simplement parce que c'est cool, prêtons attention aux principes les plus importants derrière la conception de tels thèmes.

Mes directives préférées sont celles de l'article « Thème sombre » sur material.io. Je vais vous les expliquer brièvement.

Foncer avec du gris

Il est recommandé d'utiliser du gris foncé pour la conception d'un thème sombre plutôt que du noir—c'est pour exprimer l'élévation et l'espace dans un environnement avec une plus large gamme de profondeur.

Couleur avec accents

Foncé Les interfaces utilisateur thématiques doivent appliquer des accents de couleur limités, de sorte que la plus grande partie de l'espace est dédiée aux surfaces sombres. de pixels clairs.

Améliorer l'accessibilité

Une partie essentielle de la conception d'un thème sombre est de respecter les normes de contraste des couleurs d'accessibilité. Croyez-moi, c'est un élément crucial pour accueillir les utilisateurs réguliers de thèmes sombres (comme ceux qui ont une basse vision). Un thème sombre doit éviter d'utiliser des couleurs saturées, car elles ne respectent pas la norme d'accessibilité WCAG d'au moins 4,5:1 pour le corps du texte sur des surfaces sombres. Les couleurs saturées produisent également des vibrations optiques sur un fond sombre, ce qui peut provoquer une fatigue oculaire. Au lieu de cela, les couleurs désaturées peuvent être utilisées comme une alternative plus lisible.

Cette section et la précédente sont essentielles pour moi afin que vous puissiez mieux comprendre les thèmes sombres tout en appréciant le travail acharné de notre formidable équipe pour livrer plus que prévu avec nos derniers joyaux thématiques 💎— les thèmes sombres Material Dark et Visual Studio 2019.

Material Darkness

Il est grand temps que je lève le rideau pour révéler le premier chef-d'œuvre de ce spectacle. Ta-da!

Depuis la version R2 2021 de la suite UI pour WPF, le thème Material propose deux variations de couleurs. Les deux correspondent aux Palettes de couleurs Material Design. La lumière reste la couleur par défaut et est basée sur les couleurs Indigo et Ambre, et la nouvelle Dark est basée sur les couleurs Indigo et Cyan.

En plus de la variation Dark, la palette de thèmes Material s'est étendue avec quelques nouveaux pinceaux : le DialogBackgroundBrush et le SelectedUnfocusedBrush. Le DialogBackgroundBrush, comme son nom l'indique, est utilisé pour l'arrière-plan des éléments de la fenêtre et du dialogue. Et le SelectedUnfocusedBrush est utilisé pour la couleur d'arrière-plan des éléments dans leur état sélectionné et non focalisé (par exemple, GridViewRow, TreeListViewRow et TreeViewItem).

Comment appliquez-vous Material Dark à votre application WPF ? Ajoutez simplement la ligne suivante avant InitializeComponent :

Visual Studio Darkness

L'impressionnant R2 2021 a également apporté la variation de couleur sombre du thème Visual Studio 2019 ! Laissez-moi vous le montrer :

Sa collection de pinceaux a également été élargie par l'AccentForegroundBrush et le DockingBackgroundBrush. Encore une fois, les deux pinceaux sont disponibles pour les deux variantes de thème. L'AccentForegorundBrush est une variante de l'AccentBrush qui est utilisé pour le premier plan de certains éléments qui doivent se démarquer, par exemple les en-têtes des boîtes de dialogue du contrôle Spreadsheet. Le DockingBackgroundBrush est un pinceau spécial utilisé pour l'arrière-plan du contrôle Docking, l'un des contrôles d'interface utilisateur les plus spécifiques pour l'apparence du thème (et l'IDE Visual Studio 2019).

D'accord, dans la section précédente, j'ai montré vous explique comment appliquer la variation sombre du thème Material à votre application WPF. Pouvez-vous deviner comment faire de même pour le thème Visual Studio 2019 ? Encore une fois, ajoutez simplement la ligne suivante avant InitializeComponent :

Lighter or Darker Darkness

Si l'obscurité que nous proposons avec les nouvelles variations de couleur pour le matériau et Les thèmes Visual Studio 2019 sont trop… ou pas assez… n'hésitez pas à en ajuster chaque élément avec l'exemple d'application Color Theme Generator—il contient déjà les nouvelles variations de couleurs.

Oh, au fait. , le générateur de thème de couleur a reçu un petit coup de pouce : il fournit désormais des statuts pour une identification plus facile des nouveaux goodies. Voir le GIF suivant pour une référence. Le menu des thèmes contient des rectangles colorés avec le texte d'état et un badge pour une nouvelle palette est visualisé à côté du menu des palettes de couleurs sur la droite.

Prenez les goodies :

Latest ColorThemeGenerator

N'oubliez pas non plus de consulter les articles d'aide pour les deux les thèmes Material et VisualStudio2019 au cas où j'aurais raté quelque chose (je ne suis qu'un humain après tout 🤷‍♀️).

Dark Reports

J'ai mentionné il y a quelque temps dans mon blogs sur lesquels vous pouvez fournir des rapports avec n'importe quel thème Telerik UI pour WPF et Telerik ReportViewer. S'il y a encore quelqu'un qui n'est pas familier avec cette merveille, nous avons Telerik .NET ReportViewer Controls. Ils sont chargés de fournir des rapports interactifs directement à vos applications de bureau (ou Web). Tous les rapports peuvent également être visualisés dans WPF en mode sombre, avec les dernières variations de couleurs dont j'ai parlé ces dernières minutes. Trouvez un aperçu exquis du ReportViewer de WPF avec eux ci-dessous :

Aperçu des rapports avec le thème Material Dark

Aperçu des rapports avec le thème Visual Studio 2019 Dark

Obtenez la dernière version de Telerik ReportViewer ici.

Time for Gratitude et commentaires

Merci à tous ceux qui ont pris le temps de lire mon blog ! J'espère que cela vous a donné envie de commencer à utiliser les variations de couleurs sombres des thèmes Material et Visual Studio 2019 en :

Obtenir la dernière interface utilisateur pour WPF

Il y en a beaucoup plus R2 2021 merveilles à explorer, alors lorsque vous les essayez également, veuillez prendre une minute ou deux pour partager vos commentaires honnêtes dans la section des commentaires ci-dessous, ou rendez-vous sur notre Portail de commentaires.