From 225d37f88d3a2f763a46d3035a4491eeb4b56045 Mon Sep 17 00:00:00 2001
From: asuyou <asuyou@users.noreply.github.com>
Date: Thu, 16 Dec 2021 21:52:56 +0000
Subject: Made theme toggleable

---
 ui/src/app/app.component.html |  4 ++++
 ui/src/app/app.component.ts   | 23 +++++++++++++++++++++++
 ui/src/styles.sass            |  4 ----
 3 files changed, 27 insertions(+), 4 deletions(-)

(limited to 'ui/src')

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'
-- 
cgit 


From 61900a7ba8b11beb2125f31072abe8bcd1d6a10c Mon Sep 17 00:00:00 2001
From: asuyou <asuyou@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:35:43 +0200
Subject: Theme button is now material button

---
 ui/src/app/app.component.html | 8 ++++++--
 ui/src/styles.sass            | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'ui/src')

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 248ea76..3fc9bd2 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -13,8 +13,12 @@
   </div>
   -->
   <div>
-    <span class="text-white">Toggle Theme</span>
-    <input style="margin: 1rem;" type="checkbox" [ngModel]="this.darkMode" aria-label="Toggle theme" (change)="themeChanged()">
+    <button class="btn btn-secondary" aria-label="Toggle theme" (click)="themeChanged()">
+      <i *ngIf="darkMode; else sunIcon" class="bi bi-sun-fill"></i>
+      <ng-template #sunIcon>
+        <i class="bi bi-moon-stars-fill"></i>
+      </ng-template>
+    </button>
   </div>
 </nav>
 
diff --git a/ui/src/styles.sass b/ui/src/styles.sass
index 5d54ecb..d4e5b6e 100644
--- a/ui/src/styles.sass
+++ b/ui/src/styles.sass
@@ -2,3 +2,4 @@
 
 /* Importing Bootstrap SCSS file. */
 @import '~bootstrap/scss/bootstrap'
+@import '~bootstrap-icons/font/bootstrap-icons.css'
-- 
cgit 


From 498e30c6335693436eb01edf99dd955562a324f6 Mon Sep 17 00:00:00 2001
From: Alex Shnitman <alexta69@gmail.com>
Date: Fri, 17 Dec 2021 19:30:20 +0200
Subject: changes to the theme toggle button

---
 ui/src/app/app.component.html | 9 +++------
 ui/src/app/app.component.sass | 4 ++++
 ui/src/app/app.component.ts   | 4 +++-
 ui/src/styles.sass            | 1 -
 4 files changed, 10 insertions(+), 8 deletions(-)

(limited to 'ui/src')

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 3fc9bd2..cebd97f 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -12,12 +12,9 @@
     </ul>
   </div>
   -->
-  <div>
-    <button class="btn btn-secondary" aria-label="Toggle theme" (click)="themeChanged()">
-      <i *ngIf="darkMode; else sunIcon" class="bi bi-sun-fill"></i>
-      <ng-template #sunIcon>
-        <i class="bi bi-moon-stars-fill"></i>
-      </ng-template>
+  <div class="ml-auto">
+    <button class="btn btn-outline-light button-toggle-theme" aria-label="Toggle theme" (click)="themeChanged()">
+      <fa-icon [icon]="darkMode ? faSun : faMoon"></fa-icon>
     </button>
   </div>
 </nav>
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 970aa74..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';
@@ -32,6 +32,8 @@ 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';
diff --git a/ui/src/styles.sass b/ui/src/styles.sass
index d4e5b6e..5d54ecb 100644
--- a/ui/src/styles.sass
+++ b/ui/src/styles.sass
@@ -2,4 +2,3 @@
 
 /* Importing Bootstrap SCSS file. */
 @import '~bootstrap/scss/bootstrap'
-@import '~bootstrap-icons/font/bootstrap-icons.css'
-- 
cgit