Tackling theming can at first seem like a daunting, complex task. In this short example we’ll use a service to communicate between components to affect our global class to enable/disable our dark theme.
First, let’s create a service which will allow us to share our dark mode boolean between components:
Second, let’s inject our service into our components so that we can call toggle():
Applying the Theme
Applying our class is as simple as using the attribute binding below:
As you can see all that it takes is using dependency injection to share our toggle method and state. between components.