diff --git a/ui/src/app/app.component.sass b/ui/src/app/app.component.sass index 2cc0ede..a084286 100644 --- a/ui/src/app/app.component.sass +++ b/ui/src/app/app.component.sass @@ -1,3 +1,7 @@ +.button-toggle-theme:focus, .button-toggle-theme:active + box-shadow: none + outline: 0px + .add-url-box max-width: 720px margin: 4rem auto diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 26ae3c5..8f7d965 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons'; -import { faRedoAlt } from '@fortawesome/free-solid-svg-icons'; +import { faRedoAlt, faSun, faMoon } from '@fortawesome/free-solid-svg-icons'; import { CookieService } from 'ngx-cookie-service'; import { DownloadsService, Status } from './downloads.service'; @@ -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; @@ -31,12 +32,15 @@ export class AppComponent implements AfterViewInit { faCheckCircle = faCheckCircle; faTimesCircle = faTimesCircle; faRedoAlt = faRedoAlt; + faSun = faSun; + faMoon = faMoon; constructor(public downloads: DownloadsService, private cookieService: CookieService) { this.format = cookieService.get('metube_format') || 'any'; // 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 +71,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 diff --git a/ui/src/styles.sass b/ui/src/styles.sass index c54d06a..5d54ecb 100644 --- a/ui/src/styles.sass +++ b/ui/src/styles.sass @@ -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'