dark theme

browser/main/Detail/Detail.styl

@@ -15,3 +15,10 @@
   line-height 72px
   text-align center
   color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+  .empty-message
+    color $ui-dark-inactive-text-color

browser/main/Detail/FolderSelect.styl

@@ -57,10 +57,11 @@
 
 .search-optionList
   position fixed
-  border $ui-border
   z-index 200
   background-color white
   border-radius 2px
+  box-shadow 2px 2px 10px gray
+
 
 .search-optionList-item
   height 34px
@@ -86,3 +87,45 @@
   font-size 10px
   color $ui-inactive-text-color
   margin-left 5px
+
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
+    &:hover
+      color white
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-dark-borderColor
+
+  .root--search, .root--focus
+    @extend .root
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-input--focus-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-input--focus-borderColor
+
+  .idle-label-name-surfix
+    color $ui-dark-inactive-text-color
+
+  .search-input
+    color white
+    background-color transparent
+    border-color $ui-dark-borderColor
+
+  .search-optionList
+    color white
+    background-color $ui-dark-button--hover-backgroundColor
+    box-shadow 2px 2px 10px black
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-dark-inactive-text-color

browser/main/Detail/MarkdownNoteDetail.styl

@@ -29,7 +29,6 @@ $info-height = 75px
   padding 0 25px
   border-radius 2px
   border none
-  color $ui-text-color
   colorDangerButton()
 
 .info-delete-cancelButton
@@ -88,6 +87,7 @@ $info-height = 75px
   top 45px
   padding 5px
   opacity 0
+  border-radius 2px
 
 .body
   absolute bottom left right
@@ -95,3 +95,36 @@ $info-height = 75px
 
 .body-noteEditor
   absolute top bottom left right
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+
+  .info
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right-button
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:hover .info-right-button-tooltip
+      opacity 1
+    &:focus
+      border-color $ui-button--focus-borderColor
+
+  .info-right-button-tooltip
+    darkTooltip()

browser/main/Detail/SnippetNoteDetail.styl

@@ -174,3 +174,95 @@ $info-height = 75px
 .tabView-content
   absolute left right bottom
   top 30px
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+
+  .info
+    border-bottom-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right-button
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:hover .info-right-button-tooltip
+      opacity 1
+    &:focus
+      border-color $ui-button--focus-borderColor
+
+  .info-right-button-tooltip
+    darkTooltip()
+
+  .body-description
+    border-bottom-color $ui-dark-borderColor
+
+  .body-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-deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color white
+          background-color $ui-dark-button--active-backgroundColor
+  .tabList-item--active
+    border-color $ui-dark-borderColor
+    .tabList-item-button
+      border-color $brand-color
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      .tabList-item-deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color white
+          background-color $ui-dark-button--active-backgroundColor
+  .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
+    &:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--hover-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:active:hover
+      background-color $ui-dark-button--active-backgroundColor

browser/main/Detail/StarButton.styl

@@ -7,10 +7,11 @@
     .tooltip
       opacity 1
 
-
 .root--active
   @extend .root
-  color $ui-active-color
+  color $brand-color
+  &:hover
+    color $brand-color !important
   .icon
     transform rotate(-72deg)
 .icon
@@ -23,3 +24,4 @@
   right 65px
   padding 5px
   opacity 0
+  border-radius 2px

browser/main/Detail/TagSelect.styl

@@ -61,3 +61,27 @@
     border-color $ui-input--focus-borderColor = #369DCD
   &:disabled
     background-color $ui-input--disabled-backgroundColor = #DDD
+
+body[data-theme="dark"]
+  .icon
+    color $ui-dark-button-color
+
+  .tag
+    background-color $ui-dark-button--hover-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+    color $ui-button-color
+
+  .tag-label
+    color $ui-dark-text-color
+
+  .newTag
+    border-color $ui-dark-borderColor
+    background-color transparent
+    color $ui-dark-text-color
+    &:focus
+      border-color $ui-input--focus-borderColor = #369DCD
+    &:disabled
+      background-color $ui-input--disabled-backgroundColor = #DDD

browser/main/Main.js

