A Beginner's Guide to Adding Light/Dark Mode Toggle in Angular Material

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.
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 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!