Using dark mode in your PWA

In the modern age of devices and applications, the preferences of end users have evolved a bit as well. With the increased usage of screens and devices, health is a major concern. Almost all screen devices now support dark mode. Considering this fact, if you’re building a web app, you might want to provide dark mode support for it. If it is a PWA that presents itself as a native app, the responsibility is much greater. In this recipe, you’ll learn how to provide dark mode for your Angular PWA. You’ll learn three different ways to implement styles for dark mode, including prefers-color-scheme (which is the default/native CSS way) and two ways to implement it with Tailwind CSS.

Getting ready

The app that we are going to work with resides in start/apps/chapter13/ng-pwa-dark-mode inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the cloned code repository...