Comment ajouter le mode sombre à votre site Web ? Voici le code dont vous avez besoin !

Ajouter le mode sombre à votre site Web en moins de 5 minutes

Dans cet article, je vais vous montrer comment ajouter facilement un mode sombre fonctionnel à votre site Web en moins de 5 minutes sans framework, et je vous fournis tout le code, y compris le bouton bascule.

Pour y aller directement, voici le code pour ajouter le mode sombre à votre site Web. Je recommande d'avoir une feuille de style dark.css distincte pour tous vos styles en mode sombre. Tout ce que vous avez à faire est de copier et coller le code HTML, CSS et JS dans votre projet et d'utiliser ce sélecteur dans votre dark.css pour cibler une classe à laquelle ajouter les styles du mode sombre :

body.dark-mode .targetElement {
    background: #000000;
}

HTML

<button id="dark-mode-toggle">
    <!--Moon is an inline SVG so you can edit the color if needed-->
    <svg class="cs-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" style="enable-background:new 0 0 480 480" xml:space="preserve"><path d="M459.782 347.328c-4.288-5.28-11.488-7.232-17.824-4.96-17.76 6.368-37.024 9.632-57.312 9.632-97.056 0-176-78.976-176-176 0-58.4 28.832-112.768 77.12-145.472 5.472-3.712 8.096-10.4 6.624-16.832S285.638 2.4 279.078 1.44C271.59.352 264.134 0 256.646 0c-132.352 0-240 107.648-240 240s107.648 240 240 240c84 0 160.416-42.688 204.352-114.176 3.552-5.792 3.04-13.184-1.216-18.496z"/></svg>
    <img class="cs-sun" aria-hidden="true" src="https://csimg.nyc3.digitaloceanspaces.com/Contact-Page/sun.svg" decoding="async" alt="sun" width="15" height="15">
</button>

CSS

/*CSS for Dark Mode Toggle

Copy and paste this code into it's own dark.css file. Keep all you dark mode
styles there, and make sure when you link to this sheet in your html head,
make it the bottom css link tag so it overrides all other styles.
At the bottom, that's where you start to add your dark mode styles by
starting starting with "body.dark-mode" and add your class you want to
target at the end. For example,

body.dark-mode .heading-one {}

then add your css properties like normal. That's it!
Scroll to the bottom to start adding your dark mode styles

/* Add this as it's own dark.css file and linked on all pages */
/*-- -------------------------- -->
<---      Core Dark Styles      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  :root {
    --dark: #121212;
    --medium: #282828;
    --accent: #404040;
    --bodyTextColorWhite: #fafbfc;
  }
  body.dark-mode {
    background-color: var(--dark);
  }
  body.dark-mode p,
  body.dark-mode li,
  body.dark-mode h1,
  body.dark-mode h2,
  body.dark-mode h3,
  body.dark-mode h4,
  body.dark-mode h5,
  body.dark-mode h6,
  body.dark-mode .cs-title,
  body.dark-mode .cs-text,
  body.dark-mode .cs-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode .light {
    display: none;
  }
  body.dark-mode .dark {
    display: block !important;
  }
  .dark {
    /* class used to hide elements that only need to be seen when dark mode is enabled */
    display: none;
  }
}
/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  #dark-mode-toggle {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3.75rem;
    width: 3rem;
    height: 3rem;
    background: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.5625rem;
    height: 1.5625rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s,
                opacity 0.3s,
                fill 0.3s;
    fill: #000;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: transform 0.3s,
                opacity 0.3s;
  }
}
/* Desktop */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin-left: 1.875rem;
    margin-bottom: 0rem;
  }
  #dark-mode-toggle .cs-moon {
    /* change to whatever you need it to be */
    /* fill: #fff; */
  }
}

Javascript

// Add this to your javascript file

//
//    The Dark Mode System
//

// helper functions to toggle dark mode
function enableDarkMode() {
	document.body.classList.add('dark-mode');
	localStorage.setItem('theme', 'dark');
}
function disableDarkMode() {
	document.body.classList.remove('dark-mode');
	localStorage.setItem('theme', 'light');
}

// determines a new users dark mode preferences
function detectColorScheme() {
	// default to the light theme
	let theme = 'light';

	// check localStorage for a saved 'theme' variable. if it's there, the user has visited before, so apply the necessary theme choices
	if (localStorage.getItem('theme')) {
		theme = localStorage.getItem('theme');
	}
	// if it's not there, check to see if the user has applied dark mode preferences themselves in the browser
	else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
		theme = 'dark';
	}

	// if there is no preference set, the default of light will be used. apply accordingly
	theme === 'dark' ? enableDarkMode() : disableDarkMode();
}

// run on page load
detectColorScheme();

// add event listener to the dark mode button toggle
document.getElementById('dark-mode-toggle').addEventListener('click', () => {
	// on click, check localStorage for the dark mode value, use to apply the opposite of what's saved
	localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
});

