diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index c2ed3319..9022f898 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -159,8 +159,14 @@
     transition: none !important;
   }
 	.theme--light .tree-node-title:hover {
-		background: rgba(0,0,0,.04);
+		background-color: rgba(0,0,0,.04);
 	}
+  .theme--dark .tree-node-title:hover {
+		background-color: rgba(255,255,255,.04);
+	}
+  .tree-node-title{
+    transition: background ease 0.3s, color ease 0.15s;
+  }
   .tree-node-title, .dummy-node {
     height: 40px;
   }
diff --git a/app/imports/ui/layouts/AppLayout.vue b/app/imports/ui/layouts/AppLayout.vue
index 79d356c5..3098a9bf 100644
--- a/app/imports/ui/layouts/AppLayout.vue
+++ b/app/imports/ui/layouts/AppLayout.vue
@@ -1,8 +1,5 @@
 <template>
-  <v-app
-    :dark="darkMode"
-    :light="!darkMode"
-  >
+  <v-app>
     <v-navigation-drawer
       v-model="drawer"
       app
@@ -106,7 +103,9 @@
 			darkMode: {
 				immediate: true,
 				handler(newDarkModeValue){
-          this.$vuetify.theme.dark = newDarkModeValue;
+          if (typeof newDarkModeValue === 'boolean'){
+            this.$vuetify.theme.dark = newDarkModeValue;
+          }
 				},
 			},
       '$route' (to) {
diff --git a/app/imports/ui/vueSetup.js b/app/imports/ui/vueSetup.js
index be4a5657..7d620e1c 100644
--- a/app/imports/ui/vueSetup.js
+++ b/app/imports/ui/vueSetup.js
@@ -47,8 +47,8 @@ Meteor.startup(() => {
     store,
     vuetify: new Vuetify({
       theme: {
-        dark: false,
         themes,
+        options: { variations: false },
         //options: { customProperties: true },
       },
       icons: {