Si vous avez un site web et que vous voulez proposer à vos visiteurs un mode « sombre » pour protéger leurs petits yeux délicats quand vient la nuit, j’ai ce qu’il vous faut.

Il s’agit d’un script JS couplé à une CSS qui ruse un peu puisqu’il permet d’inverser les couleurs d’une page web. Ainsi le blanc devient noir et le noir devient blanc (à peu près).

Et cela permet, en ajoutant quelques lignes de code dans vos pages, de disposer d’un joli bouton permettant de switcher entre le côté clair et le côté obscur de votre site.

Pour ce faire, ajoutez le code suivant dans votre <head/> :

<script src="https://binayak.codes/dark-theme-switcher/app.js"></script>
<link rel="stylesheet" href="https://binayak.codes/dark-theme-switcher/styles/style.css" />

Puis placez le bouton de switch à l’endroit de votre choix à l’aide de ce code :

<script>
window.ThemeSwitcher().Init();
</script>

Évidemment, pour ceux qui n’aiment pas intégrer des scripts externes (et vous avez raison), rien ne vous empêche de les télécharger localement et de les modifier un peu pour vous les approprier voire corriger d’éventuels bugs 🙂 .

Dark Theme Switcher est à découvrir ici et le code est sur Github.