Ajouter le mode sombre à ASP.NET Core en une seule ligne de code !

Introduction de la fonctionnalité Dark Mode dans ASP.NET Core

Tim commence le tutoriel en abordant une exigence courante dans les web apps modernes - l'activation du mode sombre dans ASP.NET Core. Que vous utilisiez Blazor, MVC ou Razor Pages, Bootstrap 5.3 introduit la prise en charge des thèmes sombres de manière très simple.

Comme l'explique Tim, cette fonction de mode sombre peut être activée avec une seule ligne de code, ce qui en fait une solution rapide et efficace pour les développeurs qui souhaitent améliorer l'interface utilisateur de leur site web. La nouvelle prise en charge du mode sombre est particulièrement utile pour les utilisateurs qui préfèrent un thème clair ou une interface sombre en fonction des paramètres de leur système ou de leurs préférences personnelles.

Vérification de la version de Bootstrap dans une application Web de Blazor

Tim utilise Visual Studio pour présenter un projet d'application web Blazor. Il navigue jusqu'au dossier wwwroot et ouvre le fichier bootstrap.min.css pour confirmer que l'application utilise la version 5.3.3 de Bootstrap. À 1:01, il note que la version 5.3 ou supérieure est nécessaire pour prendre en charge le mode sombre.

Si votre projet utilise déjà cette version ou une version ultérieure, il n'est pas nécessaire de mettre à jour Bootstrap ou d'inclure des outils supplémentaires. Il s'agit d'une étape cruciale car les anciennes versions de Bootstrap ne permettent pas de changer de thème à l'aide de l'attribut data-bs-theme.

Une ligne de code pour activer le thème sombre

À ce stade, Tim ouvre le fichier App.razor. Il met en évidence la balise et montre comment appliquer un thème sombre à l'ensemble de l'application à l'aide d'un attribut HTML :

data-bs-theme="dark"

Ce simple ajout indique à Bootstrap d'appliquer la palette de couleurs sombres à l'ensemble de vos pages et éléments. Tim exécute l'application avant et après l'ajout de la ligne pour montrer le contraste. À 2:03, il active le mode sombre et confirme que le thème se met à jour instantanément.

Ajustement des feuilles de style CSS personnalisées en mode sombre

Tim souligne que si cette ligne de conduite modifie la couleur d'arrière-plan et le thème général, les feuilles de style CSS existantes peuvent encore entrer en conflit avec le thème sombre. Par exemple, le texte blanc, la taille des polices ou les arrière-plans codés dans vos fichiers CSS ne s'ajusteront pas automatiquement.

Comme Tim le fait remarquer à 2:34, plus vous avez écrit de styles personnalisés, plus vous devrez les modifier et les tester. C'est pourquoi il recommande de commencer par le mode sombre au début du développement, lorsqu'il y a moins d'éléments à ajuster.

Basculer entre les thèmes clair et foncé

À 2:50, Tim souligne que vous pouvez également basculer entre les thèmes sombres et clairs. En remplaçant l'attribut par data-bs-theme="light", vous activez à nouveau le thème "light" :

data-bs-theme="light"

Tim suggère aux développeurs de permettre aux utilisateurs de choisir leur thème préféré, par exemple en ajoutant un interrupteur à bascule à l'aide de JavaScript ou d'une logique côté serveur.

Cette possibilité de passer d'un thème sombre à un thème clair est de plus en plus attendue par les utilisateurs, en particulier sur les applications Windows ou les appareils mobiles où prefers-color-scheme est automatiquement détecté.

Réparation des conflits de mise en page dans ASP.NET Core

Tim explique que l'un des défis les plus courants est l'incohérence des styles de certains éléments, comme la barre de navigation supérieure. À 3:12, il montre comment un fichier CSS spécifique à la mise en page (MainLayout.razor.css) remplace les propriétés par défaut de Bootstrap.

Il trouve un sélecteur .top-row qui définit une couleur directement, ce qui ne répond pas à la définition du thème. Sa solution : supprimer la propriété de couleur pour que Bootstrap puisse gérer le style en fonction du thème actuel (3:47).

