ng-dark-light-mode

A lightweight Angular library to toggle dark/light mode dynamically.
Supports Angular 14+ and above.

🚀 What's New

• ✅ Full Angular 14+ support
• 🎨 Light/Dark theme toggling with CSS variables
• ⚡ Easy integration in any Angular project
• 📦 Minimal bundle size

📘 Table of Contents

• 🌐 Browser Support
• ⚙️ Installation
• 🧩 Usage
• 🧩 Standalone Integration (Angular 14+)
• 🧠 Service API
• 🎛️ Component
• 👨‍💻 Creator
• 🧭 Future Plan
• 📄 License

🌐 Browser Support

| Chrome | Firefox | Edge | Safari | Opera | |:-------:|:--------:|:----:|:------:|:------:| | ✔ Latest | ✔ Latest | ✔ Latest | ✔ Latest | ✔ Latest |

⚙️ Installation

Install via npm:

npm install ng-dark-light-mode --save

Or using Angular CLI:

ng add ng-dark-light-mode

🧩 Usage

1️⃣ Import the module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { DarkLightModeModule } from 'ng-dark-light-mode';

@NgModule({
  imports: [DarkLightModeModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

2️⃣ Use the service

import { DarkLightModeService } from 'ng-dark-light-mode';

@Component({...})
export class AppComponent implements OnInit {
  constructor(private themeService: DarkLightModeService) {}

  ngOnInit() {
    this.themeService.setDarkMode();
    // Or:
    // this.themeService.setLightMode();
  }
}

3️⃣ Use the toggle component

<app-theme-toggle></app-theme-toggle>

🧩 Standalone Integration (Angular 14+)

This library fully supports standalone Angular applications.

✅ 1. Provide the service in main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { DarkLightModeService } from 'ng-dark-light-mode';

bootstrapApplication(AppComponent, {
  providers: [DarkLightModeService]
});

✅ 2. Import the component inside a standalone component

import { Component } from '@angular/core';
import { DarkLightModeComponent } from 'ng-dark-light-mode';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [DarkLightModeComponent],
  template: `
    <h1>Welcome 👋</h1>
    <dark-light-mode></dark-light-mode>
  `
})
export class HomeComponent {}

✅ 3. Toggle theme manually using the service

import { Component } from '@angular/core';
import { DarkLightModeService } from 'ng-dark-light-mode';

@Component({
  selector: 'app-header',
  standalone: true,
  template: `
    <button (click)="toggle()">Toggle Theme</button>
  `
})
export class HeaderComponent {
  constructor(private theme: DarkLightModeService) {}

  toggle() {
    this.theme.toggleTheme();
  }
}

🎨 4. Add global CSS variables (required)

:root {
  --background: #ffffff;
  --text-color: #333;
}

.dark-theme {
  --background: #222;
  --text-color: #eee;
}

body {
  background: var(--background);
  color: var(--text-color);
  transition: 0.3s ease;
}

🧠 Service API

| Method | Description | | ------------------- | ------------------------------------- | | setDarkMode() | Switches the theme to dark | | setLightMode() | Switches the theme to light | | toggleTheme() | Toggles between dark and light themes | | getCurrentTheme() | Returns 'dark' or 'light' |

🎛️ Component

<app-theme-toggle> → ready-to-use toggle button to switch themes.
Works out-of-the-box — zero config needed.

👨‍💻 Creator

Rachid Halif
GitHub

🧭 Future Plan

• Add customizable theme support
• Angular Material integration
• Smaller bundle size
• Accessibility improvements

📄 License

MIT License © Rachid Halif

🏷️ Keywords

angular, dark-mode, light-mode, theme-toggle, angular-library