Adding theme changer in profile

Elite-Kode · May 13, 2021 · 80fc08a · 80fc08a
1 parent a5d1895
commit 80fc08a
Showing 1 changed file with 37 additions and 9 deletions.
diff --git a/frontend/src/components/profile/ProfileData.vue b/frontend/src/components/profile/ProfileData.vue
@@ -56,20 +56,42 @@
       </v-row>
     </v-form>
     <h2>Themes</h2>
-    <v-row>
+    <v-row class="mt-6">
       <v-col cols="12" xs="12" sm="4">
-        <v-img
-          :src="require('@/assets/elitebgs-dark-light.png')"
-          alt="Elite BGS System Theme"
-          contain
-          max-height="256px"
-        />
+        <div class="d-flex flex-column align-center">
+          <v-img
+            :src="require('@/assets/elitebgs-dark-light.png')"
+            alt="Elite BGS System Theme"
+            contain
+            max-height="256px"
+            class="mb-3"
+          />
+          <v-btn outlined color="primary" @click="selectTheme(0)">System Theme</v-btn>
+        </div>
       </v-col>
       <v-col cols="12" xs="12" sm="4">
-        <v-img :src="require('@/assets/elitebgs-light.png')" alt="Elite BGS Light Theme" contain max-height="256px" />
+        <div class="d-flex flex-column align-center">
+          <v-img
+            :src="require('@/assets/elitebgs-light.png')"
+            alt="Elite BGS Light Theme"
+            contain
+            max-height="256px"
+            class="mb-3"
+          />
+          <v-btn color="primary" @click="selectTheme(1)">Light Theme</v-btn>
+        </div>
       </v-col>
       <v-col cols="12" xs="12" sm="4">
-        <v-img :src="require('@/assets/elitebgs-dark.png')" alt="Elite BGS Dark Theme" contain max-height="256px" />
+        <div class="d-flex flex-column align-center">
+          <v-img
+            :src="require('@/assets/elitebgs-dark.png')"
+            alt="Elite BGS Dark Theme"
+            contain
+            max-height="256px"
+            class="mb-3"
+          />
+          <v-btn color="primary" @click="selectTheme(2)">Dark Theme</v-btn>
+        </div>
       </v-col>
     </v-row>
     <v-row>
@@ -107,6 +129,12 @@ export default {
     },
     deleteSystem(id) {
       this.$store.dispatch('deleteUserSystem', id)
+    },
+    selectTheme(themeIndex) {
+      if (themeIndex === 0) {
+
+      }
+      console.log(themeIndex)
     }
   }
 }