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
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.
The Service
First, let’s create a service which will allow us to share our dark mode boolean between components:
/src/app/theme.service.ts
The Components
Second, let’s inject our service into our components so that we can call toggle():
/src/app/app.component.ts
/src/app/child/child.component.ts
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.