Comment basculer entre les modes clair et sombre dans Blazor

Offrez à vos utilisateurs un moyen de soulager leur fatigue oculaire ou définissez simplement leurs préférences grâce à cette installation facile d’un commutateur de mode sombre/clair.

Image créée avec Leonardo.ai

Dans cet article, je vais vous montrer comment créer un bouton jour/nuit (mode sombre) à ajouter à vos applications Blazor qui se configure automatiquement en fonction de l’environnement et change lorsque l’utilisateur met à jour le mode sur l’environnement.

L’importance du mode sombre

Le mode sombre a gagné en popularité sur diverses plateformes et applications numériques, et pour cause. Son utilisation va au-delà de la simple esthétique : elle peut aussi avoir des avantages pour la santé, notamment pour les yeux.

L’un des principaux avantages du mode sombre est qu’il permet de réduire la fatigue oculaire, notamment en cas de faible luminosité ou la nuit. La palette de couleurs plus sombre minimise la quantité de lumière émise par l’écran, réduisant ainsi la luminosité totale à laquelle sont soumis vos yeux. Il peut aider à soulager les symptômes liés à une utilisation prolongée de l’écran, tels que les maux de tête, la sécheresse oculaire et la vision floue, appelés syndrome de vision par ordinateur ou fatigue oculaire numérique.

De plus, le mode sombre peut augmenter la lisibilité du texte, offrant ainsi une meilleure expérience utilisateur. Les textes et images très contrastés, comme une écriture blanche sur fond noir, peuvent être plus faciles à lire pour certaines personnes, réduisant ainsi la fatigue oculaire.

Un autre avantage important est l’amélioration de la qualité du sommeil. La lumière bleue vive, surtout tard dans la nuit, peut perturber votre rythme circadien ou le cycle veille-sommeil de votre corps. En effet, la lumière bleue inhibe la production de mélatonine, une hormone qui aide à réguler le sommeil. Vous pouvez diminuer cet impact en adoptant le mode sombre, en particulier le soir, améliorant ainsi la qualité du sommeil.

Cependant, il est essentiel de garder à l’esprit que le mode sombre n’est pas une solution universelle. Bien qu’il présente de nombreux avantages, il peut ne pas être idéal ou agréable pour tout le monde, en particulier pour ceux qui ont une déficience visuelle spécifique ou dans les zones à forte lumière ambiante, où le mode sombre peut causer des tensions.

Quoi qu’il en soit, la popularité du mode sombre démontre comment les développeurs s’efforcent de créer un environnement numérique plus agréable et plus sain. Il s’agit simplement d’un outil supplémentaire dans une vaste boîte à outils visant à améliorer et à maintenir notre lien avec la technologie.

Un échantillon qui change automatiquement de mode en fonction de l’environnement

Suivez ces étapes:

1. Créez votre progression Interface utilisateur Telerik pour Blazor application.
2. Ajoutez ce code à Index.html :

<link  id="TelerikThemeLink"  href="https://blazor.cdn.telerik.com/blazor/4.4.0/kendo-theme-default/swatches/default-main.css"  rel="stylesheet"  type="text/css" />
<script  src="ThemeChanger.js"></script>

Vous pouvez choisir les thèmes que vous aimez. Voir les références à la fin de cet article.

3. Créez le fichier ThemeChanger.js et ajoutez-le au wwwroot :

var themeChanger = {

  firstRender: function () {
    window.matchMedia(‘(prefers-color-scheme: light)’).addEventListener(‘change’, event => {
      themeChanger.changeCss(true);
    });
  }
  ,
  changeCss: function (auto) {

    var darkTheme = "https://blazor.cdn.telerik.com/blazor/4.4.0/kendo-theme-default/swatches/default-main-dark.css";
    var dayTheme = "https://blazor.cdn.telerik.com/blazor/4.4.0/kendo-theme-default/swatches/default-main.css";

    var oldLink = document.getElementById("TelerikThemeLink");

    var newTheme = darkTheme;
    
    if (auto) {
      
      newTheme = (window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches)
        ? darkTheme
        : dayTheme;
    }
    else {
    
      if (darkTheme === oldLink.getAttribute("href")) {
        newTheme = dayTheme;
      }
    }
    
    var newLink = document.createElement("link");
    newLink.setAttribute("id", "TelerikThemeLink");
    newLink.setAttribute("rel", "stylesheet");
    newLink.setAttribute("type", "text/css");
    newLink.setAttribute("href", newTheme);
    newLink.onload = () => {
      oldLink.parentElement.removeChild(oldLink);
    };
    
    document.getElementsByTagName("head")[0].appendChild(newLink);
  }
}

4. Ajoutez ceci à Index.razor ou dans un composant :

@inject IJSRuntime JsInterop

<TelerikButton OnClick="ChangeTheme">Day/Night(Dark Mode)</TelerikButton>

@code {

  protected  override  async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      await JsInterop.InvokeVoidAsync("themeChanger.changeCss", true);
      await JsInterop.InvokeVoidAsync("themeChanger.firstRender");
    }
  }
  
  async Task ChangeTheme()
  {
    await JsInterop.InvokeVoidAsync("themeChanger.changeCss", false);
  }
}

Voilà ! La magie opère !

Voici le résultat :

Désormais, lors de la modification du mode sous Windows, le thème changera automatiquement :

Conclusion

La valeur du mode sombre pour le maintien de la santé oculaire ne peut être surestimée. Les développeurs peuvent envisager d’inclure cette fonctionnalité dans leurs applications pour améliorer l’expérience utilisateur et encourager le bien-être numérique. La mise en œuvre du mode sombre n’a jamais été aussi simple, grâce à des technologies comme Blazor et Telerik.

L’interface utilisateur de Telerik pour Blazor comprend plus de 100 composants natifs, dont un thème sombre entièrement flexible et facile à utiliser. En conséquence, votre application peut offrir une expérience utilisateur apaisante la nuit ou dans des circonstances de faible luminosité, réduisant ainsi la fatigue oculaire et peut-être améliorant la qualité du sommeil de vos utilisateurs.

Téléchargez et essayez la démonstration de la fonctionnalité du mode sombre basée sur Telerik dans Blazor. Même si vous utilisez une version d’essai de Telerik UI pour Blazor, la légendaire équipe d’assistance est prête à vous aider en cas de problème. Travaillons ensemble pour rendre l’environnement numérique plus agréable et plus sain pour tous les utilisateurs. Ton saisir sera important dans les efforts continus de Progress Telerik pour améliorer et optimiser la fonctionnalité du mode sombre.

Essayez l’interface utilisateur Telerik pour Blazor

Les références