diff --git a/projects/darkmode-angular/src/lib/darkmode-angular.component.scss b/projects/darkmode-angular/src/lib/darkmode-angular.component.scss index b1934c1..284730e 100644 --- a/projects/darkmode-angular/src/lib/darkmode-angular.component.scss +++ b/projects/darkmode-angular/src/lib/darkmode-angular.component.scss @@ -1,6 +1,7 @@ .btn-mode { - background: var(--primary); + background: var(--color-primary); color: #fff; + padding: 1rem; border-radius: 50px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), 0 0 0 5px rgba(0,0,0,.1); border: 0; @@ -8,12 +9,7 @@ display: flex; justify-content: center; align-items: center; - margin: 2rem 1rem; - position: fixed; - top: 0; - right: 0; - padding: .6rem; - z-index: 11; + margin: 2rem auto; &.hiddenLabel svg { margin-right: 0; } diff --git a/projects/darkmode-angular/src/lib/darkmode-angular.component.ts b/projects/darkmode-angular/src/lib/darkmode-angular.component.ts index ba3472d..ab09a67 100644 --- a/projects/darkmode-angular/src/lib/darkmode-angular.component.ts +++ b/projects/darkmode-angular/src/lib/darkmode-angular.component.ts @@ -2,41 +2,39 @@ import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ - selector: 'app-darkmode', + selector: 'darkmode-angular', standalone: true, imports: [CommonModule], - templateUrl: './darkmode.component.html', - styleUrls: ['./darkmode.component.scss'], - encapsulation: ViewEncapsulation.None + templateUrl: './darkmode-angular.component.html', + styleUrls: ['./darkmode-angular.component.scss'], + encapsulation: ViewEncapsulation.None, }) export class DarkmodeComponent implements OnInit { - @Input() hiddenLabel: boolean | undefined; - constructor() { } + constructor() {} - modeLocal = localStorage.getItem('darkmode') - mode = this.modeLocal == null ? false : JSON.parse(this.modeLocal) + modeLocal = localStorage.getItem('darkmode'); + mode = this.modeLocal == null ? false : JSON.parse(this.modeLocal); toggleMode = () => { - this.mode = !this.mode - this.setMode(this.mode) - } + this.mode = !this.mode; + this.setMode(this.mode); + }; setMode = (value: boolean) => { - localStorage.setItem('darkmode', JSON.stringify(value)) + localStorage.setItem('darkmode', JSON.stringify(value)); - if(value) { - document.body.classList.add('darkmode') - document.body.classList.remove('lightmode') + if (value) { + document.body.classList.add('darkmode'); + document.body.classList.remove('lightmode'); } else { - document.body.classList.add('lightmode') - document.body.classList.remove('darkmode') + document.body.classList.add('lightmode'); + document.body.classList.remove('darkmode'); } - } + }; ngOnInit(): void { - this.setMode(this.mode) + this.setMode(this.mode); } - } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b6eaa1d..3605ab9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,16 +4,10 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { DarkmodeComponent } from 'projects/darkmode-angular/src/public-api'; - @NgModule({ - declarations: [ - AppComponent, - DarkmodeComponent - ], - imports: [ - BrowserModule - ], + declarations: [AppComponent], + imports: [BrowserModule, DarkmodeComponent], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {}