dark theme toggle

src/App.vue

@@ -1,8 +1,8 @@
 <template>
-    <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
+    <v-app class="background">
         <AddModal/>
-        <div v-if="authenticated">
+        <div v-if="authenticated" class="background">
-            <Navbar />
+            <keep-alive><Navbar /></keep-alive>
             <v-content class="mx-4 mb-4">
                 <router-view></router-view>
             </v-content>
@@ -20,12 +20,11 @@
                 </div>
             </v-layout>
         </v-container>
-        <v-spacer></v-spacer>
+        <div class="background">
-        <p
+            <p class="grey--text caption text-center">
-            class="grey--text caption text-sm-center text-md-center text-xs-center"
+                Made by Daan Wijns
-        >
+            </p>
-            Made by Daan Wijns
+        </div>
-        </p>
     </v-app>
 </template>
 

src/components/Login.vue

@@ -35,7 +35,7 @@
                         <v-card-actions class="justify-center">
                             <v-btn
                                 :loading="loading"
-                                flat
+                                text
                                 @click="Login"
                                 class="blue_accent white--text mx-0 mt-3"
                                 >Login</v-btn

src/components/Navbar.vue

@@ -1,7 +1,7 @@
 <template>
     <nav>
         <!--title-->
-        <v-app-bar flat>
+        <v-app-bar flat color="background">
             <v-btn
                 @click="drawer = !drawer"
                 text
@@ -43,7 +43,7 @@
             </v-btn>
         </v-app-bar>
         <!--navigation drawer itself -->
-        <v-navigation-drawer app v-model="drawer" class="primary">
+        <v-navigation-drawer app v-model="drawer" class="primary" style="position:fixed;">
             <!--current download speeds -->
             <v-flex class="mt-3" v-if="stats">
                 <div
@@ -145,12 +145,25 @@
                     </v-layout>
                 </v-card>
             </v-flex>
+            <v-flex style="position:fixed; bottom: 15px; right: 15px;" >
+                <v-list>
+                    <v-list-item @click="toggleTheme" link>
+                        <v-icon v-if="theme === 'Light'" class="pr-2 white--text"
+                            >brightness_7</v-icon
+                        >
+                        <v-icon v-else class="pr-2 white--text">brightness_2</v-icon>
+                        <v-list-item-title class="white--text" style="font-size:15px">{{
+                            theme
+                        }}</v-list-item-title>
+                    </v-list-item>       
+                </v-list>        
+            </v-flex>
         </v-navigation-drawer>
     </nav>
 </template>
 
 <script>
-import { mapMutations, mapState } from 'vuex'
+import { mapMutations, mapState, mapGetters } from 'vuex'
 import { setInterval } from 'timers'
 import VueApexCharts from 'vue-apexcharts'
 import qbit from '@/services/qbit'
