Change the font color at dark theme

browser/components/NoteItem.styl

@@ -135,18 +135,14 @@ body[data-theme="dark"]
     .item-wrapper
       border-color transparent
     .item-title
-      color white
+      color $ui-dark-text-color
     .item-title-icon
-      color white
+      color $ui-dark-text-color
     .item-bottom-time
-      color white
+      color $ui-dark-text-color
     .item-bottom-tagList-item
       background-color transparent
-      color white
+      color $ui-dark-text-color
-    .item-bottom-tagList-empty
-      color white
-    &:hover
-      background-color $ui-dark-button--active-backgroundColor
 
   .item-title
     color $ui-inactive-text-color

browser/components/SideNavFilter.styl

@@ -55,14 +55,15 @@
 
 body[data-theme="dark"]
   .menu-button
-    navDarkButtonColor()
     &:active
       background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-button--active-color
+      color $ui-dark-text-color
   .menu-button--active
-    color $ui-dark-button--active-color
+    color $ui-dark-text-color
     background-color $ui-dark-button--active-backgroundColor
     &:active
       background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color

browser/components/SnippetTab.styl

@@ -60,7 +60,7 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .root--active
@@ -73,7 +73,7 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .button
@@ -83,9 +83,9 @@ body[data-theme="dark"]
     transition color background-color 0.15s
     border-left 4px solid transparent
     &:hover
-      color white
+      color $ui-dark-text-color
       background-color $ui-dark-button--hover-backgroundColor
 
   .input
     background-color $ui-dark-button--hover-backgroundColor
-    color white
+    color $ui-dark-text-color

browser/components/StorageItem.styl

@@ -75,17 +75,17 @@ body[data-theme="dark"]
   .folderList-item
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-button--active-color
+      color $ui-dark-text-color
     &:active
-      color $ui-button--active-color
+      color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor
 
   .folderList-item--active
     @extend .folderList-item
-    color $ui-button--active-color
+    color $ui-dark-text-color
     background-color $ui-dark-button--active-backgroundColor
     &:active
       background-color $ui-dark-button--active-backgroundColor
     &:hover
-      color $ui-button--active-color
+      color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor

browser/main/Detail/SnippetNoteDetail.styl

@@ -84,7 +84,7 @@ body[data-theme="dark"]
 
   .body .description textarea
     background-color $ui-dark-noteDetail-backgroundColor
-    color white
+    color $ui-dark-text-color
 
   .tabList
     background-color $ui-button--active-backgroundColor

browser/main/SideNav/SideNav.styl

@@ -117,10 +117,9 @@ body[data-theme="dark"]
   .top-menu
     navDarkButtonColor()
     &:active
-      background-color $ui-dark-button--active-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-button--active-color
 
   .storageList-empty
     color $ui-dark-inactive-text-color

browser/main/SideNav/StorageItem.styl

@@ -53,7 +53,7 @@
   padding-right 10px
   line-height 26px
   cursor pointer
-  font-size 14px
+  font-size 13px
   border none
   overflow ellipsis
   text-align left
@@ -109,21 +109,36 @@
     margin 0 5px
 
 body[data-theme="dark"]
-  .header
+.header
+  &:hover
+    color $ui-dark-text-color
+    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+  &:active
+    .header-toggleButton
+    .header-addFolderButton
+      &:active
+        color $ui-dark-text-color
+
+.header-info
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      color $ui-button--active-color
+      color $ui-dark-text-color
     &:active
-      color $ui-button--active-color
+      .header-toggleButton
-      background-color $ui-dark-button--active-backgroundColor
+      .header-addFolderButton
+        &:active
+          color $ui-dark-text-color
 
-  .header--active
+.header--active
-    @extend .header
+  @extend .header
-    .header-info
+  .header-info
-      color $ui-button--active-color
+    color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
+    background-color $ui-dark-button--active-backgroundColor
+  .header-toggleButton
+  .header-addFolderButton
+    color $ui-dark-text-color
     &:active
-      background-color $ui-dark-button--active-backgroundColor
+      .header-toggleButton
-    &:hover
+      .header-addFolderButton
-      color $ui-button--active-color
+        &:active
-      background-color $ui-dark-button--active-backgroundColor
+          color $ui-dark-text-color

browser/styles/index.styl

@@ -217,12 +217,11 @@ navDarkButtonColor()
   background-color transparent
   transition color background-color 0.15s
   &:hover
-    color white
+    color $ui-dark-text-color
     background-color $ui-dark-button--hover-backgroundColor
   &:active
   &:active:hover
-    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-text-color
-    color $ui-dark-button--active-color
 
 topBarButtonDark()
   border-color $ui-dark-borderColor