How to provide the ultimate web dark mode experience

Adding dark mode to your web app is one way of improving the user experience.

Here are some dark mode features that you should add to your web app, to provide the ultimate dark mode experience.

1. Matching the system dark mode

The ability to follow the system dark mode makes your app integrate naturally with the user's system. This way, users don't have to switch to dark mode manually through the settings, unless they want to opt out.

2. Remembering the dark theme state on next visit

This will allow the users to feel like they are picking up from where they left off. Plus, having to click that manual switch every time is very annoying.

You will have to store the dark mode state on the client and in a database to maintain the state between sessions on different devices.

3. Watching for the system dark mode changes

This partially removes the need to remember the dark mode state on the next visit. It also provides the natural integration we talked about earlier. It ensures that your web app matches with the user's system, and transitions to the matching system mode automatically.

You should also provide the option to turn this off somewhere in the settings. Not everyone will prefer this.

🔷 You should also keep in mind that getting or watching for the system dark mode change is device or browser-dependent. Some of your users might be using unsupported devices. For example, Android devices running Android 9 and below, do not support dark mode. This necessitates the need to store the dark mode state in a database.

Here are some helpful resources:

1. Detecting system theme in JavaScript / CSS / React
2. Dark Theme using CSS Variables and Local Storage

Happy coding!