@@ -161,10 +174,6 @@ export default {
         return {
             drawer: false,
             paused: false,
-            links: [
-                { icon: 'dashboard', text: 'Dashboard', route: '/' },
-                { icon: 'settings', text: 'Settings', route: '/settings' }
-            ],
             chartOptions: {
                 chart: {
                     sparkline: {
@@ -225,15 +234,24 @@ export default {
         },
         toggleModal(name) {
             this.$store.commit('TOGGLE_MODAL', name)
-        }
+        },
+         toggleTheme() {
+            this.$store.commit('TOGGLE_THEME')
+            this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
+        },
     },
     computed: {
-        ...mapState(['stats', 'selected_torrents'])
+        ...mapState(['stats', 'selected_torrents']),  
+        ...mapGetters(['getTheme']),
+        theme() {
+            return this.getTheme() ? 'Dark' : 'Light'
+        }
     },
     created() {
         this.chartInterval = setInterval(async () => {
             this.updateChart()
         }, 2000)
+        this.$vuetify.theme.dark = this.getTheme()
     },
     beforeDestroy() {
         clearInterval(this.chartInterval)

src/components/Torrent.vue

@@ -1,4 +1,10 @@
 <template>
+<v-card ripple
+                    flat  class="pointer torrent"
+                     :class="
+                        containsTorrent(torrent.hash) ? 'torrent_selected' : ''
+                    "
+                    @click.native="selectTorrent(torrent.hash)">
     <v-layout row wrap :class="`pa-4 ml-0 project ${torrent.state}`">
                         <v-flex xs12 sm2 md3>
                             <div class="caption grey--text">Torrent title</div>
@@ -110,6 +116,8 @@
                             ></v-progress-linear>
                         </v-flex>
                     </v-layout>
+                      <v-divider></v-divider>
+                </v-card>
 </template>
 
 <script>
@@ -117,7 +125,17 @@ export default {
     name:'Torrent',
     props: {
         torrent: Object
-    }
+    },
+    methods: {selectTorrent(hash) {
+           if (this.containsTorrent(hash)) {
+        this.$store.commit('SET_SELECTED', {type:"remove", hash})
+      } else {
+        this.$store.commit('SET_SELECTED', {type:"add", hash})
+      }
+        },
+        containsTorrent(hash) {
+            return this.$store.getters.containsTorrent(hash)
+        },}
 }
 </script>
 

src/plugins/vuetify.js

@@ -14,6 +14,7 @@ export default new Vuetify({
     options: {
       customProperties: true,
     },
+    dark: false,
     themes: {
       light: {
         primary: "#35495e",
@@ -25,7 +26,10 @@ export default new Vuetify({
         green_accent: "#3cd1c2",
         download: "#64CEAA",
         upload: "#00b3fa",
+        torrent: '#fff',
+        torrent_selected: colors.grey.lighten2,
         background: colors.grey.lighten4,
+        search: colors.grey.darken1
       },
       dark: {
         primary: "#35495e",
@@ -37,7 +41,10 @@ export default new Vuetify({
         green_accent: "#3cd1c2",
         download: "#64CEAA",
         upload: "#00b3fa",
-        background: "#0000",
+        torrent: colors.grey.darken3,
+        torrent_selected: colors.grey,
+        background: colors.grey.darken4,
+        search: colors.grey.darken3
       },
     },
   },

src/store/index.js

@@ -65,19 +65,8 @@ export default new Vuex.Store({
         RESET_SELECTED: state => {
             state.selected_torrents = []
         },
-        PAUSE_TORRENTS: async state => {
+        TOGGLE_THEME(state) {
-            if (state.selected_torrents.length === 0) {
+            state.darkTheme = !state.darkTheme
-                qbit.pause_all()
-            } else {
-                qbit.pause_torrents(state.selected_torrents)
-            }
-        },
-        RESUME_TORRENTS: async state => {
-            if (state.selected_torrents.length === 0) {
-                await qbit.resume_all()
-            } else {
-                await qbit.resume_torrents(state.selected_torrents)
-            }
         },
         ADD_TORRENT: async (state, payload) => {
             const res = await qbit.add_torrent(payload)
@@ -102,11 +91,12 @@ export default new Vuex.Store({
         },
         LOGIN: async (state, payload) => {
             const res = await qbit.login(payload)
+            console.log(res)
             if (res === 'Ok.') {
-                state.loading = false
                 Vue.$toast.success('Successfully logged in!')
                 state.authenticated = true
             }
+            state.loading = false
         },
         updateMainData: async state => {
             const rid = state.rid ? state.rid : undefined

src/views/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
-    <div style="height: 89vh" class="dashboard" @click.self="resetSelected">
+    <div style="height: 89vh" color="background" @click.self="resetSelected">
         <h1 style="font-size: 1.1em !important" class="subtitle-1 grey--text">Dashboard</h1>
-        <v-container  class="my-4" @click.self="resetSelected">
+        <v-container color="background" class="my-4" @click.self="resetSelected">
             <!-- justify-center here in layout to center!! -->
             <v-flex xs12 sm6 md3 @click.self="resetSelected">
                 <v-text-field
@@ -11,7 +11,7 @@
                     clearable
                     solo
                     hint="eg `size desc` + enter"
-                    background-color="grey lighten-3"
+                    color="search"
                     v-model="sort_input"
                     @keyup.enter.native="sortBy"
                 ></v-text-field>
@@ -20,20 +20,14 @@
                 <p class="grey--text">No active Torrents!</p>
             </div>
             <div v-else>
-                <v-card
+                <div
-                    ripple
+
-                    flat
                     v-for="torrent in torrents"
                     :key="torrent.name"
-                    class="pointer"
-                    :class="
-                        containsTorrent(torrent.hash) ? 'grey lighten-3' : ''
-                    "
-                    @click.native="selectTorrent(torrent.hash)"
                 >
                     <Torrent :torrent="torrent"/>
-                    <v-divider></v-divider>
+            
-                </v-card>
+                </div>
             </div>
         </v-container>
     </div>
@@ -144,16 +138,6 @@ export default {
 
             this.$store.state.sort_options = { name, reverse }
         },
-        selectTorrent(hash) {
-           if (this.containsTorrent(hash)) {
-        this.$store.commit('SET_SELECTED', {type:"remove", hash})
-      } else {
-        this.$store.commit('SET_SELECTED', {type:"add", hash})
-      }
-        },
-        containsTorrent(hash) {
-            return this.$store.getters.containsTorrent(hash)
-        },
         resetSelected() {
             this.$store.commit('RESET_SELECTED')
         }