aboutsummaryrefslogtreecommitdiff
path: root/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/app/app.component.html4
-rw-r--r--ui/src/app/app.component.ts23
-rw-r--r--ui/src/styles.sass4
3 files changed, 27 insertions, 4 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 1496bde..248ea76 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -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">
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 26ae3c5..970aa74 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -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
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'
bgstack15