Change default color and add white theme

browser/components/NavToggleButton.styl

@@ -10,6 +10,9 @@
   line-height 32px
   padding 0
 
+body[data-theme="white"]
+  navWhiteButtonColor()
+
 body[data-theme="dark"]
   .navToggle
     &:hover

browser/components/SideNavFilter.styl

@@ -9,6 +9,13 @@
   width 100%
   text-align left
   overflow ellipsis
+  &:hover
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
 
 .counters
   float right
@@ -17,53 +24,17 @@
 .menu-button--active
   @extend .menu-button
   color #e74c3c
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #e74c3c
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #e74c3c
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()
 
 .menu-button-star--active
   @extend .menu-button
   color #F9BF3B
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #F9BF3B
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()
 
 .menu-button-trash--active
   @extend .menu-button
   color #5D9E36
-  background-color $ui-button--active-backgroundColor
-  .menu-button-label
-    color $ui-text-color
-  &:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #5D9E36
-    .menu-button-label
-      color $ui-text-color
-  &:active, &:active:hover
-    background-color alpha($ui-button--active-backgroundColor, 50%)
-    color #5D9E36
-    .menu-button-label
-      color $ui-text-color
+  SideNavFilter()
 
 .menu-button-label
   margin-left 5px
@@ -94,6 +65,64 @@
     opacity 0
     font-size 13px
 
+body[data-theme="white"]
+  .menu-button
+    navWhiteButtonColor()
+
+  .counters
+    color $ui-inactive-text-color
+
+  .menu-button--active
+    @extend .menu-button
+    color #e74c3c
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-star--active
+    @extend .menu-button
+    color #F9BF3B
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-trash--active
+    @extend .menu-button
+    color #5D9E36
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+
 body[data-theme="dark"]
   .menu-button
     &:active

browser/components/StorageItem.styl

@@ -17,20 +17,20 @@
   &:first-child
     margin-top 0
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active
-    color $ui-text-color
-    background-color $ui-button--active-backgroundColor
+    color $$ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
 
 .folderList-item--active
   @extend .folderList-item
-  color $ui-text-color
-  background-color $ui-button--active-backgroundColor
+  color $ui-button-default-color
+  background-color $ui-button-default--active-backgroundColor
   &:hover
-    color $ui-text-color
-    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 50%)
 
 .folderList-item-name
   display block
@@ -71,6 +71,24 @@
   @extend .folderList-item-name
   padding-left 12px
 
+body[data-theme="white"]
+  .folderList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      transition background-color 0.15s
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 50%)
 
 body[data-theme="dark"]
   .folderList-item