A library for adding night-mode to your Angular 9 app.
npm install ngx-nightmodeA library for adding night-mode to your Angular 9 app.
- 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
ngx-darkmode?Navigate to your project's folder and run the following command:
``bash`
$ npm install --save ngx-darkmode
Next, import NgxNightmodeModule and add it to the imports array f your app:
`ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxNightmodeModule } from 'ngx-nightmode';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxNightmodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
`ts
import { Component , OnInit } from '@angular/core';
import { NgxNightmodeService , WidgetOptions } from 'ngx-nightmode';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'demo';
constructor(public nightmodeService: NgxNightmodeService){
}
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.nightmodeService.showWidget(opts);
}
}
``