Ajouter un mode nuit à vos thèmes WordPress

Implémenter un mode nuit pour votre thème WordPress est relativement simple et rapide. Il ne s'agit, au final, qu'un peu de javascript,  et un peu (ou beaucoup, cela dépend de votre thème), de CSS.

Concernant javascript, la modification consiste en un système de Toggle et une méthode pour stocker l'information (mode nuit on ou off) afin de conserver le mode choisi d'une page à l'autre. Stocker l'information dans les cookies semble une bonne idée. Mais la mode (merci RGPD) étant au blocage des cookies, l'autre possibilité consiste à passer par LocalStorage. Vous pouvez aussi stocker cette info en base de données (via un call ajax).

Création de cookies en javascript:

/**
* Create Cookie
*/
function createCookie(name, value, days) {
var expires;

if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

/**
* Erase Cookie
*/
function eraseCookie(name) {
createCookie(name, "", -1);
}

/**
* Read Cookie
*/
function readCookie(name) {
var nameCook = encodeURIComponent(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ')
c = c.substring(1, c.length);
if (c.indexOf(nameCook) === 0)
return decodeURIComponent(c.substring(nameCook.length, c.length));
}
return null;
}

Dans le cas ou vous souhaitez vous affranchir des cookies, vous pouvez utiliser LocalStorage. Son autre gros avantage, c'est qu'aucun code n'est nécessaire ^^.

Le Code HTML

Avec bootstrap 4, la partie JS est rapide, pas de nécessité de coder une fonction pour le toggle, vu que cela est nativement intégré. Pour les icônes, il s'agit de Font Awesome 5

<div class="btn-group btn-group-toggle" data-toggle="buttons"><label class="btn btn-secondary active">
<input id="darkmode_off" autocomplete="off" checked="checked" name="darkmode" type="radio" /><i class="fas fa-sun"></i>
</label>
<label class="btn btn-secondary">
<input id="darkmode_on" autocomplete="off" name="darkmode" type="radio" /><i class="fas fa-moon"></i>
</label></div>

Vous obtenez ce genre de switch

La partie suivante consiste à capturer les évènements (clics) réalisés sur notre switch, afin de réaliser des actions. En l'occurence, les actions consisteront à ajouter une class css "darkmode" à notre body, à stocker l'information (cookie ou localStorage) et à afficher le status (actif ou pas) du mode nuit.

Entrée en scène de jQuery

$('#darkmode_off').on('change', function () {
 darkmode('off');
});

$('#darkmode_on').on('change', function () {
 darkmode('on');
});

/**
* Manage toggle actions
*/
function darkmode(action) {

 if( action == 'off') {
  //clear storage
  $('body').removeClass('darkmode');
  localStorage.removeItem("darkmode");
  // OR
  //eraseCookie('darkmode')
 }else{
  $('body').addClass('darkmode');
  localStorage.setItem("darkmode","on");
  //OR
  //createCookie('darkmode', 'on', 365)
 }
}

Maintenant, nous pouvons lire les informations et les utiliser. Pour accéder à la valeur de darkmode, c'est très simple. Il suffit de déclarer la variable en lisant LocalStorage ou le cookie

let darkmode = localStorage.getItem("darkmode");
//OR
//let darkmode = readCookie("darkmode");

On applique le darkmode en fonction de la valeur:

if( darkmode == 'on') {
  $('body').addClass('darkmode');
  $('#darkmode_on').attr('checked', true).parent().toggleClass('active'); // Checks it
  $('#darkmode_off').attr('checked', false).parent().toggleClass('active'); // Unchecks it
}

Et voilà, à ce stade, nous avons un switch darkmode fonctionnel, qui ajoute la class css "darkmode" à votre body. Il ne reste plus qu'à personnaliser votre fichier css/scss pour corriger vos couleurs.

body.darkmode {
 backgorund-color: #000;
 color: #fff;

  a {
   color: #fff;
  }

  .text-primary,
  .btn-primary {
   color: #f2f2f2 !important;
  }
etc ....
}

Bien sûr, d'autres possibilités restent envisageables (custom build de BS4 pour le darkmode, plusieurs fichiers css chargés dynamiquement - light.css, dark.css, blue.css etc ...), mais l'idée de ce poste est de montrer une mise en place simple et rapide pour des thèmes peu complexes.