mirror of https://github.com/alexta69/metube
Made theme toggleable
parent
4bd54939eb
commit
225d37f88d
|
@ -12,6 +12,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
-->
|
||||
<div>
|
||||
<span class="text-white">Toggle Theme</span>
|
||||
<input style="margin: 1rem;" type="checkbox" [ngModel]="this.darkMode" aria-label="Toggle theme" (change)="themeChanged()">
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main" class="container">
|
||||
|
|
|
@ -19,6 +19,7 @@ export class AppComponent implements AfterViewInit {
|
|||
quality: string;
|
||||
format: string;
|
||||
addInProgress = false;
|
||||
darkMode: boolean;
|
||||
|
||||
@ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
|
||||
@ViewChild('queueDelSelected') queueDelSelected: ElementRef;
|
||||
|
@ -37,6 +38,7 @@ export class AppComponent implements AfterViewInit {
|
|||
// Needs to be set or qualities won't automatically be set
|
||||
this.setQualities()
|
||||
this.quality = cookieService.get('metube_quality') || 'best';
|
||||
this.setupTheme(cookieService)
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
@ -67,6 +69,27 @@ export class AppComponent implements AfterViewInit {
|
|||
this.cookieService.set('metube_quality', this.quality, { expires: 3650 });
|
||||
}
|
||||
|
||||
setupTheme(cookieService) {
|
||||
if (cookieService.check('metube_dark')) {
|
||||
this.darkMode = cookieService.get('metube_dark') === "true"
|
||||
} else {
|
||||
this.darkMode = window.matchMedia("prefers-color-scheme: dark").matches
|
||||
}
|
||||
this.setTheme()
|
||||
}
|
||||
|
||||
themeChanged() {
|
||||
this.darkMode = !this.darkMode
|
||||
this.cookieService.set('metube_dark', this.darkMode.toString(), { expires: 3650 });
|
||||
this.setTheme()
|
||||
}
|
||||
|
||||
setTheme() {
|
||||
const doc = document.querySelector('html')
|
||||
const filter = this.darkMode ? "invert(1) hue-rotate(180deg)" : ""
|
||||
doc.style.filter = filter
|
||||
}
|
||||
|
||||
formatChanged() {
|
||||
this.cookieService.set('metube_format', this.format, { expires: 3650 });
|
||||
// Updates to use qualities available
|
||||
|
|
|
@ -1,8 +1,4 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
@media(prefers-color-scheme: dark)
|
||||
html
|
||||
filter: invert(1) hue-rotate(180deg)
|
||||
|
||||
/* Importing Bootstrap SCSS file. */
|
||||
@import '~bootstrap/scss/bootstrap'
|
||||
|
|
Loading…
Reference in New Issue