Dark Mode in Angular: Building a Theme Switcher for Your App

Why Implement Dark Mode?

Dark mode has several advantages:

• Reduced Eye Strain: Dark mode is easier on the eyes, especially in low-light conditions.

• Improved Battery Life: For OLED and AMOLED displays, dark mode can reduce power consumption.

• Aesthetic Appeal: Many users prefer the sleek look of dark mode, making it a popular design choice.

Steps to Build a Dark Mode Theme Switcher in Angular

1. Create an Angular Project

ng new angular-dark-mode

2. Define CSS Variables for Themes

:root {
 --background-color: #ffffff;
 --text-color: #000000;
 --button-background: #007bff;
 --button-color: #ffffff;
}

:root.dark-mode {
 --background-color: #121212;
 --text-color: #ffffff;
 --button-background: #4a90e2;
 --button-color: #ffffff;
}

body {
 background-color: var(--background-color);
 color: var(--text-color);
}

button {
 background-color: var(--button-background);
 color: var(--button-color);
 border: none;
 padding: 10px;
 cursor: pointer;
}

3. Create a Theme Service to Manage Dark Mode

ng generate service services/theme

In theme.service.ts, implement the logic to toggle and save the theme:

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

@Injectable({
 providedIn: 'root'
})
export class ThemeService {

 private readonly DARK_MODE_CLASS = 'dark-mode';
 private readonly THEME_KEY = 'theme';

 constructor() { 
  const savedTheme = localStorage.getItem(this.THEME_KEY);
  if (savedTheme === 'dark') {
   this.enableDarkMode();
  } else {
   this.enableLightMode();
  }
 }

 enableDarkMode() {
  document.documentElement.classList.add(this.DARK_MODE_CLASS);
  localStorage.setItem(this.THEME_KEY, 'dark');
 }

 enableLightMode() {
  document.documentElement.classList.remove(this.DARK_MODE_CLASS);
  localStorage.setItem(this.THEME_KEY, 'light');
 }

 toggleTheme() {
  if (document.documentElement.classList.contains(this.DARK_MODE_CLASS)) {
   this.enableLightMode();
  } else {
   this.enableDarkMode();
  }
 }
}

4. Add a Theme Switcher in Your Component

Edit your app.component.ts file to inject the ThemeService and create a method for theme switching:

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'angular-dark-mode';

 constructor(private themeService: ThemeService) {}

 toggleTheme() {
  this.themeService.toggleTheme();
 }
}

In app.component.html, add a button that toggles the theme:

<div class="app-container">
 <h1>Angular Dark Mode Theme Switcher</h1>
 <button (click)="toggleTheme()">Toggle Dark Mode</button>
</div>

5. Styling the Component for Dark Mode

<div class="card">
 <h2>Card Title</h2>
 <p>This is an example card that adapts to the current theme.</p>
</div>

<button (click)="toggleTheme()">
  <fa-icon [icon]="['fas', 'sun']" *ngIf="isDarkMode"></fa-icon>
  <fa-icon [icon]="['fas', 'moon']" *ngIf="!isDarkMode"></fa-icon>
</button>

.card {
 background-color: var(--background-color);
 color: var(--text-color);
 border: 1px solid #ccc;
 padding: 15px;
 border-radius: 5px;
}

6. Test and Enjoy

ng serve