article

Initiation au Javascript - Bouton mode nuit 1/2

Par  Matthieu

Publié le 1 avril 2018

Retrouvez-nous sur BlueSky, Facebook et Mastodon.

Pour fêter le retour de Silicon Valley et inaugurer la section Développement Web de KernelDesign je vous propose aujourd'hui un petit pas-à-pas à la création d'un bouton Mode nuit. Le mode nuit est une fonctionnalité de plus en plus populaire et répandue qui permet à l'utilisateur d'adapter le contenu de ses écrans à un environnement plus sombre. Il consiste généralement à passer du noir sur blanc au blanc sur noir avec plus ou moins de subtilité. Comme toujours en programmation il n'existe pas de solution unique et absolue pour résoudre un problème. L'approche que je vous propose ici (comme dans tous mes articles à venir) vise principalement la simplicité de mise en oeuvre et l'intelligibilité du code. Pas de Jquery et sa syntaxe absconse mais du JavaScript pur et accessible à tous. Les prérequis indispensables pour suivre ce tutoriel sont une connaissance minimum en HTML et CSS ainsi que la connaissance des notions de variables et fonctions.

Première étape : Changer de couleurs.

Mon mode nuit se définit ainsi : Le fond blanc passe sur une couleur plus ou moins proche du noir et le texte passe du noir au blanc. Le JavaScript permet justement de créer des fonctions capables de modifier les éléments de style de mes pages HTML. Pour accéder aux paramètres de style d'un élément en javascript on utilise la méthode suivante : document.elementAModifier.style.paramètreDeStyleAModifier = "nouvelleValeur"; Notre fonction JavaScript va donc ressembler à ça : 
function appliqueNuit() {
	document.body.style.color = "rgb(255, 255, 255)";
	document.body.style.backgroundColor = "rgb(30, 30, 30)";
}
Pour exécuter ce bout de code on va utiliser l'attribut onclick sur un bouton (ou une div quelconque) de cette manière :
Si vous avez bien suivi toutes les étapes vous devriez avoir quelque chose qui ressemble à ça :

Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.

Ô miracle, ça marche ! Sauf qu'en cliquant une nouvelle fois sur le bouton rien ne se passe. C'est normal. En effet, un bouton n'est pas un interrupteur avec un état On et un état Off. Un bouton exécute un programme et c'est tout. En guise de petit exercice vous pourriez créer un deuxième bouton, qui exécuterait une fonction AppliqueJour() permettant de revenir au mode jour. Et dans un futur article on verra comment créer un véritable interrupteur.
Crédit image : HBO