dark theme

browser/components/MarkdownEditor.js

@@ -147,6 +147,7 @@ class MarkdownEditor extends React.Component {
             : 'preview--hide'
           }
           style={previewStyle}
+          theme={config.ui.theme}
           fontSize={config.preview.fontSize}
           fontFamily={config.preview.fontFamily}
           codeBlockTheme={config.preview.codeBlockTheme}

browser/components/MarkdownPreview.js

@@ -88,7 +88,8 @@ export default class MarkdownPreview extends React.Component {
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
       prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
-      prevProps.lineNumber !== this.props.lineNumber
+      prevProps.lineNumber !== this.props.lineNumber ||
+      prevProps.theme !== this.props.theme
     ) this.rewriteIframe()
   }
 
@@ -100,7 +101,7 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.checkboxClickHandler)
     })
 
-    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
+    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
       ? [fontFamily].concat(defaultFontFamily)
       : defaultFontFamily
@@ -137,6 +138,8 @@ export default class MarkdownPreview extends React.Component {
       <link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
       <link rel="stylesheet" href="../resources/katex.min.css">
     `
+
+    this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
     this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
 
     Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {

browser/components/markdown.styl

@@ -244,3 +244,48 @@ table
       border-color borderColor
       &:last-child
         border-right solid 1px borderColor
+
+themeDarkBackground = darken(#21252B, 10%)
+themeDarkText = #DDDDDD
+themeDarkBorder = lighten(themeDarkBackground, 20%)
+themeDarkPreview = #282C34
+themeDarkTableOdd = themeDarkPreview
+themeDarkTableEven = darken(themeDarkPreview, 10%)
+themeDarkTableHead = themeDarkTableEven
+themeDarkTableBorder = themeDarkBorder
+themeDarkModalButtonDefault = themeDarkPreview
+themeDarkModalButtonDanger = #BF360C
+body[data-theme="dark"]
+  color themeDarkText
+  border-color themeDarkBorder
+  background-color themeDarkPreview
+  a:hover
+    background-color alpha(lighten(brandColor, 30%), 0.2) !important
+
+  code
+    border-color darken(themeDarkBorder, 10%)
+    background-color lighten(themeDarkPreview, 5%)
+
+  pre
+    code
+      background-color transparent
+
+  label.taskListItem
+    background-color themeDarkPreview
+  table
+    thead
+      tr
+        background-color themeDarkTableHead
+      th
+        border-color themeDarkTableBorder
+        &:last-child
+          border-right solid 1px themeDarkTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeDarkTableOdd
+      tr:nth-child(2n)
+        background-color themeDarkTableEven
+      td
+        border-color themeDarkTableBorder
+        &:last-child
+          border-right solid 1px themeDarkTableBorder

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

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

browser/styles/index.styl

@@ -1,3 +1,4 @@
+// Default theme
 $brand-color = #6AA5E9
 
 $danger-color = #c9302c
@@ -137,3 +138,77 @@ modal()
   overflow hidden
   border-radius $modal-border-radius
   box-shadow 2px 2px 10px gray
+
+// Dark theme
+$ui-dark-borderColor = lighten(#21252B, 20%)
+$ui-dark-backgroundColor = darken(#21252B, 10%)
+$dark-background-color = lighten($ui-dark-backgroundColor, 10%)
+$ui-dark-text-color = #DDDDDD
+$ui-dark-button--active-color = white
+$ui-dark-button--active-backgroundColor = #6AA5E9
+$ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
+$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
+
+$dark-default-button-background = $ui-dark-backgroundColor
+$dark-default-button-background--hover = $ui-dark-button--hover-backgroundColor
+$dark-default-button-background--active = $ui-dark-button--active-backgroundColo
+colorDarkDefaultButton()
+  border-color $ui-dark-borderColor
+  color $ui-dark-text-color
+  background-color $dark-default-button-background
+  &:hover
+    background-color $dark-default-button-background--hover
+  &:active
+    background-color $ui-dark-button--active-backgroundColor
+  &:active:hover
+    background-color $ui-dark-button--active-backgroundColor
+
+$dark-danger-button-background = #c9302c
+$dark-danger-button-background--hover = darken(#c9302c, 5%)
+$dark-danger-button-background--active = darken(#c9302c, 10%)
+colorDarkDangerButton()
+  color white
+  background-color $dark-danger-button-background
+  &:hover
+    background-color $dark-danger-button-background--hover
+  &:active
+    background-color $dark-danger-button-background--active
+  &:active:hover
+    background-color $dark-danger-button-background--active
+
+navDarkButtonColor()
+  border none
+  color $ui-dark-button-color
+  background-color transparent
+  transition color background-color  0.15s
+  &:hover
+    color white
+    background-color $ui-dark-button--hover-backgroundColor
+  &:active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+  &:active, &:active:hover
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+
+$ui-dark-tooltip-text-color = white
+$ui-dark-tooltip-backgroundColor = alpha(#444, 70%)
+$ui-dark-tooltip-button-backgroundColor = #D1D1D1
+$ui-dark-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
+$ui-tooltip-font-size = 12px
+
+darkTooltip()
+  background-color $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)
+  color $ui-dark-tooltip-text-color = white
+  font-size $ui-dark-tooltip-font-size
+  pointer-events none
+  transition 0.1s
+
+modalDark()
+  position relative
+  z-index $modal-z-index
+  width 100%
+  background-color $ui-dark-backgroundColor
+  overflow hidden
+  border-radius $modal-border-radius
+  box-shadow 2px 2px 10px black