Après avoir supprimé la surcharge, le thème sombre semble plus propre. Et lorsqu'il repasse au thème clair, cela fonctionne toujours, ce qui montre que Bootstrap applique dynamiquement les valeurs de couleur en fonction du thème choisi.

Utilisation de règles CSS spécifiques à un thème

À 4:17, Tim propose un autre conseil utile : les développeurs peuvent utiliser la détection de thème dans leur CSS pour appliquer des styles différents en fonction du mode actif. Cela vous permet de répondre à la valeur data-bs-theme et de styliser votre application en conséquence.

Par exemple, vous pouvez ajuster la taille de la police, la couleur du texte ou même les images selon que l'utilisateur a sélectionné le mode sombre ou le mode clair. Cela ajoute de la flexibilité pour ceux qui veulent une nouvelle expérience de thème sans avoir à construire deux feuilles de style séparées.

Application du mode sombre dans les projets MVC

Ensuite, Tim passe à un ancien projet ASP.NET MVC pour montrer comment activer le mode sombre dans les applications qui n'utilisent pas encore Bootstrap 5.3. Lorsqu'il ouvre le fichier CSS Bootstrap, il remarque qu'il s'agit de la version 5.1.0, qui ne prend pas en charge le mode sombre (5:07).

Mise à niveau de Bootstrap dans MVC avec CDN

Tim recommande de remplacer le fichier Bootstrap local par la version CDN du site GetBootstrap. À 5:51, il colle les liens CDN dans la vue _Layout.cshtml, mettant à jour les inclusions CSS et JavaScript.

Ainsi, l'application MVC prend désormais en charge le changement de thème, grâce à la nouvelle version de Bootstrap. Il note également que les CDN peuvent contribuer à accélérer votre site web, en particulier pour les nouveaux visiteurs.

Ajustement du style de navigation pour le mode sombre

Après avoir activé le thème sombre, Tim constate que certains styles de la barre de navigation entrent en conflit avec lui. À 6:40, il supprime les classes navbar-light et bg-white qui imposent des couleurs claires, ce qui perturbe l'aspect sombre.

Une fois supprimée, la barre de navigation s'adapte correctement au mode sombre. Mais Tim prévient que d'autres éléments de texte ou composants dont les couleurs ont été modifiées devront peut-être encore être traités manuellement (6:57). C'est ici qu'il peut être utile d'écrire des feuilles de style CSS adaptées aux thèmes ou d'utiliser des variables CSS pour faciliter la gestion.

Résumé : Prise en charge du thème Bootstrap 5.3

Tim conclut en rappelant que Bootstrap 5.3 prend entièrement en charge les thèmes sombres et clairs, mais que votre feuille de style CSS personnalisée peut ne pas le faire. Si vous avez structuré vos styles correctement, en utilisant des classes et en évitant les couleurs codées en dur, le passage d'un thème à l'autre se fera plus facilement.

À 8:00, il souligne que le simple fait d'ajouter :

data-bs-theme="dark"

l'ajout d'un attribut "dark mode" à votre balise permet d'activer le mode sombre sur l'ensemble de votre site web ASP.NET. Vous pouvez même appliquer l'attribut à un élément spécifique tel qu'un tableau, une carte ou une section, ce qui vous permet de combiner des thèmes sur une seule page.

Conseil final de Tim Corey

Si vous vous intéressez sérieusement à Bootstrap ou à la thématisation dans ASP.NET Core, Tim propose également un cours complet sur Bootstrap qui approfondit les concepts, notamment les systèmes de mise en page, les stratégies de thématisation et les meilleures pratiques en matière d'accessibilité.

En suivant le tutoriel vidéo de Tim Corey, vous pouvez mettre en œuvre le mode sombre dans votre application ASP.NET Core en une seule étape - et le peaufiner à l'aide de feuilles de style CSS personnalisées, de la détection de thème et de la fonctionnalité de basculement. Que vous créiez des applications pour Windows, le web ou d'autres plateformes, cette méthode vous permet de changer de thème sans effort et de satisfaire vos utilisateurs.