Laravel 8 : Ajouter le thème Dark mode dans un site web laravel - Letecode
Suivez nous
@johnmbiya - 30 novembre 2020 822 dans Laravel

Laravel 8 : Ajouter le thème Dark mode dans un site web laravel

cet article concerne plus particulièrement les artisans

Laravel 8 : Ajouter le thème Dark mode dans un site web laravel

Artisan, cet article te concerne. Il est toujours beau d'avoir plusieurs façon de rendre la navigation sur son site, plus facile, plus belle et plus simple.

Le mode sombre (Dark Mode), prend de plus en plus de la place dans les applications et sites web, ce mode qui donne une meilleur lisibilité en adoucissant les couleurs de l'application.

Cet article concerne plus particulièrement les développeurs utilisant Laravel comme framework PHP pour leurs applications web.

Pour avoir déjà une idée sur ce que nous allons apprendre, consulter les précédents articles sur la création du Dark Mode, ça vous permettra de bien vous lancer.

Découvrir Laravel avec ces articles : Introduction à Laravel 

Etapes à réproduire

Pour les styles CSS, les codes HTML et JavaScript, veillez faire réference à l'article précédent : Configurer le Dark Mode sur votre site web avec les cookies

Parlons maintenant PHP & Laravel , nous allons utilisé les cookies de Laravel pour lire les cookies du navigateur et les disponibiliser sur nos pages.

Alors vous allez me dire : mais pourquoi n'est pas faire la même chose, comme précédement, car c'est du javaScript ?

voici la réponse : l'utilisation du cookie comme nous l'avons appris dans l'article précédent était jusque là sans problème aucun, mais nous n'avons pas eu à crypter ou décrypter ce cookie là. Laravel par contre, crypte les cookies par defaut, donc en utilisant ce que vous connaissez jusque là, vous risquez d'être surpris.

Pour commencer, nous allons ajouter notre cookie ( 'theme' ) dans la liste d'exeptions de cryptage des cookies se trouvant dans la classe : App\Http\Middleware\EncryptCookies Ajouter ceci :

protected $except = [

    'theme'

];

Maintenant laravel peut lire notre cookie sans cryptage. Nous devons maintenant le rendre disponible dans le fichier master de notre projet

J'ai ajouter le code suivant dans la méthode boot() de la classe App\Providers\AppServiceProvider. C'est normal pour une petite application mais pour des projets robustes vous devez créer votre propre Service Provider.

view()->composer('layouts.master', function ($view) {

    $theme = \Cookie::get('theme');

  if ($theme != 'dark-theme' && $theme != 'light') {

        $theme = 'light';

  }

    $view->with('theme', $theme);

});

Un view composer permet de lancer un bout de code avant que un view quelconque soit charger. Dans notre cas nous visons le view layouts.master , qui est le View principal de notre application. Nous utilisons le façade Cookie pour verifier le thème dans les cookies et la fonction with($name, $value) pour le rendre utilisable dans le fichier master.

HTML :  quelques modifications à apporter dans notre HTML dans le fichier layouts.master.

Comme nous l'avons mentioné si haut, notre variable $theme poura être utiliser dans le fichier master.

Pour le changement du titre, nous allons utiliser ceci :

<h1 class="display-4">Hello, world!, je suis en <span id="mode">{{ $theme == 'dark-theme' ? 'Dark Mode' : 'Light Mode' }}</span></h1>


Et enfin placer le thème dans la balise body :

<body class="{{ $theme }}">

Essayer et recharger la page, votre thème est enfin gardé.

Si l'article vous a plut, partager avec les autres artisans !

Merci.

@johnmbiya
Jean Claude Mbiya (johnmbiya)

je suis developper fullstack, Dévelopeur android (AAD), créateur de letecode.com, bloggeur, formateur, fondateur de Guide Light System, j'aime la science informatique 😎👨‍💻

P : 386 7 7 24
Abonnez vous !

Recevez les dernières nouvelles de letecode directement dans votre boîte de réception. Réjoignez +500 Abonnés, Nous n'envoyons pas des spam !

Voir plus