theming applied in more places

NUXT/components/vidLoadRenderer.vue

@@ -1,7 +1,12 @@
 // this is an loading animation for videos
 <template>
   <center>
-    <v-skeleton-loader type="card-avatar, article, actions" />
-    <v-skeleton-loader type="card-avatar, article, actions" />
+    <v-sheet color="background">
+      <v-skeleton-loader type="card-avatar, article, actions" />
+    </v-sheet>
   </center>
 </template>
+
+<script>
+export default {};
+</script>

NUXT/layouts/default.vue

@@ -39,7 +39,7 @@
                 text
                 tile
                 dense
-                class="info--text searchButton text-left text-capitalize"
+                class="searchButton text-left text-capitalize"
                 @click="youtubeSearch(item)"
               >
                 <v-icon class="mr-5">mdi-magnify</v-icon>

NUXT/pages/mods/logs.vue

@@ -1,20 +1,28 @@
 <template>
   <div>
     <v-list-item v-for="(item, index) in logs" :key="index">
-      <v-card class="card">
+      <v-card
+        class="card background"
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+        flat
+      >
         <v-card-title>
           <v-chip v-if="item.error" outlined class="errorChip" color="error"
             >Error</v-chip
           >
           {{ item.name }}
           <span
-            class="date"
+            class="date background--text"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
             v-text="`• ${new Date(item.time).toLocaleString()}`"
           />
         </v-card-title>
 
         <v-expansion-panels>
-          <v-expansion-panel>
+          <v-expansion-panel
+            class="background"
+            :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+          >
             <v-expansion-panel-header>More</v-expansion-panel-header>
             <v-expansion-panel-content class="logContent" v-text="item.data" />
           </v-expansion-panel>
@@ -33,7 +41,6 @@
   margin: 0.4em;
   font-size: 0.75em;
   transform: translateY(5%);
-  color: #999;
 }
 .errorChip {
   margin-right: 0.5em;

NUXT/pages/mods/startup.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="mainContainer pt-1">
-    <v-card class="pb-5">
+    <v-card
+      flat
+      class="pb-5 background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+    >
       <v-card-title>Default Page</v-card-title>
       <v-card-text>
         <v-select
           v-model="page"
+          background-color="background"
           :items="pages"
           label="Default Page"
           solo

NUXT/pages/mods/updates.vue

@@ -1,26 +1,51 @@
 <template>
   <div class="py-2">
     <v-list-item v-for="(item, index) in commits" :key="index" class="my-1">
-      <v-card class="card my-2">
+      <v-card
+        flat
+        class="card my-2 background"
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      >
         <v-card-title style="padding: 0 0.25em 0 0.75em">
           {{ item.author ? item.author.login : item.commit.author.name }}
-          <span class="subtitle" v-text="`• ${item.sha.substring(0, 7)}`" />
+          <span
+            class="subtitle background--text"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+            v-text="`• ${item.sha.substring(0, 7)}`"
+          />
           <v-spacer />
-          <v-chip v-if="index == 0" outlined class="tags" color="orange"
-            >Latest</v-chip
+          <v-chip
+            v-if="index == 0"
+            class="tags"
+            color="orange"
+            style="
+              border-radius: 0.5rem;
+              border: 2px var(--v-oragnge-base);
+              margin-top: -1.5rem;
+              margin-right: -0.5rem;
+            "
           >
+            Latest
+          </v-chip>
           <v-chip
             v-if="item.sha == installedVersion"
-            outlined
             class="tags"
             color="green"
+            style="
+              border-radius: 0.5rem;
+              border: 2px var(--v-green-base);
+              margin-top: -1.5rem;
+              margin-right: -0.5rem;
+            "
+          >
             >Installed</v-chip
           >
         </v-card-title>
 
         <div style="margin-left: 1em">
           <div
-            class="date"
+            class="date background--text"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
             v-text="new Date(item.commit.committer.date).toLocaleString()"
           />
           {{ item.commit.message }}
@@ -28,12 +53,12 @@
 
         <v-card-actions>
           <v-spacer />
-          <v-btn @click="openExternal(item)"
-            ><v-icon class="btn-icon">mdi-github</v-icon>View</v-btn
-          >
-          <v-btn disabled @click="install(item)"
-            ><v-icon class="btn-icon">mdi-download</v-icon>Install</v-btn
-          >
+          <v-btn @click="openExternal(item)" class="background">
+            <v-icon class="btn-icon">mdi-github</v-icon>View
+          </v-btn>
+          <v-btn disabled @click="install(item)">
+            <v-icon class="btn-icon">mdi-download</v-icon>Install
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-list-item>
@@ -48,10 +73,8 @@
   margin: 0.4em;
   font-size: 0.75em;
   transform: translateY(5%);
-  color: #999;
 }
 .date {
-  color: #999;
   transform: translateY(-40%);
 }
 .btn-icon {