dark theme

browser/finder/FinderMain.styl

@@ -20,6 +20,7 @@ $list-width = 250px
   border none
   outline none
   text-align center
+  background-color transparent
 .result
   absolute left right bottom
   top $search-height
@@ -76,3 +77,32 @@ $list-width = 250px
 .result-detail
   absolute top bottom right
   left $nav-width + $list-width
+
+body[data-theme="dark"]
+  .root
+    background-color $ui-dark-backgroundColor
+  .search
+    border-color $ui-dark-borderColor
+  .search-input
+    color $ui-dark-text-color
+
+  .result-nav
+    background-color $ui-dark-backgroundColor
+    label
+      color $ui-dark-text-color
+
+  .result-nav-menu
+    navDarkButtonColor()
+
+  .result-nav-menu--active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+
+  .result-list
+    border-color $ui-dark-borderColor
+
+  .result-detail
+    absolute top bottom right
+    left $nav-width + $list-width

browser/finder/NoteDetail.styl

@@ -31,14 +31,6 @@
   position relative
   flex 1
   border-right $ui-border
-  &:hover
-    .tabList-item-deleteButton
-      color $ui-inactive-text-color
-      &:hover
-        background-color darken($ui-backgroundColor, 15%)
-      &:active
-        color white
-        background-color $ui-active-color
 .tabList-item--active
   @extend .tabList-item
   .tabList-item-button
@@ -47,6 +39,7 @@
   width 100%
   height 29px
   navButtonColor()
+  outline none
   border-left 4px solid transparent
 .tabList-item-deleteButton
   position absolute
@@ -91,3 +84,40 @@
   box-sizing border-box
   height 100%
   width 100%
+
+body[data-theme="dark"]
+  .description
+    border-color $ui-dark-borderColor
+
+  .description-textarea
+    background-color $ui-dark-button--hover-backgroundColor
+    color white
+
+  .tabList
+    background-color $ui-button--active-backgroundColor
+    border-bottom-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+  .tabList-item
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+  .tabList-item--active
+    border-color $ui-dark-borderColor
+    .tabList-item-button
+      border-color $brand-color
+  .tabList-item-button
+    navDarkButtonColor()
+    border-left 4px solid transparent
+  .tabList-plusButton
+    navDarkButtonColor()
+
+  .tabView-top
+    border-color $ui-dark-borderColor
+  .tabView-top-name
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+    background-color $ui-dark-button--hover-backgroundColor
+  .tabView-top-mode
+    border-color $ui-dark-borderColor
+    background-color $dark-default-button-background
+    color $ui-dark-inactive-text-color

browser/finder/NoteItem.styl

@@ -84,3 +84,38 @@
   color $ui-inactive-text-color
   vertical-align middle
 
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-active-color, 20%)
+
+  .root--active
+    @extend .root
+    .border
+      border-color $ui-active-color
+
+  .info
+    color $ui-dark-inactive-text-color
+
+  .info-left-folder
+    color $ui-dark-text-color
+  .info-left-folder-surfix
+    color $ui-dark-inactive-text-color
+
+  .title
+    color $ui-dark-text-color
+  .title-icon
+    color $ui-dark-inactive-text-color
+  .title-empty
+    color $ui-dark-inactive-text-color
+
+  .tagList-icon
+    color $ui-dark-button-color
+
+  .tagList-item
+    border-color $ui-dark-button--focus-borderColor
+    background-color $ui-dark-backgroundColor
+
+  .tagList-empty
+    color $ui-dark-inactive-text-color

browser/finder/StorageSection.styl

@@ -57,3 +57,29 @@
   color $ui-button--active-color
   &:hover
     background-color $ui-button--active-backgroundColor
+
+body[data-theme="dark"]
+  .header-toggleButton
+    navDarkButtonColor()
+  .header-name
+    navDarkButtonColor()
+
+  .header-name--active
+    @extend .header-name
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
+    &:hover
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item
+    navDarkButtonColor()
+    border-width 0 0 0 6px
+    border-style solid
+    border-color transparent
+
+  .folderList-item--active
+    @extend .folderList-item
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
+    &:hover
+      background-color $ui-button--active-backgroundColor

browser/finder/ipcClient.js

@@ -79,6 +79,11 @@ nodeIpc.connectTo(
 
     nodeIpc.of.node.on('config-renew', function (payload) {
       console.log('config', payload)
+      if (payload.ui.theme === 'dark') {
+        document.body.setAttribute('data-theme', 'dark')
+      } else {
+        document.body.setAttribute('data-theme', 'default')
+      }
       store.default.dispatch({
         type: 'SET_CONFIG',
         config: payload