Tout ce que vous avez à faire est d'ajouter le bouton html où vous le souhaitez et d'ajuster le css si nécessaire pour le positionner, d'ajouter le dark.css à toutes vos pages, de copier et coller le javascript du mode sombre dans votre fichier javascript, et sur le fichier dark.css, d'écrire simplement :

body.dark-mode #updates {
    background: #000000;
}

Ce qui se passe, c'est que nous définissons de nouveaux styles de mode sombre en fonction du fait que le corps possède la classe de mode sombre. Le code dit essentiellement que lorsque le corps contient la classe "mode sombre", sélectionnez cet élément et ajoutez-y ce style. Lorsque la classe du corps est supprimée, ce code ne s'exécute pas car il n'y a pas de classe de mode sombre sur le corps, donc l'arrière-plan ne devient jamais noir. Ce code ne peut être exécuté que lorsque la classe du mode sombre est sur le corps. Donc tout ce que nous avons à faire pour chaque style de mode sombre est de faire précéder le sélecteur de "body.dark-mode" et c'est tout - vous avez ajouté un style de mode sombre ! Le bouton bascule que j'ai fourni dans le code ci-dessus fait tout le travail, donc chaque fois qu'il est activé, la classe est activée et désactivée du corps, et le mode sombre est activé et désactivé. C'est tout ce que vous avez à faire. Pas de cadres fous. Juste du bon vieux code vanille.

Vous passerez probablement le plus de temps à positionner le bouton dans votre barre de navigation ou là où vous le souhaitez. La solution la plus simple est de le positionner absolument. Je place mon bouton tout en haut de mon code, c'est donc la première chose sur laquelle un lecteur d'écran se concentrera.

Si vous utilisez LESS ou SCSS, cela devient beaucoup plus facile car nous pouvons utiliser les propriétés CSS d'imbrication, comme ceci :

body.dark-mode {
    #sbs-1984 {
        background-color: rgba(0, 0, 0, 0.2);

        .cs-title,
        .cs-text,
        .cs-li {
            color: var(--bodyTextColorWhite);
        }

        .cs-text,
        .cs-li {
            opacity: 0.8;
        }
    }
}

De cette façon, il vous suffit d'écrire la classe body.dark-mode une seule fois et d'y imbriquer tous les styles de mode sombre pour cette section.

Pourquoi devrais-je ajouter le mode sombre à mon site Web ?

L’ajout du mode sombre à un site Web a gagné en popularité après que le procès Dominoes Pizza a ouvert les vannes de sites Web plus accessibles. Avant le procès, l’accessibilité du Web n’était qu’une fonctionnalité intéressante si vous aviez de l’argent, mais elle est désormais devenue une nécessité. Le mode sombre peut aider à résoudre de nombreux problèmes d'accessibilité Web avec un site Web en supprimant les problèmes de contraste et en accommodant ceux qui souhaitent tout voir avec moins de luminosité et une lumière blanche intense.

Si vous n’avez jamais entendu parler de l’accessibilité du Web, bienvenue dans le nouveau monde sous votre rocher. L'accessibilité du Web est liée à la manière dont les personnes présentant des risques de déficience visuelle, motrice/motrice, auditive, épileptique et cognitive/intellectuelle utilisent le Web. Le mode sombre permet aux développeurs de corriger le texte avec un faible rapport de contraste sur leur arrière-plan, et les personnes sensibles à la lumière n'auront pas autant de mal à lire votre site Web.

Par exemple, lorsque vous travaillez avec la marque d'une entreprise, vous ne pouvez souvent pas simplement changer la couleur de la marque pour la rendre plus accessible. Ainsi, plutôt que de changer la couleur de la marque sur le texte, nous changeons l'arrière-plan du texte en noir pur. Mais le mode sombre ne consiste pas seulement à changer l'arrière-plan en noir, il s'agit de transformer le site Web et son contenu en une belle mise en page utilisable.

Imaginez les éléments du site Web empilés les uns sur les autres. La couche la plus inférieure (le corps) sera la plus sombre, puis s'il y a un élément de carte au-dessus du corps, l'arrière-plan de cette carte sera d'une teinte plus claire, et s'il y a un autre élément sombre à l'intérieur de cette carte, il sera plus clair que la carte. C'est une bonne règle à suivre lors de la création de votre thème sombre. Cela semble bien meilleur lorsque vous utilisez une hiérarchie visuelle pour montrer la profondeur. Les éléments les plus sombres vont en bas et deviennent de plus en plus clairs à mesure que les éléments continuent de s'empiler les uns sur les autres.

L'ajout du mode sombre à un site Web personnalisé est, à mon avis, l'une de ces nouvelles tendances en matière de développement Web que vous devriez essayer d'ajouter à tous vos sites Web. Cela améliore non seulement l'accessibilité de votre site Web, mais y ajoute également un facteur « wow ». Le mode sombre distinguera définitivement votre client du reste de la concurrence et montrera une entreprise plus avant-gardiste qui prend au sérieux tous les aspects de son activité, y compris le site Web.