Configurer le terminal.
La première chose à faire, si ce n'est pas déjà fait, est de configurer son terminal.
Par exemple, le dark mode sur Windows.
De plus en plus de navigateurs et terminaux proposent l'utilisation du dark mode, ou « mode sombre » en langue de chez nous.
Ce mode est configurable selon les systèmes, manuellement ou automatiquement selon des plages horaires. Merci Apple. Les applications natives s'adaptent maintenant à la configuration de leurs utilisateurs (exemple Instagram, X (Twitter), etc.). Qu'en est-il des sites web ? Et bien, on y vient mais plutôt doucement…
Or, aujourd'hui, il devient de plus en plus intéressant de proposer ce mode étant donné le nombre croissant d'utilisateurs préférant ce type d'affichage. Sur Kortic, la proportion est d'environ 35%.
La conception du mode sombre
Le point de départ est bien sûr la conception graphique. C'est donc aux designers d'anticiper les potentiels petits soucis liés notamment à l'accessibilité. Et oui, il va falloir prévoir des contrastes suffisants !
En soi, ce n'est pas très compliqué, il suffit d'un peu de minutie afin de fournir les bons codes couleurs à celles et ceux qui vont devoir gérer tout ça. La palette doit donc être précise et détaillée avec éventuellement une table de correspondances. Quelle couleur en mode clair correspond à celle en mode sombre ? Et bien entendu, il n'y a pas de « trou »…
Variables CSS personnalisées
Le principe est basé sur l'utilisation des variables CSS. Pour comprendre le fonctionnement, tout est là.
La première étape consiste à définir les couleurs « par défaut ». Dans cet exemple, nous considérons que le mode clair est le premier utilisé.
On positionne les variables CSS personnalisées sur le :root pour assurer un poids conséquent.
Si vous souhaitez informer le navigateur que le mode sombre est préféré par l'interface de votre site, vous
pouvez ajouter dans le head de la page la balise meta name="color-scheme" content="dark light".
Variables mode « clair »
:root {
color-scheme: dark light;
--canvas: rgb(241,243,245);
--background-color-secondary: rgb(255,255,255);
--background-color-hero: rgb(230,233,237);
--background-color-menus: rgb(255,255,255);
--canvasText: rgb(79,87,95);
--button-primary-background: rgb(47,110,190);
--button-primary-foreground: rgb(255,255,255);
/* etc */
}Variables mode « sombre »
Pour appliquer les changements des couleurs en mode sombre, il suffit simplement de modifier les mêmes variables en encapsulant le tout dans une propriété spécifique : @media (prefers-color-scheme: dark).
@media (prefers-color-scheme: dark) {
:root {
--canvas: rgb(32,33,36);
--background-color-secondary: rgb(48,49,52);
--background-color-hero: rgb(16,16,19);
--background-color-menus: var(--background-color-secondary);
--canvasText: rgb(189,193,197);
--button-primary-background: rgb(138,180,249);
--button-primary-foreground: rgb(16,16,19);
/* etc */
}
}À partir de là, les navigateurs supportant prefers-color-scheme appliqueront automatiquement le mode sombre, sans scintillement d'affichage.
C'est tout ! C'est exactement de cette manière que fonctionne ce site…
Gérer le mode sombre pour les icones
Bien entendu, les icones intégrées dans les pages doivent suivre le mouvement. La page actuelle contient un fichier SVG (voir le code source) avec une liste de symbol.
En associant la feuille de styles et les balises svg dans le code, on peut tout simplement avoir le résultat ci-dessous.
C'est plutôt léger et efficace. Pour tester, passer le navigateur (ou le terminal) du mode clair au mode sombre, ou inversement…