ng-darkmode

Angular 9 Dark Mode Library

A library for adding dark-mode to your Angular 9 app.

Features

• Widget appears automatically
• Saving users choice
• Automatically shows Darkmode if the OS prefered theme is dark (if the browsers supports prefers-color-scheme)
• Can be used programmatically without widget

How to Use ng-darkmode?

Navigate to your project's folder and run the following command:

$ npm install --save ng-darkmode 

Next, import NgDarkmodeModule and add it to the imports array f your app:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { NgDarkmodeModule } from '@ngx-darkmode';
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgDarkmodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use it

import { Component , OnInit } from '@angular/core';
import { NgDarkmodeService , WidgetOptions } from 'ng-darkmode';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 
  title = 'demo';
  constructor(public darkmodeService: NgDarkmodeService){
 
  }
  ngOnInit(): void {
    
 
    var opts: WidgetOptions = {
      bottom: '64px', // default: '32px'
      right: 'unset', // default: '32px'
      left: '32px', // default: 'unset'
      time: '0.5s', // default: '0.3s'
      mixColor: '#fff', // default: '#fff'
      backgroundColor: '#fff',  // default: '#fff'
      buttonColorDark: '#100f2c',  // default: '#100f2c'
      buttonColorLight: '#fff', // default: '#fff'
      saveInCookies: false, // default: true,
      label: '🌓', // default: ''
      autoMatchOsTheme: true // default: true
    }
 
    this.darkmodeService.showWidget(opts);
  }
}