theming adjustments throughout the app

NUXT/components/CompactRenderers/compactChannelRenderer.vue

@@ -29,7 +29,11 @@
           {{ title.text }}
         </div>
 
-        <div class="grey--text caption" v-text="parseBottom(video)" />
+        <div
+          class="caption background--text"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          v-text="parseBottom(video)"
+        />
       </v-card-text>
     </div>
   </v-card>

NUXT/components/CompactRenderers/compactVideoRenderer.vue

@@ -52,7 +52,11 @@
           {{ title.text }}
         </div>
 
-        <div class="grey--text caption" v-text="parseBottom(video)" />
+        <div
+          class="background--text caption"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          v-text="parseBottom(video)"
+        />
       </v-card-text>
     </div>
   </v-card>

NUXT/components/SectionRenderers/itemSectionRenderer.vue

@@ -16,7 +16,8 @@
       v-if="
         render.separatorDetails && render.separatorDetails.hasBottomSeparator
       "
-      class="separator-bottom grey"
+      class="separator-bottom background"
+      :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
       :style="{ height: render.separatorDetails.height + 'px' }"
     ></div>
   </div>

NUXT/components/SectionRenderers/shelfRenderer.vue

@@ -13,7 +13,8 @@
     ></component>
     <div
       v-if="render.separator && render.separator.hasBottomSeparator"
-      class="separator-bottom grey"
+      class="separator-bottom background"
+      :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
       :style="{ height: render.separator.height + 'px' }"
     ></div>
   </div>

NUXT/components/topNavigation.vue

@@ -22,7 +22,9 @@
       flat
       label="Search"
       style="margin-top: 1px"
-      background-color="background lighten-1"
+      :background-color="
+        $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
+      "
       @input="$emit('text-changed', text)"
       @keyup.enter="$emit('search-btn', text)"
     />

NUXT/layouts/error.vue

@@ -2,7 +2,12 @@
   <v-app>
     <center>
       <v-icon size="100">mdi-alert-circle</v-icon>
-      <h1 class="grey--text">An error occured!</h1>
+      <h1
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
+        An error occured!
+      </h1>
       <v-btn to="/">Reload Application</v-btn>
       <v-btn to="/logs">Show Logs</v-btn>
 

NUXT/pages/library.vue

@@ -5,7 +5,21 @@
       style="margin-top: 5em; max-width: 80%; max-height: 15em"
       src="/dev.svg"
     />
-    <h1 class="grey--text">Page Under Construction</h1>
-    <p class="grey--text">Please read the VueTube FAQ for more information.</p>
+    <h1
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Page Under Construction
+    </h1>
+    <p
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Please read the VueTube FAQ for more information.
+    </p>
   </center>
 </template>
+
+<script>
+export default {};
+</script>

NUXT/pages/mods/tweaks.vue

@@ -1,25 +1,27 @@
 <template>
   <div class="d-flex flex-column justify-end" style="min-height: 100%">
-    <h4 class="mx-10">Layout</h4>
-    <v-card flat class="px-4 mx-4 mb-4 mt-2 background lighten-1 rounded-xl">
-      <v-switch disabled label="Dense Navbars" />
-      <v-switch class="mt-0" disabled label="Disable Top Bar" />
-      <!-- <v-switch class="mt-6" disabled label="Reverse (disabled)" /> -->
-    </v-card>
-    <h4 class="mx-10">Rounded Corners</h4>
-    <v-card flat class="px-4 mx-4 mb-4 mt-2 background lighten-1 rounded-xl">
-      <v-switch disabled label="Reverse (disabled)" />
-      <v-slider
-        disabled
-        class="mr-2"
-        label="Outer (disabled)"
-        :max="4"
-        step="1"
-        thumb-size="64"
-      ></v-slider>
+    <v-card
+      flat
+      class="px-4 ma-4 mt-2 background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :style="{
+        borderRadius: `${roundTweak / 2}rem`,
+      }"
+    >
+      <h3 class="mt-4">Rounded Corners</h3>
+      <div
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
+        applies to only a few elements for now
+      </div>
+      <!-- TODO: outer radius -->
+      <!-- TODO: Dense Navbar -->
+      <!-- TODO: Disable Top Bar -->
+      <!-- TODO: Top and Bottom bar color selection -->
       <v-slider
         v-model="roundTweak"
-        class="mr-2"
+        class="mr-2 mt-5"
         label="Inner"
         :max="4"
         step="1"
@@ -28,7 +30,7 @@
       >
         <template #thumb-label="{ value }">
           <div
-            class="pa-4 white text-red red-text red--text"
+            class="pa-4 background text-red red-text red--text"
             :style="{ borderRadius: value * 3 + 'px !important' }"
           ></div>
         </template>

NUXT/pages/subscriptions.vue

@@ -5,7 +5,21 @@
       style="margin-top: 5em; max-width: 80%; max-height: 15em"
       src="/dev.svg"
     />
-    <h1 class="grey--text">Page Under Construction</h1>
-    <p class="grey--text">Please read the VueTube FAQ for more information.</p>
+    <h1
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Page Under Construction
+    </h1>
+    <p
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Please read the VueTube FAQ for more information.
+    </p>
   </center>
 </template>
+
+<script>
+export default {};
+</script>