ngx-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 ngx-darkmode?

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

$ npm install --save ngx-darkmode 

Next, import NgxDarkmodeModule 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 { NgxDarkmodeModule } from '@ngx-darkmode';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxDarkmodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use it

import { Component , OnInit } from '@angular/core';
import { NgxDarkmodeService , WidgetOptions } from 'ngx-darkmode';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'demo';
  constructor(public darkmodeService: NgxDarkmodeService){

  }
  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);
  }
}