Merge pull request #37 from VishalZ123/master

Add Dark Theme and Toggle button
devlup-labs · Mar 7, 2021 · 6cbbecb · 6cbbecb
2 parents a70f3b3 + 102cb54
commit 6cbbecb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/common/headers/Header.vue b/src/components/common/headers/Header.vue
@@ -25,6 +25,11 @@
         v-icon(:left="$vuetify.breakpoint.mdAndUp") mdi-clipboard-account
         span(v-if="$vuetify.breakpoint.mdAndUp") People
     v-spacer
+    v-toolbar-items
+      v-btn
+        v-icon(:left="$vuetify.breakpoint.mdAndUp" v-if="$vuetify.theme.dark") mdi-moon-waxing-crescent
+        v-icon(:left="$vuetify.breakpoint.mdAndUp" v-else) mdi-brightness-7
+        v-switch(v-model="$vuetify.theme.dark" class="mt-5")
 </template>
 
 <script>

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -23,6 +23,15 @@ export default new Vuetify({
         info: "#2196F3",
         success: "#4CAF50",
         warning: "#FFC107"
+      },
+      dark: {
+        primary: "#404040",
+        secondary: "#424242",
+        accent: "#82B1FF",
+        error: "#CF6679",
+        info: "#2196F3",
+        success: "#4CAF50",
+        warning: "#FFC107"
       }
     }
   }