@@ -27,7 +27,13 @@ class Main extends React.Component {
   }
 
   componentDidMount () {
-    let { dispatch } = this.props
+    let { dispatch, config } = this.props
+
+    if (config.ui.theme === 'dark') {
+      document.body.setAttribute('data-theme', 'dark')
+    } else {
+      document.body.setAttribute('data-theme', 'default')
+    }
 
     // Reload all data
     dataApi.init()

browser/main/Main.styl

@@ -28,3 +28,15 @@
   left -3px
   z-index 10
   cursor col-resize
+
+
+body[data-theme="dark"]
+  .root
+    absolute top left bottom right
+
+  .slider
+    background-color $ui-dark-borderColor
+    border-color $ui-dark-borderColor
+
+  .slider--active
+    background-color $ui-button--active-backgroundColor

browser/main/NoteList/NoteList.styl

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

browser/main/SideNav/SideNav.styl

@@ -122,3 +122,32 @@
     pointer-events none
     opacity 0
     font-size 12px
+
+body[data-theme="dark"]
+  .root, .root--folded
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+    color $ui-dark-text-color
+
+  .top
+    border-color $ui-dark-borderColor
+
+  .top-menu
+    navDarkButtonColor()
+
+  .menu-button
+    navDarkButtonColor()
+
+  .menu-button--active
+    @extend .menu-button
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+
+  .storageList-empty
+    color $ui-dark-inactive-text-color
+
+  .navToggle
+    navDarkButtonColor()
+

browser/main/StatusBar/StatusBar.styl

@@ -35,3 +35,18 @@
 
 .update-icon
   color $brand-color
+
+body[data-theme="dark"]
+  .root
+    background-color $ui-dark-backgroundColor
+
+  .pathname
+    color $ui-dark-inactive-text-color
+
+  .zoom
+    border-color $ui-dark-borderColor
+
+  .update
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    border-left 1px solid $ui-dark-borderColor

browser/main/StatusBar/index.js

@@ -74,7 +74,7 @@ class StatusBar extends React.Component {
         <div styleName='pathname'>{location.pathname + location.search}</div>
         {this.state.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download'/> Update is ready!
+            <i styleName='update-icon' className='fa fa-cloud-download'/> Ready to Update!
           </button>
           : null
         }

browser/main/TopBar/TopBar.styl

@@ -102,3 +102,65 @@ $control-height = 34px
   line-height normal
   opacity 0
   transition 0.1s
+
+body[data-theme="dark"]
+  .root, .root--expanded
+    background-color $ui-dark-backgroundColor
+
+  .control
+    border-color $ui-dark-borderColor
+  .control-search
+    background-color $dark-background-color
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-dark-inactive-text-color
+
+  .control-search-input
+    input
+      background-color $dark-background-color
+      color $ui-dark-text-color
+  .control-search-optionList
+    color white
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-dark-borderColor
+    box-shadow 2px 2px 10px black
+
+  .control-search-optionList-item
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+  .control-search-optionList-item-folder
+    color $ui-dark-text-color
+  .control-search-optionList-item-folder-surfix
+    font-size 10px
+    margin-left 5px
+    color $ui-inactive-text-color
+  .control-search-optionList-item-type
+    font-size 12px
+    color $ui-inactive-text-color
+    padding-right 3px
+  .control-search-optionList-empty
+    height 150px
+    color $ui-inactive-text-color
+    line-height 150px
+    text-align center
+  .control-newPostButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--active-backgroundColor
+
+  .control-newPostButton-tooltip
+    darkTooltip()
+    position fixed
+    pointer-events none
+    top 45px
+    left 385px
+    z-index 10
+    padding 5px
+    line-height normal
+    opacity 0
+    transition 0.1s

browser/main/global.styl

@@ -83,3 +83,7 @@ modalBackColor = transparentify(white, 65%)
     absolute top left bottom right
     background-color modalBackColor
     z-index modalZIndex + 1
+body[data-theme="dark"]
+  .ModalBase
+    .modalBack
+      background-color alpha(black, 60%)

browser/main/lib/ConfigManager.js

@@ -67,6 +67,12 @@ function set (updates) {
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
+  if (newConfig.ui.theme === 'dark') {
+    document.body.setAttribute('data-theme', 'dark')
+  } else {
+    document.body.setAttribute('data-theme', 'default')
+  }
+
   remote.getCurrentWindow().webContents.send('config-renew', {
     config: get(),
     silent: false

browser/main/lib/ipc.js

@@ -114,6 +114,7 @@ nodeIpc.serve(
 
     nodeIpc.server.on('connect', function (socket) {
       console.log('connected')
+      nodeIpc.server.broadcast('config-renew', ConfigManager.get())
       socket.on('close', function () {
         console.log('socket dead')
       })

browser/main/modals/NewNoteModal.styl

@@ -54,3 +54,28 @@
   color $ui-inactive-text-color
   text-align center
   margin-bottom 25px
+
+body[data-theme="dark"]
+  .root
+    modalDark()
+
+  .header
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .closeButton
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+    colorDarkDefaultButton()
+
+  .control-button
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+    background-color transparent
+    &:focus
+      colorPrimaryButton()
+
+  .description
+    color $ui-inactive-text-color
+

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