Skip to main content

Explore Web Accessibility (a11y)

Back to navigation

Dark mode

You would have seen or heard lots of debates on light vs dark modes, and you too might have a preference. For example, I prefer dark mode personally because it feels easier on my eyes, but many of my friends prefer light mode. When we are designing our websites and applications, dark mode is one of the features you should consider implementing.

Our devices have setting which can be enabled to select a particular color schema. Check the reference links to find out more about how to enable those settings. But how does our code know if the user has these settings enabled? Let's see an example before proceeding further:

Demo:

This is some test content.
The color scheme will change based on the user device settings for color scheme.

How to honor user's settings?

We can achieve this through two ways:

Resources: