dark theme

browser/main/modals/PreferencesModal/ConfigTab.js

@@ -230,7 +230,6 @@ class ConfigTab extends React.Component {
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}
                 ref='uiTheme'
-                disabled
               >
                 <option value='default'>Light</option>
                 <option value='dark'>Dark</option>

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -24,6 +24,7 @@
   width 150px
   text-align right
   margin-right 10px
+  font-size 14px
 .group-section-control
   flex 1
 .group-section-control-input
@@ -85,4 +86,28 @@
   p
     line-height 1.2
 
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
 
+  .group-header
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+
+  .group-header2
+    color $ui-dark-text-color
+
+  .group-section-control-input
+    border-color $ui-dark-borderColor
+
+  .group-control
+    border-color $ui-dark-borderColor
+  .group-control-leftButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+  .group-control-rightButton
+    colorDarkPrimaryButton()
+  .group-hint
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+    color $ui-dark-text-color

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -33,3 +33,13 @@
   padding-left 2em
   li
     white-space normal
+
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
+
+  .madeBy
+    color $ui-dark-inactive-text-color
+
+  .copyright
+    color $ui-dark-inactive-text-color

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -35,3 +35,17 @@
   absolute left right bottom
   top 50px
   overflow-y auto
+
+body[data-theme="dark"]
+  .root
+    modalDark()
+
+  .nav
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-dark-borderColor
+
+  .nav-button
+    background-color transparent
+    color #939395
+    &:hover
+      color $ui-dark-text-color

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -130,3 +130,50 @@
   @extend .folderList-item-right-button
   border none
   colorDangerButton()
+
+body[data-theme="dark"]
+  .header
+    border-color $ui-dark-borderColor
+
+  .header-label-path
+    color $ui-dark-inactive-text-color
+  .header-label-editButton
+    color $ui-dark-text-color
+
+  .header-control-button
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+
+  .header-control-button-tooltip
+    tooltip()
+    position absolute
+    opacity 0
+    padding 5px
+    top 25px
+    z-index 10
+    white-space nowrap
+
+  .folderList-item
+    &:hover
+      background-color lighten($ui-dark-button--hover-backgroundColor, 5%)
+
+  .folderList-item-left-danger
+    color $danger-color
+    font-weight bold
+
+  .folderList-item-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderList-item-left-colorButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+
+  .folderList-item-right-button
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+
+  .folderList-item-right-confirmButton
+    colorDarkPrimaryButton()
+
+  .folderList-item-right-dangerButton
+    colorDarkDangerButton()

browser/main/modals/PreferencesModal/StoragesTab.styl

@@ -113,3 +113,42 @@
   border-radius 2px
   height 30px
   padding 0 15px
+
+body[data-theme="dark"]
+  .root
+    padding 15px
+    color $ui-dark-text-color
+
+  .folderList-item
+    border-bottom $ui-dark-border
+
+  .folderList-empty
+    color $ui-dark-inactive-text-color
+
+  .list-empty
+    color $ui-dark-inactive-text-color
+  .list-control-addStorageButton
+    border-color $ui-dark-borderColor
+    colorDarkDefaultButton()
+    border-radius 2px
+
+  .addStorage-header
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+
+  .addStorage-body-section-name-input
+    border-color $ui-dark-borderColor
+
+  .addStorage-body-section-type-description
+    color $ui-dark-inactive-text-color
+
+  .addStorage-body-section-path-button
+    colorPrimaryButton()
+  .addStorage-body-control
+    border-color $ui-dark-borderColor
+
+  .addStorage-body-control-createButton
+    colorDarkPrimaryButton()
+  .addStorage-body-control-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor