Ngx-Dark-Mode

Frameworks and Languages

Demo

Description

This Repository contains a simple Angular library for toggling between light and dark mode. It is designed to be easy to use and integrate into any Angular application. It uses the localStorage API to save the user's preference for dark mode, so that the setting persists across page reloads.

Installation

npm i @christophhu/ngx-dark-mode

Use

With default toggle

<dark-mode></dark-mode>

With custom toggle

<dark-mode>
  <input type="checkbox" class="toggle" id="toggle" (change)="toggleTheme()"/>
</dark-mode>

import { DarkModeService, DarkModeComponent, Theme } from "@christophhu/ngx-dark-mode";
import { DarkModeService } from '@christophhu/ngx-dark-mode';

@Component({
  ...
  imports: [
    DarkModeComponent
  ],
  providers: [
    DarkModeService
  ]
})
export class TestComponent {
  
  constructor(private _darkModeService: DarkModeService) {}

  toggleTheme() {
    this._darkModeService.toggleTheme()
  }
  getTheme(): Observable<Theme> {
    return this._darkModeService.theme$
  }
}