Ce code snippet javascript peut détecter si l’utilisateur a réglé son ordinateur en dark mode ou mode sombre en français ! Si c’est le cas, il renvoie la réponse true. Il s’agit d’un morceau de code qui peut contribuer à améliorer votre site Web ou votre application en le rendant plus accessible à ceux qui préfèrent le mode sombre.
JavaScript Dark Mode
const isDarkMode = () =>
globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;
// Usage
isDarkMode();Qu'est-ce que le dark mode ou mode sombre en français ?
Le dark mode est une fonctionnalité qui vous permet de modifier la palette de couleurs de votre appareil en une teinte plus sombre. De nombreuses personnes préfèrent le mode sombre car il permet de réduire la fatigue oculaire et facilite la lecture du texte sur votre écran. Le mode sombre est disponible sur de nombreux appareils, notamment les smartphones, les ordinateurs portables et les tablettes.
Si vous travaillez sur des applications en Javascript, pouvoir proposer un mode dark permets d’améliorer le confort de vos utilisateurs pendant l’utilisation qu’ils font de votre application.
Comment activer/désactiver le mode sombre ?
Voici comment vous pouvez activer les thèmes sombres pour vos appareils et applications les plus courants avec Windows, Android, Mac et iOS :
Windows
- Dans le menu Démarrer, sélectionnez Paramètres et Personnalisation.
- Sélectionnez l’option Arrière-plan dans la partie gauche de l’écran. Vous pouvez télécharger votre propre thème sombre, ou en choisir un fourni par Windows.
- Sélectionnez l’option Couleurs dans la partie gauche de l’écran. Vous pouvez choisir une couleur plus agréable à l’œil, comme le gris, le bronzé ou un jaune ou un bleu atténué (au choix).
- Testez votre choix de couleur dans le thème sombre en cliquant sur Sombre dans l’option Choisissez votre mode d’application par défaut. Si vous n’aimez pas les couleurs que vous avez choisies, réessayez avec autre chose !
Android
- Allez dans Paramètres, puis dans Accessibilité, et enfin dans Écran d’affichage.
- Cliquez sur pour le thème Sombre pour l’appliquer ou Utiliser l’inversion des couleurs pour l’appliquer.
MacOS
- Naviguez jusqu’à Préférences Système.
- Cliquez sur Général.
- Choisissez l’option d’apparence qui vous convient le mieux. Il y a les options claires, sombres et auto, qui changent en fonction de l’heure de la journée.
iOS
- Allez dans Paramètres.
- Sélectionnez Affichage et Luminosité.
- Activez ou désactivez le mode sombre.
Conclusion
Le mode sombre permets d’apporter du confort à vos utilisateurs, ajouter une fonctionnalité mode sombre à vos applications est un véritable plus non négligeable.
Si vous cherchez d’autres articles sur le JavaScript, d’autres astuces, vous pouvez consultez mes articles javascript.
