A Beginner's Guide to Adding Light/Dark Mode Toggle in Angular Material
Tags: toggletheme, angularmaterial, uiuxdeveloper, singlepageapplication
Published: 2023-10-03 07:33:00

As the demand for user-friendly web applications continues to rise, implementing a light and dark mode feature has become a popular choice among developers. This feature enhances user experience and accessibility, allowing users to choose a theme that suits their preferences. In this beginner-friendly guide, we'll walk you through the steps to add a light/dark mode toggle button to your Angular application using Angular Material.


## Prerequisites
Before we get started, make sure you have the following prerequisites in place:

1. Node.js and npm: Ensure that Node.js and npm (Node Package Manager) are installed on your system. You can download them from [nodejs.org.](Node.js and npm: Ensure that Node.js and npm (Node Package Manager) are installed on your system. You can download them from nodejs.org.)
2. Angular CLI: Install the Angular CLI globally by running **npm install -g @angular/cli** in your terminal.
3. Angular Project: Create a new Angular project using the Angular CLI. If you don't have one yet, you can create it by running **ng new my-angular-app**.

## Step 1: Install Angular Material
Angular Material is a UI component library that provides pre-built components for Angular applications. To add Angular Material to your project, use the following Angular CLI command:



```
ng add @angular/material
```

During the installation process, you'll have the option to select a pre-built theme or create a custom theme. Choose the option that best fits your project's design requirements.

## Step 2: Create the Theme Toggle Button Component
Next, create a new Angular component to house the light/dark mode toggle button:

```
ng generate component theme-toggle
```

## Step 3: Update the Theme Toggle Component
Now, let's add the necessary code to the** theme-toggle.component.html** and **theme-toggle.component.ts files** to create the toggle button:

**theme-toggle.component.html:**

```
<button mat-icon-button (click)="toggleTheme()">
  <mat-icon>{{ isDarkMode ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
</button>
```

**theme-toggle.component.ts:**

```
import { Component } from '@angular/core';
import { ThemeService } from '../theme.service';

@Component({
  selector: 'app-theme-toggle',
  templateUrl: './theme-toggle.component.html',
  styleUrls: ['./theme-toggle.component.css'],
})
export class ThemeToggleComponent {
  isDarkMode: boolean;

  constructor(private themeService: ThemeService) {
    this.isDarkMode = this.themeService.isDarkMode();
  }

  toggleTheme() {
    this.isDarkMode = !this.isDarkMode;
    this.themeService.setDarkMode(this.isDarkMode);
  }
}
```

## Step 4: Create a Theme Service
To manage the application's theme state, create a service called **ThemeService**:

```
ng generate service theme
```

In the **theme.service.ts** file, add methods to get and set the theme:

**theme.service.ts:**

```
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  private darkMode = false;

  isDarkMode() {
    return this.darkMode;
  }

  setDarkMode(isDarkMode: boolean) {
    this.darkMode = isDarkMode;
    if (isDarkMode) {
      document.body.classList.add('dark-theme');
    } else {
      document.body.classList.remove('dark-theme');
    }
  }
}
```

## Step 5: Define CSS for Dark Theme
In your project's global styles file (usually src/styles.css), define CSS styles for the dark theme. For example:

**styles.css:**

```
/* Dark Theme Styles */
.dark-theme {
  background-color: #121212;
  color: #ffffff;
}
```

## Step 6: Use the Theme Toggle Button
In your main application template **(app.component.html)**, include the **<app-theme-toggle></app-theme-toggle>** tag to add the theme toggle button to your app's interface:

**app.component.html:**

```
<div class="app-container">
  <app-theme-toggle></app-theme-toggle>
  <!-- Other content of your app -->
</div>
```

## Step 7: Run Your Application
You're all set! To see your light/dark mode toggle button in action, run your Angular application using the following command:

```
ng serve
```
Visit **http://localhost:4200** in your web browser to interact with your app and switch between light and dark modes using the toggle button.

Congratulations! You've successfully added a light/dark mode toggle button to your Angular application using Angular Material. This feature enhances the user experience and allows users to customize their viewing experience according to their preferences.

Feel free to customize the styles, icons, and themes to match your application's design. Happy coding!