✏️ Change default color

.env.staging-dev

@@ -0,0 +1,5 @@
+VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=986632811207348294&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Foauth2%2Fcallback&response_type=code&scope=identify"
+VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
+VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
+
+VITE_APP_TITLE="Claptrap DEV NEXT"

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "vue.volar",
-    "arcanis.vscode-zipfs",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode"
   ]

src/components/Header/HeaderComponent.vue

@@ -1,12 +1,16 @@
 <template>
   <v-app-bar class="bg-brown-darken-4">
-    <v-app-bar-title class="text-yellow font-weight-black text-h4">
+    <v-app-bar-title class="text-primary font-weight-black text-h4">
       <div class="d-flex align-center">
         <router-link to="/">
           <v-avatar><v-img src="/icon.png"></v-img></v-avatar>
         </router-link>
         <span class="ml-3 d-none d-sm-inline">
-          <router-link to="/" class="text-yellow" style="text-decoration: none">
+          <router-link
+            to="/"
+            class="text-primary"
+            style="text-decoration: none"
+          >
             Claptrap Bot
           </router-link>
         </span>

src/components/Header/ServerListComponent.vue

@@ -6,7 +6,7 @@
           v-for="guild of guilds"
           :key="guild.id"
           :value="guild.id"
-          active-color="yellow"
+          active-color="primary"
           :to="getToUrl(guild)"
           :disabled="shouldBeDisabled(guild)"
         >

src/components/guild/Settings/SettingListComponent.vue

@@ -9,7 +9,7 @@
     >
       <v-progress-circular
         indeterminate
-        color="yellow"
+        color="primary"
         size="200"
         width="15"
       ></v-progress-circular>

src/components/guild/Settings/fields/BoolFieldComponent.vue

@@ -5,7 +5,7 @@
         <v-switch
           :id="fieldDescription.id"
           :label="fieldDescription.name"
-          color="yellow"
+          color="primary"
           :messages="fieldDescription.description"
           density="compact"
           hide-details="auto"

src/components/guild/Settings/fields/SelectFieldComponent.vue

@@ -4,7 +4,7 @@
       <v-autocomplete
         :id="fieldDescription.id"
         :label="fieldDescription.name"
-        color="yellow"
+        color="primary"
         :messages="fieldDescription.description"
         density="compact"
         hide-details="auto"

src/components/guild/Settings/fields/TextFieldComponent.vue

@@ -4,7 +4,7 @@
       <v-text-field
         :id="fieldDescription.id"
         :label="fieldDescription.name"
-        color="yellow"
+        color="primary"
         :messages="fieldDescription.description"
         density="compact"
         hide-details="auto"

src/components/guild/home/SettingPreviewComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card title="Guild Settings" :disabled="!properties.guild?.canManage">
     <template v-slot:prepend>
-      <v-icon color="yellow" size="x-large">mdi-cog</v-icon>
+      <v-icon color="primary" size="x-large">mdi-cog</v-icon>
     </template>
     <v-card-text class="d-flex justify-center">
       <v-btn

src/components/guild/home/StatsPreviewComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card title="Stats" disabled>
     <template v-slot:prepend>
-      <v-icon color="yellow" size="x-large">mdi-crown</v-icon>
+      <v-icon color="primary" size="x-large">mdi-crown</v-icon>
     </template>
   </v-card>
 </template>

src/plugins/vuetify.ts

@@ -5,8 +5,18 @@ import "vuetify/styles";
 // Vuetify
 import { createVuetify } from "vuetify";
 
+const darkTheme = {
+  dark: true,
+  colors: {
+    primary: "#FFC107",
+  },
+};
+
 export default createVuetify({
   theme: {
-    defaultTheme: "dark",
+    defaultTheme: "darkTheme",
+    themes: {
+      darkTheme,
+    },
   },
 });

src/views/oauth/OauthCallbackView.vue

@@ -4,7 +4,7 @@
       <v-progress-circular
         size="200"
         width="17"
-        color="yellow"
+        color="primary"
         indeterminate
       ></v-progress-circular>
     </v-col>

src/views/oauth/OauthRedirectView.vue

@@ -4,7 +4,7 @@
       <v-progress-circular
         size="200"
         width="17"
-        color="yellow"
+        color="primary"
         indeterminate
       ></v-progress-circular>
     </v-col>