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

cet article concerne plus particulièrement les artisans

Jean Claude Mise à jour : 20 décembre 2022 2525 3

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.

vote

Laisser un commentaire

Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.