From 6413d861b41c9135d3818f9d9baa68aa756df6ce Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Wed, 2 Nov 2022 20:38:35 +0530
Subject: [PATCH 1/5] Fix black bars in light mode

---
 index.html                         | 2 +-
 src/App.vue                        | 2 +-
 src/components/FooterComponent.vue | 2 +-
 src/components/NavBar.vue          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 8e22d715..a2ee39e4 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="background: #0f0f0f" lang="en">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
diff --git a/src/App.vue b/src/App.vue
index 4db3bfb8..5bd33675 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full min-h-screen px-1vw reset" :class="[theme]">
+    <div class="w-full min-h-screen px-1vw py-5 reset" :class="[theme]">
         <NavBar />
 
         <router-view v-slot="{ Component }">
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index 1381c495..8ccd6268 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <footer class="text-center py-4 rounded-xl children:(mx-3) w-full mt-10 mb-5">
+    <footer class="text-center py-4 rounded-xl children:(mx-3) w-full mt-10">
         <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
             <font-awesome-icon :icon="['fab', 'github']" />
             <span class="ml-2" v-t="'actions.source_code'" />
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6a046e1d..ed9d5cb7 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative">
+    <nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 pb-2.5 w-full relative">
         <div class="flex-1 flex justify-start">
             <router-link class="flex font-bold text-3xl items-center font-sans" to="/"
                 ><img

From 5f6b3bdae5389769e3f8fc95b8e4e363dcdf2e3a Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Wed, 2 Nov 2022 22:14:32 +0530
Subject: [PATCH 2/5] Fix regression: flash of white background

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a2ee39e4..9e6ff884 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html style="background: #0f0f0f" lang="en" >
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />

From ffd02f9cdd1fdb8b26c04b1db51c15f4fbae3d6e Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Wed, 2 Nov 2022 22:17:40 +0530
Subject: [PATCH 3/5] Make Modal respect (light) theme preference

---
 src/components/ModalComponent.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 3fdaea06..0adb6744 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -34,7 +34,10 @@ export default {
 
 <style scoped>
 .modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
+    @apply fixed z-50 top-0 left-0 w-full h-full bg-gray bg-opacity-80 transition-opacity table;
+}
+.dark .modal {
+    @apply bg-dark-900 bg-opacity-80;
 }
 
 .modal > div {
@@ -42,7 +45,10 @@ export default {
 }
 
 .modal-container {
-    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw] relative;
+    @apply w-min m-auto px-8 bg-white p-6 rounded-xl min-w-[20vw] relative;
+}
+.dark .modal-container {
+    @apply bg-dark-700;
 }
 
 .modal-container > button {

From c4928810964673422b84df4a600cf0a64c707569 Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Wed, 2 Nov 2022 22:18:24 +0530
Subject: [PATCH 4/5] Make scroll bar respect (light) theme preference

---
 src/App.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5bd33675..771a62fa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,6 +33,10 @@ export default {
             let themePref = this.getPreferenceString("theme", "dark");
             if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
             else this.theme = themePref;
+
+            // Used for the scrollbar
+            const root = document.querySelector(":root");
+            this.theme == "dark" ? root.classList.add("dark") : root.classList.remove("dark");
         },
     },
     mounted() {
@@ -96,28 +100,31 @@ b {
     text-align: start;
 }
 
-::-webkit-scrollbar {
+.dark ::-webkit-scrollbar {
     background-color: #15191a;
 }
 
-::-webkit-scrollbar-thumb {
+.dark ::-webkit-scrollbar-thumb {
     background-color: #4b4f52;
 }
 
-::-webkit-scrollbar-thumb:hover {
+.dark ::-webkit-scrollbar-thumb:hover {
     background-color: #5b6469;
 }
 
-::-webkit-scrollbar-thumb:active {
+.dark ::-webkit-scrollbar-thumb:active {
     background-color: #485053;
 }
 
-::-webkit-scrollbar-corner {
+.dark ::-webkit-scrollbar-corner {
     background-color: #0b0e0f;
 }
 
+:root.dark {
+    scrollbar-color: #4b4f52 #15191a;
+}
+
 * {
-    scrollbar-color: #15191a #444a4e;
     @apply font-sans;
 }
 

From 39d1b3ed22eaa5a32ec7689335069aa9b79ddb7b Mon Sep 17 00:00:00 2001
From: thecashewtrader <thecashewtrader@protonmail.com>
Date: Thu, 3 Nov 2022 20:21:38 +0530
Subject: [PATCH 5/5] Use custom light mode scrollbar in browsers with
 ::-webkit-scrollbar

---
 src/App.vue | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 771a62fa..b6d252a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -100,6 +100,30 @@ b {
     text-align: start;
 }
 
+::-webkit-scrollbar {
+    background-color: #d1d5db;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #4b4f52;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #5b6469;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #485053;
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #0b0e0f;
+}
+
+:root {
+    scrollbar-color: #4b4f52 #d1d5db;
+}
+
 .dark ::-webkit-scrollbar {
     background-color: #15191a;
 }
