Le mode sombre est une option qui permet aux utilisateurs d'afficher un design assombri pour plus de confort visuel, en particulier dans des environnements peu lumineux. Il peut être activé directement via les réglages du système d'exploitation (Windows, macOS, iOS, Android) ou via les paramètres de certains navigateurs web.
Pourquoi proposer le mode sombre à vos lecteurs ?
Avantages
Amélioration du confort visuel : réduit la fatigue oculaire en basse luminosité.
Expérience utilisateur personnalisée : permet aux lecteurs d'adapter l'interface selon leurs préférences.
Économies d'énergie : sur les écrans OLED, le mode sombre consomme moins d’énergie.
Points de vigilance
Ajout d’une couche de maintenance : nécessite des ajustements spécifiques pour garantir une bonne lisibilité et cohérence visuelle.
Tests nécessaires : certains contrastes doivent être vérifiés pour assurer une lecture optimale.
Comment l'implémenter sur le dashboard Access et Engage ?
L’activation du mode sombre repose sur l’utilisation du bloc "css personnalisé" depuis les réglages de l'élément.
Plus particulièrement, il s'agit d'utiliser la media query CSS @media (prefers-color-scheme: dark), qui permet d'adapter l’apparence automatiquement en fonction du mode choisi par l’utilisateur.
Exemple : Modifier la couleur d'un élément Engage selon le mode sombre
.element {
background-color: #ffffff;
color: #000000;
}
@media (prefers-color-scheme: dark) {
.element {
background-color: #333333;
color: #ffffff;
}
.titre {
color: #ffffff;
}
.description {
color: #ffffff;
}
} Ainsi, lorsque l’utilisateur active le mode sombre, le fond, le titre et la description prendront automatiquement des couleurs adaptées.
À noter : Les styles appliqués directement sur les composants Poool sont prioritaires sur les styles CSS. Nous vous recommandons d'éviter les options de style internes pour les éléments que vous souhaitez adapter au mode sombre et clair.
Comment tester le mode sombre ?
L'aperçu depuis le dashboard s’adapte automatiquement en fonction du mode activé sur l’appareil utilisé pour générer l'aperçu.
Vous pouvez tester ces réglages directement dans l’interface de gestion.
Pour activer le mode sombre sur votre appareil :
Activez le mode sombre dans les paramètres de votre système d'exploitation.
Sur certains navigateurs, vous pouvez également basculer entre les modes clair et sombre.
Des extensions et logiciels permettent de modifier facilement le mode sombre pour tester l'affichage sans modifier les paramètres du système d'exploitation.
Le mode sombre est un atout pour l'expérience utilisateur et devient une norme attendue par les lecteurs.
Grâce aux media queries CSS et à une bonne gestion des styles, vous pouvez offrir une version optimisée de votre interface sans compromettre la lisibilité.
Pensez à tester vos réglages pour assurer une cohérence visuelle optimale sur tous les appareils !