Merge branch 'master' into filter-tags-and-folders

# Conflicts:
#	browser/main/SideNav/PreferenceButton.styl
#	browser/main/SideNav/SideNav.styl

browser/components/MarkdownPreview.js

@@ -21,6 +21,7 @@ import yaml from 'js-yaml'
 import { render } from 'react-dom'
 import Carousel from 'react-image-carousel'
 import ConfigManager from '../main/lib/ConfigManager'
+import uiThemes from 'browser/lib/ui-themes'
 import i18n from 'browser/lib/i18n'
 
 const { remote, shell } = require('electron')
@@ -488,15 +489,7 @@ export default class MarkdownPreview extends React.Component {
   getScrollBarStyle () {
     const { theme } = this.props
 
-    switch (theme) {
+    return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle
-      case 'dark':
-      case 'solarized-dark':
-      case 'monokai':
-      case 'dracula':
-        return scrollBarDarkStyle
-      default:
-        return scrollBarStyle
-    }
   }
 
   componentDidMount () {
@@ -1142,7 +1135,17 @@ export default class MarkdownPreview extends React.Component {
     }
 
     // other case
-    shell.openExternal(href)
+    this.openExternal(href)
+  }
+
+  openExternal (href) {
+    try {
+      const success = shell.openExternal(href) || shell.openExternal(decodeURI(href))
+      if (!success) console.error('failed to open url ' + href)
+    } catch (e) {
+      // URI Error threw from decodeURI
+      console.error(e)
+    }
   }
 
   render () {

browser/components/MarkdownSplitEditor.styl

@@ -16,22 +16,14 @@
     z-index 10
     cursor col-resize
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    .slider
+    .root
-      border-left 1px solid $ui-dark-borderColor
+      .slider
+        border-left 1px solid get-theme-var(theme, 'borderColor')
 
-body[data-theme="solarized-dark"]
+for theme in 'dark' 'dracula' 'solarized-dark'
-  .root
+  apply-theme(theme)
-    .slider
-      border-left 1px solid $ui-solarized-dark-borderColor
 
-body[data-theme="monokai"]
+for theme in $themes
-  .root
+  apply-theme(theme)
-    .slider
-      border-left 1px solid $ui-monokai-borderColor
-
-body[data-theme="dracula"]
-  .root
-    .slider
-      border-left 1px solid $ui-dracula-borderColor

browser/components/NavToggleButton.styl

@@ -17,10 +17,16 @@
 body[data-theme="white"]
   navWhiteButtonColor()
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .navToggle
+  body[data-theme={theme}]
-    &:hover
+    .navToggle:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+      border 1px solid get-theme-var(theme, 'button--active-backgroundColor')
       transition 0.15s
-      color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
+for theme in 'dark' 'dracula' 'solarized-dark'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/NoteItem.styl

@@ -194,7 +194,7 @@ body[data-theme="dark"]
         color $ui-dark-text-color
       .item-bottom-tagList-item
         transition 0.15s
-        background-color alpha(#fff, 20%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 20%)
         color $ui-dark-text-color
     &:active
       transition 0.15s
@@ -207,7 +207,7 @@ body[data-theme="dark"]
         color $ui-dark-text-color
       .item-bottom-tagList-item
         transition 0.15s
-        background-color alpha(white, 10%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 10%)
         color $ui-dark-text-color
 
   .item-wrapper
@@ -223,13 +223,13 @@ body[data-theme="dark"]
     .item-bottom-time
       color $ui-dark-text-color
     .item-bottom-tagList-item
-      background-color alpha(white, 10%)
+      background-color alpha($ui-dark-tagList-backgroundColor, 10%)
       color $ui-dark-text-color
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-      color #c0392b
+      color $ui-dark-button--hover-color
       .item-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 20%)
 
   .item-title
     color $ui-inactive-text-color
@@ -322,148 +322,82 @@ body[data-theme="solarized-dark"]
     color $ui-inactive-text-color
     vertical-align middle
 
-body[data-theme="monokai"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    border-color $ui-monokai-borderColor
+    .root
-    background-color $ui-monokai-noteList-backgroundColor
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .item
+    .item
-    border-color $ui-monokai-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-monokai-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
-    &:hover
+      &:hover
-      transition 0.15s
-      // background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
-      color $ui-monokai-text-color
-      .item-title
-      .item-title-icon
-      .item-bottom-time
         transition 0.15s
-        color $ui-monokai-text-color
+        // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
-      .item-bottom-tagList-item
+        color get-theme-var(theme, 'text-color')
+        .item-title
+        .item-title-icon
+        .item-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      &:active
         transition 0.15s
-        background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
-        color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
-    &:active
+        .item-title
-      transition 0.15s
+        .item-title-icon
-      background-color $ui-monokai-noteList-backgroundColor
+        .item-bottom-time
-      color $ui-monokai-text-color
+          transition 0.15s
-      .item-title
+          color get-theme-var(theme, 'text-color')
-      .item-title-icon
+        .item-bottom-tagList-item
-      .item-bottom-time
+          transition 0.15s
-        transition 0.15s
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
-        color $ui-monokai-text-color
+          color get-theme-var(theme, 'text-color')
-      .item-bottom-tagList-item
-        transition 0.15s
-        background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
-        color $ui-monokai-text-color
 
-  .item-wrapper
-    border-color alpha($ui-monokai-button-backgroundColor, 60%)
-
-  .item--active
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-button-backgroundColor
     .item-wrapper
-      border-color transparent
+      border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
-    .item-title
-    .item-title-icon
-    .item-bottom-time
-      color $ui-monokai-active-color
-    .item-bottom-tagList-item
-      background-color alpha(white, 10%)
-      color $ui-monokai-text-color
-    &:hover
-      // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
-      color #f92672
-      .item-bottom-tagList-item
-        background-color alpha(#fff, 20%)
 
-  .item-title
+    .item--active
-    color $ui-inactive-text-color
+      border-color get-theme-var(theme, 'borderColor')
-
+      background-color get-theme-var(theme, 'button-backgroundColor')
-  .item-title-icon
+      .item-wrapper
-    color $ui-inactive-text-color
+        border-color transparent
-
-  .item-title-empty
-    color $ui-inactive-text-color
-
-  .item-bottom-tagList-item
-    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
-    color $ui-inactive-text-color
-
-  .item-bottom-tagList-empty
-    color $ui-inactive-text-color
-    vertical-align middle
-
-body[data-theme="dracula"]
-  .root
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .item
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
-    &:hover
-      transition 0.15s
-      // background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
-      color $ui-dracula-text-color
       .item-title
       .item-title-icon
       .item-bottom-time
-        transition 0.15s
+        color get-theme-var(theme, 'active-color')
-        color $ui-dracula-text-color
       .item-bottom-tagList-item
-        transition 0.15s
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
-        background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
+        color get-theme-var(theme, 'text-color')
-        color $ui-dracula-text-color
+      &:hover
-    &:active
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
-      transition 0.15s
+        color get-theme-var(theme, 'button--hover-color')
-      background-color $ui-dracula-noteList-backgroundColor
+        .item-bottom-tagList-item
-      color $ui-dracula-text-color
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
-      .item-title
-      .item-title-icon
-      .item-bottom-time
-        transition 0.15s
-        color $ui-dracula-text-color
-      .item-bottom-tagList-item
-        transition 0.15s
-        background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
-        color $ui-dracula-text-color
 
-  .item-wrapper
-    border-color alpha($ui-dracula-button-backgroundColor, 60%)
-
-  .item--active
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-button-backgroundColor
-    .item-wrapper
-      border-color transparent
     .item-title
+      color $ui-inactive-text-color
+
     .item-title-icon
-    .item-bottom-time
+      color $ui-inactive-text-color
-      color $ui-dracula-active-color
+
+    .item-title-empty
+      color $ui-inactive-text-color
+
     .item-bottom-tagList-item
-      background-color alpha(#f8f8f2, 10%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 40%)
-      color $ui-dracula-text-color
+      color $ui-inactive-text-color
-    &:hover
-      // background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
-      color #ff79c6
-      .item-bottom-tagList-item
-        background-color alpha(#f8f8f2, 20%)
 
-  .item-title
+    .item-bottom-tagList-empty
-    color $ui-inactive-text-color
+      color $ui-inactive-text-color
+      vertical-align middle
 
-  .item-title-icon
+for theme in 'dracula'
-    color $ui-inactive-text-color
+  apply-theme(theme)
 
-  .item-title-empty
+for theme in $themes
-    color $ui-inactive-text-color
+  apply-theme(theme)
-
-  .item-bottom-tagList-item
-    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
-    color $ui-inactive-text-color
-
-  .item-bottom-tagList-empty
-    color $ui-inactive-text-color
-    vertical-align middle

browser/components/NoteItemSimple.styl

@@ -223,130 +223,73 @@ body[data-theme="solarized-dark"]
       padding-left 4px
       opacity 0.4
 
-body[data-theme="monokai"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    border-color $ui-monokai-borderColor
+    .root
-    background-color $ui-monokai-noteList-backgroundColor
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .item-simple
+    .item-simple
-    border-color $ui-monokai-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-monokai-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
-    &:hover
+      &:hover
-      transition 0.15s
+        transition 0.15s
-      background-color alpha($ui-monokai-button-backgroundColor, 60%)
+        background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
-      color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
+        .item-simple-title
+        .item-simple-title-empty
+        .item-simple-title-icon
+        .item-simple-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-simple-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      &:active
+        transition 0.15s
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .item-simple-title
+        .item-simple-title-empty
+        .item-simple-title-icon
+        .item-simple-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-simple-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+          color get-theme-var(theme, 'text-color')
+
+    .item-simple--active
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      .item-simple-wrapper
+        border-color transparent
       .item-simple-title
       .item-simple-title-empty
       .item-simple-title-icon
       .item-simple-bottom-time
-        transition 0.15s
+        color get-theme-var(theme, 'text-color')
-        color $ui-monokai-text-color
       .item-simple-bottom-tagList-item
-        transition 0.15s
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
-        background-color alpha(#fff, 20%)
+        color get-theme-var(theme, 'text-color')
-        color $ui-monokai-text-color
+      &:hover
-    &:active
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
-      transition 0.15s
+        color #c0392b
-      background-color $ui-monokai-button--active-backgroundColor
+        .item-simple-bottom-tagList-item
-      color $ui-monokai-text-color
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
-      .item-simple-title
-      .item-simple-title-empty
-      .item-simple-title-icon
-      .item-simple-bottom-time
-        transition 0.15s
-        color $ui-monokai-text-color
-      .item-simple-bottom-tagList-item
-        transition 0.15s
-        background-color alpha(white, 10%)
-        color $ui-monokai-text-color
-
-  .item-simple--active
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-button--active-backgroundColor
-    .item-simple-wrapper
-      border-color transparent
     .item-simple-title
-    .item-simple-title-empty
+      color $ui-dark-text-color
-    .item-simple-title-icon
+      border-bottom $ui-dark-borderColor
-    .item-simple-bottom-time
+    .item-simple-right
-      color $ui-monokai-text-color
+      float right
-    .item-simple-bottom-tagList-item
+      .item-simple-right-storageName
-      background-color alpha(white, 10%)
+        padding-left 4px
-      color $ui-monokai-text-color
+        opacity 0.4
-    &:hover
-      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-      color #c0392b
-      .item-simple-bottom-tagList-item
-        background-color alpha(#fff, 20%)
-  .item-simple-title
-    color $ui-dark-text-color
-    border-bottom $ui-dark-borderColor
-  .item-simple-right
-    float right
-    .item-simple-right-storageName
-      padding-left 4px
-      opacity 0.4
 
-body[data-theme="dracula"]
+for theme in 'dracula'
-  .root
+  apply-theme(theme)
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
 
-  .item-simple
+for theme in $themes
-    border-color $ui-dracula-borderColor
+  apply-theme(theme)
-    background-color $ui-dracula-noteList-backgroundColor
-    &:hover
-      transition 0.15s
-      background-color alpha($ui-dracula-button-backgroundColor, 60%)
-      color $ui-dracula-text-color
-      .item-simple-title
-      .item-simple-title-empty
-      .item-simple-title-icon
-      .item-simple-bottom-time
-        transition 0.15s
-        color $ui-dracula-text-color
-      .item-simple-bottom-tagList-item
-        transition 0.15s
-        background-color alpha(#f8f8f2, 20%)
-        color $ui-dracula-text-color
-    &:active
-      transition 0.15s
-      background-color $ui-dracula-button--active-backgroundColor
-      color $ui-dracula-text-color
-      .item-simple-title
-      .item-simple-title-empty
-      .item-simple-title-icon
-      .item-simple-bottom-time
-        transition 0.15s
-        color $ui-dracula-text-color
-      .item-simple-bottom-tagList-item
-        transition 0.15s
-        background-color alpha(#f8f8f2, 10%)
-        color $ui-dracula-text-color
-
-  .item-simple--active
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-button--active-backgroundColor
-    .item-simple-wrapper
-      border-color transparent
-    .item-simple-title
-    .item-simple-title-empty
-    .item-simple-title-icon
-    .item-simple-bottom-time
-      color $ui-dracula-text-color
-    .item-simple-bottom-tagList-item
-      background-color alpha(#f8f8f2, 10%)
-      color $ui-dracula-text-color
-    &:hover
-      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-      color #c0392b
-      .item-simple-bottom-tagList-item
-        background-color alpha(#f8f8f2, 20%)
-  .item-simple-title
-    color $ui-dark-text-color
-    border-bottom $ui-dark-borderColor
-  .item-simple-right
-    float right
-    .item-simple-right-storageName
-      padding-left 4px
-      opacity 0.4

browser/components/RealtimeNotification.styl

@@ -30,36 +30,20 @@ body[data-theme="dark"]
     &:hover
       color #5CB85C
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .notification-area
+      background-color none
 
-body[data-theme="solarized-dark"]
+    .notification-link
-  .notification-area
+      color get-theme-var(theme, 'text-color')
-    background-color none
+      border none
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      &:hover
+        color get-theme-var(theme, 'button--hover-color')
 
-  .notification-link
+for theme in 'solarized-dark' 'dracula'
-    color $ui-solarized-dark-text-color
+  apply-theme(theme)
-    border none
-    background-color $ui-solarized-dark-button-backgroundColor
-    &:hover
-      color #5CB85C
 
-body[data-theme="monokai"]
+for theme in $themes
-  .notification-area
+  apply-theme(theme)
-    background-color none
-
-  .notification-link
-    color $ui-monokai-text-color
-    border none
-    background-color $ui-monokai-button-backgroundColor
-    &:hover
-      color #5CB85C
-
-body[data-theme="dracula"]
-  .notification-area
-    background-color none
-
-  .notification-link
-    color $ui-dracula-text-color
-    border none
-    background-color $ui-dracula-button-backgroundColor
-    &:hover
-      color #ff79c6

browser/components/SideNavFilter.styl

@@ -180,129 +180,51 @@ body[data-theme="dark"]
       .menu-button-label
         color $ui-dark-text-color
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .menu-button
+      &:active
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
 
-body[data-theme="solarized-dark"]
+    .menu-button--active
-  .menu-button
+      color get-theme-var(theme, 'text-color')
-    &:active
+      background-color get-theme-var(theme, 'button-backgroundColor')
-      background-color $ui-solarized-dark-noteList-backgroundColor
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
-
-  .menu-button--active
-    color $ui-solarized-dark-text-color
-    background-color $ui-solarized-dark-button-backgroundColor
-    .menu-button-label
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
       .menu-button-label
-        color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, 'text-color')
 
-  .menu-button-star--active
+    .menu-button-star--active
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    background-color $ui-solarized-dark-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
-    .menu-button-label
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
       .menu-button-label
-        color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, 'text-color')
 
-  .menu-button-trash--active
+    .menu-button-trash--active
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    background-color $ui-solarized-dark-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
-    .menu-button-label
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
       .menu-button-label
-        color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, 'text-color')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .menu-button
+  apply-theme(theme)
-    &:active
-      background-color $ui-monokai-noteList-backgroundColor
-      color $ui-monokai-text-color
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-      color $ui-monokai-text-color
 
-  .menu-button--active
+for theme in $themes
-    color $ui-monokai-text-color
+  apply-theme(theme)
-    background-color $ui-monokai-button-backgroundColor
-    .menu-button-label
-      color $ui-monokai-text-color
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-      color $ui-monokai-text-color
-      .menu-button-label
-        color $ui-monokai-text-color
-
-  .menu-button-star--active
-    color $ui-monokai-text-color
-    background-color $ui-monokai-button-backgroundColor
-    .menu-button-label
-      color $ui-monokai-text-color
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-      color $ui-monokai-text-color
-      .menu-button-label
-        color $ui-monokai-text-color
-
-  .menu-button-trash--active
-    color $ui-monokai-text-color
-    background-color $ui-monokai-button-backgroundColor
-    .menu-button-label
-      color $ui-monokai-text-color
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-      color $ui-monokai-text-color
-      .menu-button-label
-        color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .menu-button
-    &:active
-      background-color $ui-dracula-noteList-backgroundColor
-      color $ui-dracula-text-color
-    &:hover
-      background-color $ui-dracula-button-backgroundColor
-      color $ui-dracula-text-color
-
-  .menu-button--active
-    color $ui-dracula-text-color
-    background-color $ui-dracula-button-backgroundColor
-    .menu-button-label
-      color $ui-dracula-text-color
-    &:hover
-      background-color $ui-dracula-button-backgroundColor
-      color $ui-dracula-text-color
-      .menu-button-label
-        color $ui-dracula-text-color
-
-  .menu-button-star--active
-    color $ui-dracula-text-color
-    background-color $ui-dracula-button-backgroundColor
-    .menu-button-label
-      color $ui-dracula-text-color
-    &:hover
-      background-color $ui-dracula-button-backgroundColor
-      color $ui-dracula-text-color
-      .menu-button-label
-        color $ui-dracula-text-color
-
-  .menu-button-trash--active
-    color $ui-dracula-text-color
-    background-color $ui-dracula-button-backgroundColor
-    .menu-button-label
-      color $ui-dracula-text-color
-    &:hover
-      background-color $ui-dracula-button-backgroundColor
-      color $ui-dracula-text-color
-      .menu-button-label
-        color $ui-dracula-text-color

browser/components/SnippetTab.styl

@@ -100,103 +100,43 @@ body[data-theme="dark"]
     color $ui-dark-text-color
     transition 0.15s
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    border-color $ui-solarized-dark-borderColor
+    .root
-    &:hover
+      border-color get-theme-var(theme, 'borderColor')
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      &:hover
-      transition 0.15s
+        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+        transition 0.15s
+        .deleteButton
+          color get-theme-var(theme, 'text-color')
+          transition 0.15s
+        .button
+          color get-theme-var(theme, 'text-color')
+          transition 0.15s
+
+    .root--active
+      color get-theme-var(theme, 'active-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      border-color get-theme-var(theme, 'borderColor')
       .deleteButton
-        color $ui-solarized-dark-button--active-color
+        color get-theme-var(theme, 'text-color')
-        transition 0.15s
       .button
-        color $ui-solarized-dark-button--active-color
+        color get-theme-var(theme, 'active-color')
-        transition 0.15s
 
-  .root--active
-    color $ui-solarized-dark-button--active-color
-    background-color $ui-solarized-dark-button-backgroundColor
-    border-color $ui-solarized-dark-borderColor
-    .deleteButton
-      color $ui-solarized-dark-button--active-color
     .button
-      color $ui-solarized-dark-button--active-color
+      border none
+      color $ui-inactive-text-color
+      background-color transparent
+      transition color background-color 0.15s
+      border-left 4px solid transparent
 
-  .button
+    .input
-    border none
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-
-  .input
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-button--active-color
-    transition 0.15s
-
-body[data-theme="monokai"]
-  .root
-    border-color $ui-monokai-borderColor
-    &:hover
-      background-color $ui-monokai-noteDetail-backgroundColor
       transition 0.15s
-      .deleteButton
-        color $ui-monokai-text-color
-        transition 0.15s
-      .button
-        color $ui-monokai-text-color
-        transition 0.15s
 
-  .root--active
+for theme in 'solarized-dark' 'dracula'
-    color $ui-monokai-active-color
+  apply-theme(theme)
-    background-color $ui-monokai-button-backgroundColor
-    border-color $ui-monokai-borderColor
-    .deleteButton
-      color $ui-monokai-text-color
-    .button
-      color $ui-monokai-active-color
 
-  .button
+for theme in $themes
-    border none
+  apply-theme(theme)
-    color $ui-inactive-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-
-  .input
-    background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
-    transition 0.15s
-
-body[data-theme="dracula"]
-  .root
-    border-color $ui-dracula-borderColor
-    &:hover
-      background-color $ui-dracula-noteDetail-backgroundColor
-      transition 0.15s
-      .deleteButton
-        color $ui-dracula-text-color
-        transition 0.15s
-      .button
-        color $ui-dracula-text-color
-        transition 0.15s
-
-  .root--active
-    color $ui-dracula-text-color
-    background-color $ui-dracula-button-backgroundColor
-    border-color $ui-dracula-borderColor
-    .deleteButton
-      color $ui-dracula-text-color
-    .button
-      color $ui-dracula-active-color
-
-  .button
-    border none
-    color $ui-inactive-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-
-  .input
-    background-color $ui-dracula-noteDetail-backgroundColor
-    color $ui-dracula-text-color

browser/components/StorageItem.styl

@@ -120,59 +120,28 @@ body[data-theme="dark"]
       color $ui-dark-text-color
       background-color alpha($ui-dark-button--active-backgroundColor, 50%)
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .folderList-item
+  body[data-theme={theme}]
-    &:hover
+    .folderList-item
-      background-color $ui-solarized-dark-button-backgroundColor
+      &:hover
-      color $ui-solarized-dark-text-color
+        background-color get-theme-var(theme, 'button-backgroundColor')
-    &:active
+        color get-theme-var(theme, 'text-color')
-      color $ui-solarized-dark-text-color
+      &:active
-      background-color $ui-solarized-dark-button-backgroundColor
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button-backgroundColor')
 
-  .folderList-item--active
+    .folderList-item--active
-    @extend .folderList-item
+      @extend .folderList-item
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    background-color $ui-solarized-dark-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
-    &:active
+      &:active
-      background-color $ui-solarized-dark-button-backgroundColor
+        background-color get-theme-var(theme, 'button-backgroundColor')
-    &:hover
+      &:hover
-      color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color $ui-solarized-dark-button-backgroundColor
+        background-color get-theme-var(theme, 'button-backgroundColor')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .folderList-item
+  apply-theme(theme)
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-      color $ui-monokai-text-color
-    &:active
-      color $ui-monokai-text-color
-      background-color $ui-monokai-button-backgroundColor
 
-  .folderList-item--active
+for theme in $themes
-    @extend .folderList-item
+  apply-theme(theme)
-    color $ui-monokai-text-color
-    background-color $ui-monokai-button-backgroundColor
-    &:active
-      background-color $ui-monokai-button-backgroundColor
-    &:hover
-      color $ui-monokai-text-color
-      background-color $ui-monokai-button-backgroundColor
-
-body[data-theme="dracula"]
-  .folderList-item
-    &:hover
-      background-color $ui-dracula-button-backgroundColor
-      color $ui-dracula-text-color
-    &:active
-      color $ui-dracula-text-color
-      background-color $ui-dracula-button-backgroundColor
-
-  .folderList-item--active
-    @extend .folderList-item
-    color $ui-dracula-text-color
-    background-color $ui-dracula-button-backgroundColor
-    &:active
-      background-color $ui-dracula-button-backgroundColor
-    &:hover
-      color $ui-dracula-text-color
-      background-color $ui-dracula-button-backgroundColor

browser/components/TagListItem.styl

@@ -94,23 +94,30 @@ body[data-theme="white"]
   .tagList-item-count
     color $ui-text-color
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .tagList-item
+  body[data-theme={theme}]
-    color $ui-dark-inactive-text-color
+    .tagList-item
-    &:hover
+      color get-theme-var(theme, 'inactive-text-color')
-      color $ui-dark-text-color
+      &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        color get-theme-var(theme, 'text-color')
-    &:active
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
-      color $ui-dark-text-color
+      &:active
-      background-color $ui-dark-button--active-backgroundColor
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
-  .tagList-item-active
+    .tagList-item-active
-    background-color $ui-dark-button--active-backgroundColor
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    &:active
+      &:active
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
-    &:hover
+      &:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
-  .tagList-item-count
+    .tagList-item-count
-    color $ui-dark-button--active-color
+      color get-theme-var(theme, 'button--active-color')
+
+for theme in 'dark'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/components/TodoListPercentage.styl

@@ -71,25 +71,19 @@ body[data-theme="solarized-dark"]
   .todoClearText
     color #fdf6e3
 
-body[data-theme="monokai"]
+apply-theme(theme)
-  .percentageBar
+  body[data-theme={theme}]
-    background-color: $ui-monokai-borderColor
+    .percentageBar
+      background-color: get-theme-var(theme, 'borderColor')
 
-  .progressBar
+    .progressBar
-    background-color $ui-monokai-active-color
+      background-color get-theme-var(theme, 'active-color')
 
-  .percentageText
+    .percentageText
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="dracula"]
+for theme in 'dracula'
-  .percentageBar
+  apply-theme(theme)
-    background-color $ui-dracula-borderColor
 
-  .progressBar
+for theme in $themes
-    background-color: $ui-dracula-active-color
+  apply-theme(theme)
-
-  .percentageText
-    color $ui-dracula-text-color
-
-  .percentageText
-    color $ui-dracula-text-color

browser/components/markdown.styl

@@ -561,159 +561,57 @@ body[data-theme="dark"]
       background-color darken(themeDarkBackground, 5%)
       color themeDarkText
 
-
+apply-theme(theme)
-themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor
+  body[data-theme={theme}]
-themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
+    color get-theme-var(theme, 'text-color')
-themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
-themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
-themeSolarizedDarkTableBorder = themeDarkBorder
-
-body[data-theme="solarized-dark"]
-  color $ui-solarized-dark-text-color
-  border-color themeDarkBorder
-  background-color themeSolarizedDarkBackground
-  table
-    thead
-      tr
-        background-color themeSolarizedDarkTableHead
-      th
-        border-color themeSolarizedDarkTableBorder
-        &:last-child
-          border-right solid 1px themeSolarizedDarkTableBorder
-    tbody
-      tr:nth-child(2n + 1)
-        background-color themeSolarizedDarkTableOdd
-      tr:nth-child(2n)
-        background-color themeSolarizedDarkTableEven
-      td
-        border-color themeSolarizedDarkTableBorder
-        &:last-child
-          border-right solid 1px themeSolarizedDarkTableBorder
-  dl
     border-color themeDarkBorder
-    background-color themeSolarizedDarkTableHead
+    background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-  dt
+    table
-    border-color themeDarkBorder
+      thead
-  dd
+        tr
-    border-color themeDarkBorder
+          background-color get-theme-var(theme, 'table-head-backgroundColor')
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+        th
+          border-color get-theme-var(theme, 'table-borderColor')
+          &:last-child
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
+      tbody
+        tr:nth-child(2n + 1)
+          background-color get-theme-var(theme, 'table-odd-backgroundColor')
+        tr:nth-child(2n)
+          background-color get-theme-var(theme, 'table-even-backgroundColor')
+        td
+          border-color get-theme-var(theme, 'table-borderColor')
+          &:last-child
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
+    kbd
+      background-color get-theme-var(theme, 'kbd-backgroundColor')
+      color get-theme-var(theme, 'kbd-color')
 
-  pre.fence
+    dl
-    .gallery
+      border-color themeDarkBorder
-      .carousel-main, .carousel-footer
+      background-color get-theme-var(theme, 'table-head-backgroundColor')
-        background-color $ui-solarized-dark-noteDetail-backgroundColor
+    dt
-      .prev, .next
+      border-color themeDarkBorder
-        color $ui-solarized-dark-button--active-color
+    dd
-        background-color $ui-solarized-dark-button-backgroundColor
+      border-color themeDarkBorder
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-  .markdownIt-TOC-wrapper
+    pre.fence
-    &,
+      .gallery
-    &:before
+        .carousel-main, .carousel-footer
-      background-color darken(themeSolarizedDarkBackground, 15%)
+          background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-      color themeDarkText
+        .prev, .next
+          color get-theme-var(theme, 'button--active-color')
+          background-color get-theme-var(theme, 'button-backgroundColor')
 
-themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor
+    .markdownIt-TOC-wrapper
-themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
+      &,
-themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
+      &:before
-themeMonokaiTableHead = themeMonokaiTableEven
+        background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
-themeMonokaiTableBorder = themeDarkBorder
+        color themeDarkText
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  color $ui-monokai-text-color
+  apply-theme(theme)
-  border-color themeDarkBorder
-  background-color themeMonokaiBackground
-  table
-    thead
-      tr
-        background-color themeMonokaiTableHead
-      th
-        border-color themeMonokaiTableBorder
-        &:last-child
-          border-right solid 1px themeMonokaiTableBorder
-    tbody
-      tr:nth-child(2n + 1)
-        background-color themeMonokaiTableOdd
-      tr:nth-child(2n)
-        background-color themeMonokaiTableEven
-      td
-        border-color themeMonokaiTableBorder
-        &:last-child
-          border-right solid 1px themeMonokaiTableBorder
-  kbd
-    background-color themeDarkBackground
 
-  dl
+for theme in $themes
-    border-color themeDarkBorder
+  apply-theme(theme)
-    background-color themeMonokaiTableHead
-  dt
-    border-color themeDarkBorder
-  dd
-    border-color themeDarkBorder
-    background-color $ui-monokai-noteDetail-backgroundColor
-
-  pre.fence
-    .gallery
-      .carousel-main, .carousel-footer
-        background-color $ui-monokai-noteDetail-backgroundColor
-      .prev, .next
-        color $ui-monokai-button--active-color
-        background-color $ui-monokai-button-backgroundColor
-
-  .markdownIt-TOC-wrapper
-    &,
-    &:before
-      background-color darken(themeMonokaiBackground, 15%)
-      color themeDarkText
-
-themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor
-themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
-themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
-themeDraculaTableHead = themeDraculaTableEven
-themeDraculaTableBorder = themeDarkBorder
-
-body[data-theme="dracula"]
-  color $ui-dracula-text-color
-  border-color themeDarkBorder
-  background-color themeDraculaBackground
-  table
-    thead
-      tr
-        background-color themeDraculaTableHead
-      th
-        border-color themeDraculaTableBorder
-        &:last-child
-          border-right solid 1px themeDraculaTableBorder
-    tbody
-      tr:nth-child(2n + 1)
-        background-color themeDraculaTableOdd
-      tr:nth-child(2n)
-        background-color themeDraculaTableEven
-      td
-        border-color themeDraculaTableBorder
-        &:last-child
-          border-right solid 1px themeDraculaTableBorder
-  kbd
-    background-color themeDarkBackground
-
-  dl
-    border-color themeDarkBorder
-    background-color themeDraculaTableHead
-  dt
-    border-color themeDarkBorder
-  dd
-    border-color themeDarkBorder
-    background-color $ui-dracula-noteDetail-backgroundColor
-
-  pre.fence
-    .gallery
-      .carousel-main, .carousel-footer
-        background-color $ui-dracula-noteDetail-backgroundColor
-      .prev, .next
-        color $ui-dracula-button--active-color
-        background-color $ui-dracula-button-backgroundColor
-
-  .markdownIt-TOC-wrapper
-    &,
-    &:before
-      background-color darken(themeDraculaBackground, 15%)
-      color themeDarkText

browser/components/render/MermaidRender.js

@@ -1,4 +1,5 @@
 import mermaidAPI from 'mermaid'
+import uiThemes from 'browser/lib/ui-themes'
 
 // fixes bad styling in the mermaid dark theme
 const darkThemeStyling = `
@@ -23,10 +24,13 @@ function render (element, content, theme, enableHTMLLabel) {
   try {
     const height = element.attributes.getNamedItem('data-height')
     const isPredefined = height && height.value !== 'undefined'
+
     if (isPredefined) {
       element.style.height = height.value + 'vh'
     }
-    const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
+
+    const isDarkTheme = uiThemes.some(item => item.name === theme && item.isDark)
+
     mermaidAPI.initialize({
       theme: isDarkTheme ? 'dark' : 'default',
       themeCSS: isDarkTheme ? darkThemeStyling : '',
@@ -37,6 +41,7 @@ function render (element, content, theme, enableHTMLLabel) {
         useWidth: element.clientWidth
       }
     })
+
     mermaidAPI.render(getId(), content, (svgGraph) => {
       element.innerHTML = svgGraph
 

browser/lib/ui-themes.js

@@ -0,0 +1,39 @@
+import i18n from 'browser/lib/i18n'
+
+export default [
+  {
+    name: 'dark',
+    label: i18n.__('Dark'),
+    isDark: true
+  },
+  {
+    name: 'default',
+    label: i18n.__('Default'),
+    isDark: false
+  },
+  {
+    name: 'dracula',
+    label: i18n.__('Dracula'),
+    isDark: true
+  },
+  {
+    name: 'monokai',
+    label: i18n.__('Monokai'),
+    isDark: true
+  },
+  {
+    name: 'nord',
+    label: i18n.__('Nord'),
+    isDark: true
+  },
+  {
+    name: 'solarized-dark',
+    label: i18n.__('Solarized Dark'),
+    isDark: true
+  },
+  {
+    name: 'white',
+    label: i18n.__('White'),
+    isDark: false
+  }
+]

browser/main/Detail/Detail.styl

@@ -24,23 +24,16 @@ body[data-theme="dark"]
   .empty-message
     color $ui-dark-inactive-text-color
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    .root
-    border-left 1px solid $ui-solarized-dark-borderColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-  .empty-message
+      border-left 1px solid get-theme-var(theme, 'borderColor')
-    color $ui-solarized-dark-text-color
+    .empty-message
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    background-color $ui-monokai-noteDetail-backgroundColor
-    border-left 1px solid $ui-monokai-borderColor
-  .empty-message
-    color $ui-monokai-text-color
 
-body[data-theme="dracula"]
+for theme in $themes
-  .root
+  apply-theme(theme)
-    background-color $ui-dracula-noteDetail-backgroundColor
-    border-left 1px solid $ui-dracula-borderColor
-  .empty-message
-    color $ui-dracula-text-color

browser/main/Detail/FolderSelect.styl

@@ -134,54 +134,39 @@ body[data-theme="dark"]
   .search-optionList-item-name-surfix
     color $ui-dark-inactive-text-color
 
-body[data-theme="monokai"]
+apply-theme(theme)
- .root
+  body[data-theme={theme}]
-    color $ui-dark-text-color
+    .root
-    &:hover
+      &:hover
-      color white
+        background-color get-theme-var(theme, 'button--hover-backgroundColor')
-      background-color $ui-monokai-button--hover-backgroundColor
+        border-color get-theme-var(theme, 'borderColor')
-      border-color $ui-monokai-borderColor
 
-  .search-optionList
+    .search-input
-    color white
+      color get-theme-var(theme, 'text-color')
-    border-color $ui-monokai-borderColor
+      background-color transparent
-    background-color $ui-monokai-button-backgroundColor
+      border-color get-theme-var(theme, 'borderColor')
 
-  .search-optionList-item
+    .search-optionList
-    &:hover
+      color get-theme-var(theme, 'text-color')
-      background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button-backgroundColor')
 
-  .search-optionList-item--active
+    .search-optionList-item
-    background-color $ui-monokai-button--active-backgroundColor
+      &:hover
-    color $ui-monokai-button--active-color
+        background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)
-    &:hover
-      background-color $ui-monokai-button--active-backgroundColor
-      color $ui-monokai-button--active-color
-  .search-optionList-item-name-surfix
-    color $ui-monokai-inactive-text-color
 
-body[data-theme="dracula"]
+    .search-optionList-item--active
- .root
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
-    color $ui-dracula-text-color
+      color get-theme-var(theme, 'button--active-color')
-    &:hover
+      &:hover
-      color #f8f8f2
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
-      background-color $ui-dark-button--hover-backgroundColor
+        color get-theme-var(theme, 'button--active-color')
-      border-color $ui-dracula-borderColor
 
-  .search-optionList
+    .search-optionList-item-name-surfix
-    color #f8f8f2
+      color get-theme-var(theme, 'inactive-text-color')
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-button-backgroundColor
 
-  .search-optionList-item
+for theme in 'solarized-dark' 'dracula'
-    &:hover
+  apply-theme(theme)
-      background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
 
-  .search-optionList-item--active
+for theme in $themes
-    background-color $ui-dracula-button--active-backgroundColor
+  apply-theme(theme)
-    color $ui-dracula-button--active-color
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-      color $ui-dracula-button--active-color
-  .search-optionList-item-name-surfix
-    color $ui-dracula-inactive-text-color

browser/main/Detail/InfoPanel.styl

@@ -138,162 +138,49 @@
 .export--unable
   cursor not-allowed
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .control-infoButton-panel
+  body[data-theme={theme}]
-    background-color $ui-dark-noteList-backgroundColor
+    .control-infoButton-panel
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .control-infoButton-panel-trash
+    .control-infoButton-panel-trash
-    background-color $ui-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .modification-date
+    .modification-date
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .modification-date-desc
+    .modification-date-desc
-    color $ui-inactive-text-color
+      color $ui-inactive-text-color
 
-  .infoPanel-defaul-count
+    .infoPanel-defaul-count
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .infoPanel-sub-count
+    .infoPanel-sub-count
-    color $ui-inactive-text-color
+      color $ui-inactive-text-color
 
-  .infoPanel-default
+    .infoPanel-default
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .infoPanel-sub
+    .infoPanel-sub
-    color $ui-inactive-text-color
+      color $ui-inactive-text-color
 
-  .infoPanel-noteLink
+    .infoPanel-noteLink
-    background-color alpha($ui-dark-borderColor, 60%)
+      background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  [id=export-wrap]
+    [id=export-wrap]
-    button
+      button
-      color $ui-dark-inactive-text-color
+        color $ui-dark-inactive-text-color
-      &:hover
+        &:hover
-        background-color alpha($ui-dark-borderColor, 20%)
+          background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
-        color $ui-dark-text-color
+          color get-theme-var(theme, 'text-color')
-    p
+      p
-      color $ui-dark-inactive-text-color
+        color $ui-dark-inactive-text-color
-      &:hover
+        &:hover
-        color $ui-dark-text-color
+          color get-theme-var(theme, 'text-color')
 
-body[data-theme="solarized-dark"]
+for theme in 'dark' 'solarized-dark' 'dracula'
-  .control-infoButton-panel
+  apply-theme(theme)
-    background-color $ui-solarized-dark-noteList-backgroundColor
 
-  .control-infoButton-panel-trash
+for theme in $themes
-    background-color $ui-solarized-ark-noteList-backgroundColor
+  apply-theme(theme)
-
-  .modification-date
-    color $ui-solarized-ark-text-color
-
-  .modification-date-desc
-    color $ui-inactive-text-color
-
-  .infoPanel-defaul-count
-    color $ui-solarized-dark-text-color
-
-  .infoPanel-sub-count
-    color $ui-inactive-text-color
-
-  .infoPanel-default
-    color $ui-solarized-ark-text-color
-
-  .infoPanel-sub
-    color $ui-inactive-text-color
-
-  .infoPanel-noteLink
-    background-color alpha($ui-solarized-dark-borderColor, 20%)
-    color $ui-solarized-dark-text-color
-
-  [id=export-wrap]
-    button
-      color $ui-dark-inactive-text-color
-      &:hover
-        background-color alpha($ui-solarized-dark-borderColor, 20%)
-        color $ui-solarized-ark-text-color
-    p
-      color $ui-dark-inactive-text-color
-      &:hover
-        color $ui-solarized-ark-text-color
-
-body[data-theme="monokai"]
-  .control-infoButton-panel
-    background-color $ui-monokai-noteList-backgroundColor
-
-  .control-infoButton-panel-trash
-    background-color $ui-monokai-noteList-backgroundColor
-
-  .modification-date
-    color $ui-monokai-text-color
-
-  .modification-date-desc
-    color $ui-inactive-text-color
-
-  .infoPanel-defaul-count
-    color $ui-monokai-text-color
-
-  .infoPanel-sub-count
-    color $ui-inactive-text-color
-
-  .infoPanel-default
-    color $ui-monokai-text-color
-
-  .infoPanel-sub
-    color $ui-inactive-text-color
-
-  .infoPanel-noteLink
-    background-color alpha($ui-monokai-borderColor, 20%)
-    color $ui-monokai-text-color
-
-  [id=export-wrap]
-    button
-      color $ui-dark-inactive-text-color
-      &:hover
-        background-color alpha($ui-monokai-borderColor, 20%)
-        color $ui-monokai-text-color
-    p
-      color $ui-dark-inactive-text-color
-      &:hover
-        color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .control-infoButton-panel
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .control-infoButton-panel-trash
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .modification-date
-    color $ui-dracula-text-color
-
-  .modification-date-desc
-    color $ui-inactive-text-color
-
-  .infoPanel-defaul-count
-    color $ui-dracula-text-color
-
-  .infoPanel-sub-count
-    color $ui-inactive-text-color
-
-  .infoPanel-default
-    color $ui-dracula-text-color
-
-  .infoPanel-sub
-    color $ui-inactive-text-color
-
-  .infoPanel-noteLink
-    background-color alpha($ui-dracula-borderColor, 20%)
-    color $ui-dracula-text-color
-
-  [id=export-wrap]
-    button
-      color $ui-dark-inactive-text-color
-      &:hover
-        background-color alpha($ui-dracula-borderColor, 20%)
-        color $ui-dracula-text-color
-    p
-      color $ui-dark-inactive-text-color
-      &:hover
-        color $ui-dracula-text-color

browser/main/Detail/MarkdownNoteDetail.styl

@@ -66,19 +66,14 @@ body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-left 1px solid get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-body[data-theme="solarized-dark"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    border-left 1px solid $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-
-body[data-theme="monokai"]
-  .root
-    border-left 1px solid $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
-
-body[data-theme="dracula"]
-  .root
-    border-left 1px solid $ui-dracula-borderColor
-    background-color $ui-dracula-noteDetail-backgroundColor
 
+for theme in $themes
+  apply-theme(theme)

browser/main/Detail/NoteDetailInfo.styl

@@ -15,6 +15,14 @@ $info-margin-under-border = 30px
   padding 0 20px
   z-index 99
 
+.info > div
+  > button
+    -webkit-user-drag none
+    user-select none
+    > img, span
+      -webkit-user-drag none
+      user-select none
+
 .info-left
   padding 0 10px
   width 100%
@@ -94,25 +102,14 @@ body[data-theme="dark"]
   .undo-button
     topBarButtonDark()
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .info
+  body[data-theme={theme}]
-    border-color $ui-solarized-dark-borderColor
+    .info
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .info
+  apply-theme(theme)
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
 
-body[data-theme="dracula"]
+for theme in $themes
-  .info
+  apply-theme(theme)
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteDetail-backgroundColor
-
-.info > div
-  > button
-    -webkit-user-drag none
-    user-select none
-    > img, span
-      -webkit-user-drag none
-      user-select none

browser/main/Detail/SnippetNoteDetail.styl

@@ -156,78 +156,35 @@ body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    border-left 1px solid $ui-solarized-dark-borderColor
+    .root
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      border-left 1px solid get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-  .body
+    .body
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-  .body .description textarea
+    .body .description textarea
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    border 1px solid $ui-solarized-dark-borderColor
+      border 1px solid get-theme-var(theme, 'borderColor')
 
-  .tabList .tabButton
+    .tabList .tabButton
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
-  .tabButton
+    .tabButton
-    &:hover
+      &:hover
-      color $ui-solarized-dark-button--active-color
+        color get-theme-var(theme, 'text-color')
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
+        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-      transition 0.15s
+        transition 0.15s
 
-  .tabList
+    .tabList
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    border-left 1px solid $ui-monokai-borderColor
-    background-color $ui-monokai-noteDetail-backgroundColor
 
-  .body
+for theme in $themes
-    background-color $ui-monokai-noteDetail-backgroundColor
+  apply-theme(theme)
-
-  .body .description textarea
-    background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
-    border 1px solid $ui-monokai-borderColor
-
-  .tabList .tabButton
-    border-color $ui-monokai-borderColor
-
-  .tabButton
-    &:hover
-      color $ui-monokai-text-color
-      background-color $ui-monokai-noteDetail-backgroundColor
-
-  .tabList
-    background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .root
-    border-left 1px solid $ui-dracula-borderColor
-    background-color $ui-dracula-noteDetail-backgroundColor
-
-  .body
-    background-color $ui-dracula-noteDetail-backgroundColor
-
-  .body .description textarea
-    background-color $ui-dracula-noteDetail-backgroundColor
-    color $ui-dracula-text-color
-    border 1px solid $ui-dracula-borderColor
-
-  .tabList .tabButton
-    border-color $ui-dracula-borderColor
-
-  .tabButton
-    &:hover
-      color $ui-dracula-text-color
-      background-color $ui-dracula-noteDetail-backgroundColor
-
-  .tabList
-    background-color $ui-dracula-noteDetail-backgroundColor
-    color $ui-dracula-text-color

browser/main/Detail/TagSelect.styl

@@ -54,35 +54,20 @@ body[data-theme="dark"]
   .tag-label
     color $ui-dark-text-color
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .tag
+  body[data-theme={theme}]
-    background-color $ui-solarized-dark-tag-backgroundColor
+    .tag
+      background-color get-theme-var(theme, 'tag-backgroundColor')
 
-  .tag-removeButton
+    .tag-removeButton
-    border-color $ui-button--focus-borderColor
+      border-color $ui-button--focus-borderColor
-    background-color transparent
+      background-color transparent
 
-  .tag-label
+    .tag-label
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .tag
+  apply-theme(theme)
-    background-color $ui-monokai-tag-backgroundColor
 
-  .tag-removeButton
+for theme in $themes
-    border-color $ui-button--focus-borderColor
+  apply-theme(theme)
-    background-color transparent
-
-  .tag-label
-    color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .tag
-    background-color $ui-dracula-tag-backgroundColor
-
-  .tag-removeButton
-    border-color $ui-dracula-button--focus-borderColor
-    background-color transparent
-
-  .tag-label
-    color $ui-dracula-borderColor

browser/main/Detail/ToggleDirectionButton.styl

@@ -46,6 +46,13 @@
   left -8px
   width 70px
 
+.control-toggleModeButton
+  -webkit-user-drag none
+  user-select none
+  > div img
+    -webkit-user-drag none
+    user-select none
+
 body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()
@@ -63,23 +70,16 @@ body[data-theme="solarized-dark"]
       background-color #1EC38B
       box-shadow 2px 0px 7px #222222
 
-body[data-theme="monokai"]
+apply-theme(theme)
-  .control-toggleModeButton
+  body[data-theme={theme}]
-      background-color #373831
+    .control-toggleModeButton
-    .active
+      background-color get-theme-var(theme, 'borderColor')
-      background-color #f92672
+      .active
-      box-shadow 2px 0px 7px #222222
+        background-color get-theme-var(theme, 'active-color')
+        box-shadow 2px 0px 7px #222222
 
-body[data-theme="dracula"]
+for theme in 'dracula'
-  .control-toggleModeButton
+  apply-theme(theme)
-      background-color #44475a
-    .active
-      background-color #bd93f9
-      box-shadow 2px 0px 7px #222222
 
-.control-toggleModeButton
+for theme in $themes
-  -webkit-user-drag none
+  apply-theme(theme)
-  user-select none
-  > div img
-    -webkit-user-drag none
-    user-select none

browser/main/Detail/ToggleModeButton.styl

@@ -26,6 +26,13 @@
   &:hover .tooltip
     opacity 1
 
+.control-toggleModeButton
+  -webkit-user-drag none
+  user-select none
+  > div img
+    -webkit-user-drag none
+    user-select none
+
 .tooltip
   tooltip()
   position absolute
@@ -62,23 +69,16 @@ body[data-theme="solarized-dark"]
       background-color #1EC38B
       box-shadow 2px 0px 7px #222222
 
-body[data-theme="monokai"]
+apply-theme(theme)
-  .control-toggleModeButton
+  body[data-theme={theme}]
-      background-color #373831
+    .control-toggleModeButton
-    .active
+      background-color get-theme-var(theme, 'borderColor')
-      background-color #f92672
+      .active
-      box-shadow 2px 0px 7px #222222
+        background-color get-theme-var(theme, 'active-color')
+        box-shadow 2px 0px 7px #222222
 
-body[data-theme="dracula"]
+for theme in 'dracula'
-  .control-toggleModeButton
+  apply-theme(theme)
-      background-color #44475a
-    .active
-      background-color #bd93f9
-      box-shadow 2px 0px 7px #222222
 
-.control-toggleModeButton
+for theme in $themes
-  -webkit-user-drag none
+  apply-theme(theme)
-  user-select none
-  > div img
-    -webkit-user-drag none
-    user-select none

browser/main/Main.js

@@ -16,7 +16,9 @@ import { store } from 'browser/main/store'
 import i18n from 'browser/lib/i18n'
 import { getLocales } from 'browser/lib/Languages'
 import applyShortcuts from 'browser/main/lib/shortcutManager'
+import uiThemes from 'browser/lib/ui-themes'
 import { push } from 'connected-react-router'
+
 const path = require('path')
 const electron = require('electron')
 const { remote } = electron
@@ -142,9 +144,7 @@ class Main extends React.Component {
   componentDidMount () {
     const { dispatch, config } = this.props
 
-    const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula']
+    if (uiThemes.some(theme => theme.name === config.ui.theme)) {
-
-    if (supportedThemes.indexOf(config.ui.theme) !== -1) {
       document.body.setAttribute('data-theme', config.ui.theme)
     } else {
       document.body.setAttribute('data-theme', 'default')

browser/main/NewNoteButton/NewNoteButton.styl

@@ -72,14 +72,13 @@ body[data-theme="dark"]
   .control-newNoteButton-tooltip
     darkTooltip()
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .root, .root--expanded
+  body[data-theme={theme}]
-    background-color $ui-solarized-dark-noteList-backgroundColor
+    .root, .root--expanded
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .root, .root--expanded
+  apply-theme(theme)
-    background-color $ui-monokai-noteList-backgroundColor
 
-body[data-theme="dracula"]
+for theme in $themes
-  .root, .root--expanded
+  apply-theme(theme)
-    background-color $ui-dracula-noteList-backgroundColor

browser/main/NoteList/NoteList.styl

@@ -66,99 +66,33 @@ body[data-theme="white"]
   .control
     background-color $ui-white-noteList-backgroundColor
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    border-color $ui-dark-borderColor
+    .root
-    background-color $ui-dark-noteList-backgroundColor
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .control
+    .control
-    background-color $ui-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
-    border-color $ui-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
-  .control-sortBy-select
+    .control-sortBy-select
-    &:hover
+      &:hover
-      transition 0.2s
+        transition 0.2s
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
-  .control-button
+    .control-button
-    color $ui-dark-inactive-text-color
+      color get-theme-var(theme, 'inactive-text-color')
-    &:hover
+      &:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
-  .control-button--active
+    .control-button--active
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    &:active
+      &:active
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
+for theme in 'dark' 'solarized-dark' 'dracula'
+  apply-theme(theme)
 
-body[data-theme="solarized-dark"]
+for theme in $themes
-  .root
+  apply-theme(theme)
-    border-color $ui-solarized-dark-borderColor
-    background-color $ui-solarized-dark-noteList-backgroundColor
-
-  .control
-    background-color $ui-solarized-dark-noteList-backgroundColor
-    border-color $ui-solarized-dark-borderColor
-
-  .control-sortBy-select
-    &:hover
-      transition 0.2s
-      color $ui-solarized-dark-text-color
-
-  .control-button
-    color $ui-solarized-dark-inactive-text-color
-    &:hover
-      color $ui-solarized-dark-text-color
-
-  .control-button--active
-    color $ui-solarized-dark-text-color
-    &:active
-      color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
-  .root
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteList-backgroundColor
-
-  .control
-    background-color $ui-monokai-noteList-backgroundColor
-    border-color $ui-monokai-borderColor
-
-  .control-sortBy-select
-    &:hover
-      transition 0.2s
-      color $ui-monokai-text-color
-
-  .control-button
-    color $ui-monokai-inactive-text-color
-    &:hover
-      color $ui-monokai-text-color
-
-  .control-button--active
-    color $ui-monokai-text-color
-    &:active
-      color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .root
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .control
-    background-color $ui-dracula-noteList-backgroundColor
-    border-color $ui-dracula-borderColor
-
-  .control-sortBy-select
-    &:hover
-      transition 0.2s
-      color $ui-dracula-text-color
-
-  .control-button
-    color $ui-dracula-inactive-text-color
-    &:hover
-      color $ui-dracula-text-color
-
-  .control-button--active
-    color $ui-dracula-text-color
-    &:active
-      color $ui-dracula-text-color

browser/main/SideNav/PreferenceButton.styl

@@ -32,8 +32,6 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       background-color transparent
 
-
-
 .tooltip
   tooltip()
   position absolute

browser/main/SideNav/SideNav.styl

@@ -169,30 +169,19 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .root, .root--folded
+  body[data-theme={theme}]
-    background-color $ui-solarized-dark-backgroundColor
+    .root, .root--folded
-    border-right 1px solid $ui-solarized-dark-borderColor
+      background-color get-theme-var(theme, 'backgroundColor')
+      border-right 1px solid get-theme-var(theme, 'borderColor')
 
-  .search .search-input
+    .search .search-input
-    background-color $ui-solarized-dark-backgroundColor
+      background-color get-theme-var(theme, 'backgroundColor')
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .root, .root--folded
+  apply-theme(theme)
-    background-color $ui-monokai-backgroundColor
-    border-right 1px solid $ui-monokai-borderColor
-  .search .search-input
-    background-color $ui-monokai-button-backgroundColor
-    color $ui-monokai-text-color
-    border-color $ui-monokai-borderColor
 
-body[data-theme="dracula"]
+for theme in $themes
-  .root, .root--folded
+  apply-theme(theme)
-    background-color $ui-dracula-backgroundColor
-    border-right 1px solid $ui-dracula-borderColor
-  .search .search-input
-    background-color $ui-dracula-backgroundColor
-    color $ui-dracula-text-color
-    border-color $ui-dracula-borderColor

browser/main/SideNav/StorageItem.styl

@@ -132,55 +132,57 @@ body[data-theme="white"]
       background-color alpha($ui-button--active-backgroundColor, 40%)
       color $ui-text-color
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .header--active
+  body[data-theme={theme}]
-    background-color $ui-dark-button--active-backgroundColor
+    .header--active
-    transition color background-color  0.15s
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      transition color background-color  0.15s
+
+    .header--active
+      .header-toggleButton
+        color get-theme-var(theme, 'text-color')
+
+    .header--active
+      .header-info
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
+        &:active
+          color get-theme-var(theme, 'text-color')
+          background-color get-theme-var(theme, 'button--active-backgroundColor')
+
+    .header--active
+      .header-addFolderButton
+        color get-theme-var(theme, 'text-color')
 
-  .header--active
     .header-toggleButton
-      color $ui-dark-text-color
+      &:hover
+        transition 0.2s
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+      &:active, &:active:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
-  .header--active
     .header-info
-      color $ui-dark-text-color
+      background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
-      background-color $ui-dark-button--active-backgroundColor
+      &:hover
-      &:active
+        transition 0.2s
-        color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-        background-color $ui-dark-button--active-backgroundColor
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+      &:active, &:active:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
-  .header--active
     .header-addFolderButton
-      color $ui-dark-text-color
+      &:hover
-
+        transition 0.2s
-  .header-toggleButton
+        color get-theme-var(theme, 'text-color')
-    &:hover
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
-      transition 0.2s
+      &:active, &:active:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
-
-  .header-info
-    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-    &:hover
-      transition 0.2s
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
-
-  .header-addFolderButton
-    &:hover
-      transition 0.2s
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-    &:active, &:active:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
-
-
 
+apply-theme('dark')
 
+for theme in $themes
+  apply-theme(theme)

browser/main/StatusBar/StatusBar.styl

@@ -78,24 +78,19 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     border-left 1px solid $ui-dark-borderColor
 
-body[data-theme="monokai"]
+apply-theme(theme)
-   navButtonColor()
+  body[data-theme={theme}]
-  .zoom
+    .zoom
-    border-color $ui-dark-borderColor
+      border-color $ui-dark-borderColor
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
-    &:hover
+      &:hover
-      transition 0.15s
+        transition 0.15s
-      color $ui-monokai-active-color
+        color get-theme-var(theme, 'active-color')
-    &:active
+      &:active
-      color $ui-monokai-active-color
+        color get-theme-var(theme, 'active-color')
 
-body[data-theme="dracula"]
+for theme in 'dracula' 'solarized-dark'
-   navButtonColor()
+  apply-theme(theme)
-  .zoom
+
-    border-color $ui-dark-borderColor
+for theme in $themes
-    color $ui-dracula-text-color
+  apply-theme(theme)
-    &:hover
-      transition 0.15s
-      color $ui-dracula-active-color
-    &:active
-      color $ui-dracula-active-color

browser/main/TopBar/TopBar.styl

@@ -212,69 +212,31 @@ body[data-theme="dark"]
   .control-newPostButton-tooltip
     darkTooltip()
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root, .root--expanded
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-body[data-theme="solarized-dark"]
+    .control
-  .root, .root--expanded
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-solarized-dark-noteList-backgroundColor
+    .control-search
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .control
+    .control-search-icon
-    border-color $ui-solarized-dark-borderColor
+      absolute top bottom left
-  .control-search
+      line-height 32px
-    background-color $ui-solarized-dark-noteList-backgroundColor
+      width 35px
+      color get-theme-var(theme, 'inactive-text-color')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
-  .control-search-icon
+    .control-search-input
-    absolute top bottom left
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
-    line-height 32px
+      input
-    width 35px
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
-    color $ui-solarized-dark-inactive-text-color
+        color get-theme-var(theme, 'text-color')
-    background-color $ui-solarized-dark-noteList-backgroundColor
 
-  .control-search-input
+for theme in 'solarized-dark' 'dracula'
-    background-color $ui-solarized-dark-noteList-backgroundColor
+  apply-theme(theme)
-    input
-      background-color $ui-solarized-dark-noteList-backgroundColor
-      color $ui-solarized-dark-text-color
 
-body[data-theme="monokai"]
+for theme in $themes
-  .root, .root--expanded
+  apply-theme(theme)
-    background-color $ui-monokai-noteList-backgroundColor
-
-  .control
-    border-color $ui-monokai-borderColor
-  .control-search
-    background-color $ui-monokai-noteList-backgroundColor
-
-  .control-search-icon
-    absolute top bottom left
-    line-height 32px
-    width 35px
-    color $ui-monokai-inactive-text-color
-    background-color $ui-monokai-noteList-backgroundColor
-
-  .control-search-input
-    background-color $ui-monokai-noteList-backgroundColor
-    input
-      background-color $ui-monokai-noteList-backgroundColor
-      color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .root, .root--expanded
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .control
-    border-color $ui-dracula-borderColor
-  .control-search
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .control-search-icon
-    absolute top bottom left
-    line-height 32px
-    width 35px
-    color $ui-dracula-inactive-text-color
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .control-search-input
-    background-color $ui-dracula-noteList-backgroundColor
-    input
-      background-color $ui-dracula-noteList-backgroundColor
-      color $ui-dracula-text-color

browser/main/global.styl

@@ -96,16 +96,6 @@ modalBackColor = white
     z-index modalZIndex + 1
 
 
-body[data-theme="dark"]
-  background-color $ui-dark-backgroundColor
-  ::-webkit-scrollbar-thumb
-    background-color rgba(0, 0, 0, 0.3)
-  .ModalBase
-    .modalBack
-      background-color $ui-dark-backgroundColor
-  .sortableItemHelper
-    color: $ui-dark-text-color
-
 .CodeMirror
   font-family inherit !important
   line-height 1.4em
@@ -148,35 +138,22 @@ body[data-theme="dark"]
 .sortableItemHelper
   z-index modalZIndex + 5
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  background-color $ui-solarized-dark-backgroundColor
+  body[data-theme={theme}]
-  ::-webkit-scrollbar-thumb
+    background-color get-theme-var(theme, 'backgroundColor')
-    background-color rgba(0, 0, 0, 0.3)
+    ::-webkit-scrollbar-thumb
-  .ModalBase
+      background-color rgba(0, 0, 0, 0.3)
-    .modalBack
+    .ModalBase
-      background-color $ui-solarized-dark-backgroundColor
+      .modalBack
-  .sortableItemHelper
+        background-color get-theme-var(theme, 'backgroundColor')
-    color: $ui-solarized-dark-text-color
+    .sortableItemHelper
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="monokai"]
+for theme in 'dark' 'solarized-dark' 'dracula'
-  background-color $ui-monokai-backgroundColor
+  apply-theme(theme)
-  ::-webkit-scrollbar-thumb
-    background-color rgba(0, 0, 0, 0.3)
-  .ModalBase
-    .modalBack
-      background-color $ui-monokai-backgroundColor
-  .sortableItemHelper
-    color: $ui-monokai-text-color
 
-body[data-theme="dracula"]
+for theme in $themes
-  background-color $ui-dracula-backgroundColor
+  apply-theme(theme)
-  ::-webkit-scrollbar-thumb
-    background-color rgba(0, 0, 0, 0.3)
-  .ModalBase
-    .modalBack
-      background-color $ui-dracula-backgroundColor
-  .sortableItemHelper
-    color: $ui-dracula-text-color
 
 body[data-theme="default"]
   .SideNav ::-webkit-scrollbar-thumb

browser/main/lib/ConfigManager.js

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import RcParser from 'browser/lib/RcParser'
 import i18n from 'browser/lib/i18n'
 import ee from 'browser/main/lib/eventEmitter'
+import uiThemes from 'browser/lib/ui-themes'
 
 const OSX = global.process.platform === 'darwin'
 const win = global.process.platform === 'win32'
@@ -180,16 +181,8 @@ function set (updates) {
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
-  if (newConfig.ui.theme === 'dark') {
+  if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) {
-    document.body.setAttribute('data-theme', 'dark')
+    document.body.setAttribute('data-theme', newConfig.ui.theme)
-  } else if (newConfig.ui.theme === 'white') {
-    document.body.setAttribute('data-theme', 'white')
-  } else if (newConfig.ui.theme === 'solarized-dark') {
-    document.body.setAttribute('data-theme', 'solarized-dark')
-  } else if (newConfig.ui.theme === 'monokai') {
-    document.body.setAttribute('data-theme', 'monokai')
-  } else if (newConfig.ui.theme === 'dracula') {
-    document.body.setAttribute('data-theme', 'dracula')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }

browser/main/modals/CreateFolderModal.styl

@@ -51,106 +51,40 @@
   font-size 14px
   colorPrimaryButton()
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    modalDark()
+    .root
-    width 500px
+      width 500px
-    height 270px
+      height 270px
-    overflow hidden
+      overflow hidden
-    position relative
+      position relative
+      position relative
+      z-index $modal-z-index
+      width 100%
+      background-color get-theme-var(theme, 'backgroundColor')
+      overflow hidden
+      border-radius $modal-border-radius
 
-  .header
+    .header
-    background-color transparent
+      background-color transparent
-    border-color $ui-dark-borderColor
+      border-color $ui-dark-borderColor
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .control-folder-label
+    .control-folder-label
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .control-folder-input
+    .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
+      border 1px solid $ui-input--create-folder-modal
-    color white
+      color white
 
-   .description
+    .description
-    color $ui-inactive-text-color
+      color $ui-inactive-text-color
 
-  .control-confirmButton
+    .control-confirmButton
-    colorDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
-body[data-theme="solarized-dark"]
+for theme in 'dark' 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    modalSolarizedDark()
-    width 500px
-    height 270px
-    overflow hidden
-    position relative
 
-  .header
+for theme in $themes
-    background-color transparent
+  apply-theme(theme)
-    border-color $ui-dark-borderColor
-    color $ui-solarized-dark-text-color
-
-  .control-folder-label
-    color $ui-solarized-dark-text-color
-
-  .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
-    color white
-
-   .description
-    color $ui-inactive-text-color
-
-  .control-confirmButton
-    colorSolarizedDarkPrimaryButton()
-
-body[data-theme="monokai"]
-  .root
-    modalMonokai()
-    width 500px
-    height 270px
-    overflow hidden
-    position relative
-
-  .header
-    background-color transparent
-    border-color $ui-dark-borderColor
-    color $ui-monokai-text-color
-
-  .control-folder-label
-    color $ui-monokai-text-color
-
-  .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
-    color white
-
-   .description
-    color $ui-inactive-text-color
-
-  .control-confirmButton
-    colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
-  .root
-    modalDracula()
-    width 500px
-    height 270px
-    overflow hidden
-    position relative
-
-  .header
-    background-color transparent
-    border-color $ui-dark-borderColor
-    color $ui-dracula-text-color
-
-  .control-folder-label
-    color $ui-dracula-text-color
-
-  .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
-    color white
-
-   .description
-    color $ui-inactive-text-color
-
-  .control-confirmButton
-    colorDraculaPrimaryButton()

browser/main/modals/CreateMarkdownFromURLModal.styl

@@ -51,110 +51,39 @@
   font-size 14px
   colorPrimaryButton()
 
-body[data-theme="dark"]
-  .root
-    modalDark()
-    width 500px
-    height 270px
-    overflow hidden
-    position relative
-
-  .header
-    background-color transparent
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-
-  .control-folder-label
-    color $ui-dark-text-color
-
-  .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
-    color white
-
-   .description
-    color $ui-inactive-text-color
-
-  .control-confirmButton
-    colorDarkPrimaryButton()
-
-body[data-theme="solarized-dark"]
-  .root
-    modalSolarizedDark()
-    width 500px
-    height 270px
-    overflow hidden
-    position relative
-
-  .header
-    background-color transparent
-    border-color $ui-dark-borderColor
-    color $ui-solarized-dark-text-color
-
-  .control-folder-label
-    color $ui-solarized-dark-text-color
-
-  .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
-    color white
-
-   .description
-    color $ui-inactive-text-color
-
-  .control-confirmButton
-    colorSolarizedDarkPrimaryButton()
-
 .error
   text-align center
   color #F44336
 
-body[data-theme="monokai"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    modalMonokai()
+    .root
-    width 500px
+      background-color transparent
-    height 270px
+      width 500px
-    overflow hidden
+      height 270px
-    position relative
+      overflow hidden
+      position relative
 
-  .header
+    .header
-    background-color transparent
+      background-color transparent
-    border-color $ui-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .control-folder-label
+    .control-folder-label
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .control-folder-input
+    .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
+      border 1px solid $ui-input--create-folder-modal
-    color white
+      color white
 
-   .description
+    .description
-    color $ui-inactive-text-color
+      color $ui-inactive-text-color
 
-  .control-confirmButton
+    .control-confirmButton
-    colorMonokaiPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
-body[data-theme="dracula"]
+for theme in 'dark' 'dracula' 'solarized-dark'
-  .root
+  apply-theme(theme)
-    modalDracula()
-    width 500px
-    height 270px
-    overflow hidden
-    position relative
 
-  .header
+for theme in $themes
-    background-color transparent
+  apply-theme(theme)
-    border-color $ui-dracula-borderColor
-    color $ui-dracula-text-color
-
-  .control-folder-label
-    color $ui-dracula-text-color
-
-  .control-folder-input
-    border 1px solid $ui-input--create-folder-modal
-    color white
-
-   .description
-    color $ui-inactive-text-color
-
-  .control-confirmButton
-    colorDraculaPrimaryButton()

browser/main/modals/NewNoteModal.styl

@@ -54,70 +54,26 @@
   margin-bottom 25px
   cursor pointer
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    modalDark()
+    .root
+      background-color transparent
 
-  .header
+    .header
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .control-button
+    .control-button
-    border-color $ui-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    background-color transparent
+      background-color transparent
-    &:focus
+      &:focus
-      colorDarkPrimaryButton()
+        colorThemedPrimaryButton(theme)
 
-  .description, .from-url
+    .description
-    color $ui-inactive-text-color
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="solarized-dark"]
+for theme in 'dark' 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    background-color transparent
 
-  .header
+for theme in $themes
-    color $ui-solarized-dark-text-color
+  apply-theme(theme)
-
-  .control-button
-    border-color $ui-solarized-dark-borderColor
-    color $ui-solarized-dark-text-color
-    background-color transparent
-    &:focus
-      colorDarkPrimaryButton()
-
-  .description, .from-url
-    color $ui-solarized-dark-text-color
-
-body[data-theme="monokai"]
-  .root
-    background-color transparent
-
-  .header
-    color $ui-monokai-text-color
-
-  .control-button
-    border-color $ui-monokai-borderColor
-    color $ui-monokai-text-color
-    background-color transparent
-    &:focus
-      colorDarkPrimaryButton()
-
-  .description, .from-url
-    color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .root
-    background-color transparent
-
-  .header
-    color $ui-dracula-text-color
-
-  .control-button
-    border-color $ui-dracula-borderColor
-    color $ui-dracula-text-color
-    background-color transparent
-    &:focus
-      colorDraculaPrimaryButton()
-
-  .description
-    color $ui-dracula-text-color

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -2,7 +2,6 @@
 
 .root
   padding 15px
-  color $ui-text-color
   margin-bottom 30px
 
 .group
@@ -14,7 +13,6 @@
 
 .group-header2
   font-size 20px
-  color $ui-text-color
   margin-bottom 15px
   margin-top 30px
 
@@ -136,20 +134,18 @@ colorDarkControl()
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
 
-colorSolarizedDarkControl()
+colorThemedControl(theme)
   border none
-  background-color $ui-solarized-dark-button-backgroundColor
+  background-color get-theme-var(theme, 'button-backgroundColor')
-  color $ui-solarized-dark-text-color
+  color get-theme-var(theme, 'text-color')
 
-colorMonokaiControl()
+body[data-theme="default"],
-  border none
+body[data-theme="white"]
-  background-color $ui-monokai-button-backgroundColor
+  .root
-  color $ui-monokai-text-color
+      color $ui-text-color
 
-colorDraculaControl()
+  .group-header2
-  border none
+      color $ui-text-color
-  background-color $ui-dracula-button-backgroundColor
-  color $ui-dracula-text-color
 
 body[data-theme="dark"]
   .root
@@ -180,90 +176,36 @@ body[data-theme="dark"]
     select, .group-section-control-input
       colorDarkControl()
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="solarized-dark"]
+    .group-header
-  .root
+      color get-theme-var(theme, 'text-color')
-    color $ui-solarized-dark-text-color
+      border-color get-theme-var(theme, 'borderColor')
 
-  .group-header
+    .group-header2
-  .group-header--sub
+      color get-theme-var(theme, 'text-color')
-    color $ui-solarized-dark-text-color
-    border-color $ui-solarized-dark-borderColor
 
-  .group-header2
+    .group-section-control-input
-  .group-header2--sub
+      border-color get-theme-var(theme, 'borderColor')
-    color $ui-solarized-dark-text-color
 
-  .group-section-control-input
+    .group-control
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
+    .group-control-leftButton
+      colorDarkDefaultButton()
+      border-color get-theme-var(theme, 'borderColor')
+    .group-control-rightButton
+      colorThemedPrimaryButton(theme)
+    .group-hint
+      colorThemedControl(theme)
+    .group-section-control
+      select, .group-section-control-input
+        colorThemedControl(theme)
 
-  .group-control
+for theme in 'solarized-dark' 'dracula'
-    border-color $ui-solarized-dark-borderColor
+  apply-theme(theme)
-  .group-control-leftButton
-    colorDarkDefaultButton()
-    border-color $ui-solarized-dark-borderColor
-  .group-control-rightButton
-    colorSolarizedDarkPrimaryButton()
-  .group-hint
-    colorSolarizedDarkControl()
-  .group-section-control
-    select, .group-section-control-input
-      colorSolarizedDarkControl()
 
-body[data-theme="monokai"]
+for theme in $themes
-  .root
+  apply-theme(theme)
-    color $ui-monokai-text-color
-
-  .group-header
-  .group-header--sub
-    color $ui-monokai-text-color
-    border-color $ui-monokai-borderColor
-
-  .group-header2
-  .group-header2--sub
-    color $ui-monokai-text-color
-
-  .group-section-control-input
-    border-color $ui-monokai-borderColor
-
-  .group-control
-    border-color $ui-monokai-borderColor
-  .group-control-leftButton
-    colorDarkDefaultButton()
-    border-color $ui-monokai-borderColor
-  .group-control-rightButton
-    colorMonokaiPrimaryButton()
-  .group-hint
-    colorMonokaiControl()
-  .group-section-control
-    select, .group-section-control-input
-      colorMonokaiControl()
-
-body[data-theme="dracula"]
-  .root
-    color $ui-dracula-text-color
-
-  .group-header
-  .group-header--sub
-    color $ui-dracula-text-color
-    border-color $ui-dracula-borderColor
-
-  .group-header2
-  .group-header2--sub
-    color $ui-dracula-text-color
-
-  .group-section-control-input
-    border-color $ui-dracula-borderColor
-
-  .group-control
-    border-color $ui-dracula-borderColor
-  .group-control-leftButton
-    colorDarkDefaultButton()
-    border-color $ui-dracula-borderColor
-  .group-control-rightButton
-    colorDraculaPrimaryButton()
-  .group-hint
-    colorDraculaControl()
-  .group-section-control
-    select, .group-section-control-input
-      colorDraculaControl()

browser/main/modals/PreferencesModal/Crowdfunding.styl

@@ -24,20 +24,15 @@ body[data-theme="dark"]
   p
     color $ui-dark-text-color
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    color $ui-solarized-dark-text-color
+    .root
-  p
+      color get-theme-var(theme, 'text-color')
-    color $ui-solarized-dark-text-color
+    p
+      color get-theme-var(theme, 'text-color')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    color $ui-monokai-text-color
-  p
-    color $ui-monokai-text-color
 
-body[data-theme="dracula"]
+for theme in $themes
-  .root
+  apply-theme(theme)
-    color $ui-dracula-text-color
-  p
-    color $ui-dracula-text-color

browser/main/modals/PreferencesModal/FolderItem.styl

@@ -107,73 +107,32 @@ body[data-theme="dark"]
   .folderItem-right-dangerButton
     colorDarkDangerButton()
 
+apply-theme(theme)
+  body[data-theme={theme}]
+    .folderItem
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
 
+    .folderItem-left-danger
+      color $danger-color
 
-body[data-theme="solarized-dark"]
+    .folderItem-left-key
-  .folderItem
+      color $ui-dark-inactive-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
 
-  .folderItem-left-danger
+    .folderItem-left-colorButton
-    color $danger-color
+      colorThemedPrimaryButton(theme)
 
-  .folderItem-left-key
+    .folderItem-right-button
-    color $ui-dark-inactive-text-color
+      colorThemedPrimaryButton(theme)
 
-  .folderItem-left-colorButton
+    .folderItem-right-confirmButton
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
-  .folderItem-right-button
+    .folderItem-right-dangerButton
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
-  .folderItem-right-confirmButton
+for theme in 'solarized-dark' 'dracula'
-    colorSolarizedDarkPrimaryButton()
+  apply-theme(theme)
 
-  .folderItem-right-dangerButton
+for theme in $themes
-    colorSolarizedDarkPrimaryButton()
+  apply-theme(theme)
-
-body[data-theme="monokai"]
-  .folderItem
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-
-  .folderItem-left-danger
-    color $danger-color
-
-  .folderItem-left-key
-    color $ui-dark-inactive-text-color
-
-  .folderItem-left-colorButton
-    colorMonokaiPrimaryButton()
-
-  .folderItem-right-button
-    colorMonokaiPrimaryButton()
-
-  .folderItem-right-confirmButton
-    colorMonokaiPrimaryButton()
-
-  .folderItem-right-dangerButton
-    colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
-  .folderItem
-    &:hover
-      background-color $ui-dracula-button-backgroundColor
-
-  .folderItem-left-danger
-    color $danger-color
-
-  .folderItem-left-key
-    color $ui-dark-inactive-text-color
-
-  .folderItem-left-colorButton
-    colorDraculaPrimaryButton()
-
-  .folderItem-right-button
-    colorDraculaPrimaryButton()
-
-  .folderItem-right-confirmButton
-    colorDraculaPrimaryButton()
-
-  .folderItem-right-dangerButton
-    colorDraculaPrimaryButton()

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -59,29 +59,19 @@ body[data-theme="dark"]
   .appId
     color $ui-dark-text-color
 
-body[data-theme="solarized-dark"]
-  .root
-    color $ui-solarized-dark-text-color
-  .appId
-    color $ui-solarized-dark-text-color
-.list
-  a
-    color $ui-solarized-dark-active-color
 
-body[data-theme="monokai"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    color $ui-monokai-text-color
+    .root
-  .appId
+      color get-theme-var(theme, 'text-color')
-    color $ui-monokai-text-color
+    .appId
-.list
+      color get-theme-var(theme, 'text-color')
-  a
+    .list
-    color $ui-monokai-active-color
+      a
+        color get-theme-var(theme, 'active-color')
 
-body[data-theme="dracula"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    color $ui-dracula-text-color
+
-  .appId
+for theme in $themes
-    color $ui-dracula-text-color
+  apply-theme(theme)
-.list
-  a
-    color $ui-dracula-active-color

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -64,102 +64,31 @@ top-bar--height = 50px
   margin-top 10px
   overflow-y auto
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    modalDark()
+    .root
+      background-color transparent
+    .top-bar
+      background-color transparent
+      border-color get-theme-var(theme, 'borderColor')
+      p
+        color get-theme-var(theme, 'text-color')
+    .nav
+      background-color transparent
+      border-color get-theme-var(theme, 'borderColor')
+    .nav-button
+      background-color transparent
+      color get-theme-var(theme, 'text-color')
+      &:hover
+        color get-theme-var(theme, 'text-color')
 
-  .top-bar
+    .nav-button--active
-    background-color transparent
+      @extend .nav-button
-    border-color #4A4D52
+      color get-theme-var(theme, 'button--active-color')
-    p
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
-      color $tab--dark-text-color
 
-  .nav
+for theme in 'dark' 'solarized-dark' 'dracula'
-    background-color transparent
+  apply-theme(theme)
-    border-color $ui-dark-borderColor
 
-  .nav-button
+for theme in $themes
-    background-color transparent
+  apply-theme(theme)
-    color $tab--dark-text-color
-    &:hover
-      color $ui-dark-text-color
-
-  .nav-button--active
-    @extend .nav-button
-    color white
-    background-color $dark-primary-button-background--active
-    &:hover
-      color white
-
-
-body[data-theme="solarized-dark"]
-  .root
-    background-color transparent
-  .top-bar
-    background-color transparent
-    border-color $ui-solarized-dark-borderColor
-    p
-      color $ui-solarized-dark-text-color
-  .nav
-    background-color transparent
-    border-color $ui-solarized-dark-borderColor
-  .nav-button
-    background-color transparent
-    color $ui-solarized-dark-text-color
-    &:hover
-      color $ui-solarized-dark-text-color
-
-  .nav-button--active
-    @extend .nav-button
-    color $ui-solarized-dark-button--active-color
-    background-color $ui-solarized-dark-button--active-backgroundColor
-    &:hover
-      color white
-
-body[data-theme="monokai"]
-  .root
-    background-color transparent
-  .top-bar
-    background-color transparent
-    border-color $ui-monokai-borderColor
-    p
-      color $ui-monokai-text-color
-  .nav
-    background-color transparent
-    border-color $ui-monokai-borderColor
-  .nav-button
-    background-color transparent
-    color $ui-monokai-text-color
-    &:hover
-      color $ui-monokai-text-color
-
-  .nav-button--active
-    @extend .nav-button
-    color $ui-monokai-button--active-color
-    background-color $ui-monokai-button--active-backgroundColor
-    &:hover
-      color white
-
-body[data-theme="dracula"]
-  .root
-    background-color transparent
-  .top-bar
-    background-color transparent
-    border-color $ui-dracula-borderColor
-    p
-      color $ui-dracula-text-color
-  .nav
-    background-color transparent
-    border-color $ui-dracula-borderColor
-  .nav-button
-    background-color transparent
-    color $ui-dracula-text-color
-    &:hover
-      color $ui-dracula-text-color
-
-  .nav-button--active
-    @extend .nav-button
-    color $ui-dracula-button--active-color
-    background-color $ui-dracula-button--active-backgroundColor
-    &:hover
-      color #f8f8f2

browser/main/modals/PreferencesModal/SnippetTab.styl

@@ -140,66 +140,25 @@ body[data-theme="default"], body[data-theme="white"]
     .snippet-item-selected
       background darken($ui-backgroundColor, 5)
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .snippets
+  body[data-theme={theme}]
-    background $ui-dark-backgroundColor
+    .snippets
-    .snippet-item
+      background get-theme-var(theme, 'backgroundColor')
-      color white
+      .snippet-item
-      &::after
+        color get-theme-var(theme, 'text-color')
-        background $ui-dark-borderColor
+        &::after
-      &:hover
+          background get-theme-var(theme, 'borderColor')
-        background darken($ui-dark-backgroundColor, 5)
+        &:hover
-    .snippet-item-selected
+          background darken(get-theme-var(theme, 'backgroundColor'), 5)
-      background darken($ui-dark-backgroundColor, 5)
+      .snippet-item-selected
-  .snippet-detail
+        background darken(get-theme-var(theme, 'backgroundColor'), 5)
-    color white
+    .snippet-detail
-  .group-control-button
+      color get-theme-var(theme, 'text-color')
-    colorDarkPrimaryButton()
+    .group-control-button
+      colorThemedPrimaryButton(theme)
 
-body[data-theme="solarized-dark"]
+for theme in 'dark' 'solarized-dark' 'dracula'
-  .snippets
+  apply-theme(theme)
-    background $ui-solarized-dark-backgroundColor
-    .snippet-item
-      color white
-      &::after
-        background $ui-solarized-dark-borderColor
-      &:hover
-        background darken($ui-solarized-dark-backgroundColor, 5)
-    .snippet-item-selected
-      background darken($ui-solarized-dark-backgroundColor, 5)
-  .snippet-detail
-    color white
-  .group-control-button
-    colorSolarizedDarkPrimaryButton()
 
-body[data-theme="monokai"]
+for theme in $themes
-  .snippets
+  apply-theme(theme)
-    background $ui-monokai-backgroundColor
-    .snippet-item
-      color White
-      &::after
-        background $ui-monokai-borderColor
-      &:hover
-        background darken($ui-monokai-backgroundColor, 5)
-    .snippet-item-selected
-      background darken($ui-monokai-backgroundColor, 5)
-  .snippet-detail
-    color white
-  .group-control-button
-    colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
-  .snippets
-    background $ui-dracula-backgroundColor
-    .snippet-item
-      color #f8f8f2
-      &::after
-        background $ui-dracula-borderColor
-      &:hover
-        background darken($ui-dracula-backgroundColor, 5)
-    .snippet-item-selected
-      background darken($ui-dracula-backgroundColor, 5)
-  .snippet-detail
-    color #f8f8f2
-  .group-control-button
-    colorDraculaPrimaryButton()

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -103,10 +103,17 @@ body[data-theme="solarized-dark"]
     background-color $ui-solarized-dark-button-backgroundColor
     color $ui-solarized-dark-text-color
 
-body[data-theme="dracula"]
+apply-theme(theme)
-  .header
+  body[data-theme={theme}]
-    border-color $ui-dracula-borderColor
+    .header
+      border-color get-theme-var(theme, 'borderColor')
 
-  .header-control-button
+    .header-control-button
-    colorDraculaDefaultButton()
+      colorThemedPrimaryButton(theme)
-    border-color $ui-dracula-borderColor
+      border-color get-theme-var(theme, 'borderColor')
+
+for theme in 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/main/modals/PreferencesModal/StoragesTab.styl

@@ -168,122 +168,49 @@ body[data-theme="dark"]
   .list-attachement-clear-button
     colorDarkPrimaryButton()
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    color $ui-solarized-dark-text-color
+    .root
+      color get-theme-var(theme, 'text-color')
 
-  .folderList-item
+    .folderList-item
-    border-bottom $ui-solarized-dark-borderColor
+      border-bottom get-theme-var(theme, 'borderColor')
 
-  .folderList-empty
+    .folderList-empty
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .list-empty
+    .list-empty
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-  .list-control-addStorageButton
+    .list-control-addStorageButton
-    border-color $ui-solarized-dark-button-backgroundColor
+      border-color get-theme-var(theme, 'button-backgroundColor')
-    background-color $ui-solarized-dark-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .addStorage-header
+    .addStorage-header
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
-  .addStorage-body-section-name-input
+    .addStorage-body-section-name-input
-    border-color $$ui-solarized-dark-borderColor
+      border-color $get-theme-var(theme, 'borderColor')
 
-  .addStorage-body-section-type-description
+    .addStorage-body-section-type-description
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .addStorage-body-section-path-button
+    .addStorage-body-section-path-button
-    colorPrimaryButton()
+      colorPrimaryButton()
-  .addStorage-body-control
+    .addStorage-body-control
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
-  .addStorage-body-control-createButton
+    .addStorage-body-control-createButton
-    colorDarkPrimaryButton()
+      colorDarkPrimaryButton()
-  .addStorage-body-control-cancelButton
+    .addStorage-body-control-cancelButton
-    colorDarkDefaultButton()
+      colorDarkDefaultButton()
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-  .list-attachement-clear-button
+    .list-attachement-clear-button
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    color $ui-monokai-text-color
 
-  .folderList-item
+for theme in $themes
-    border-bottom $ui-monokai-borderColor
+  apply-theme(theme)
-
-  .folderList-empty
-    color $ui-monokai-text-color
-
-  .list-empty
-    color $ui-monokai-text-color
-  .list-control-addStorageButton
-    border-color $ui-monokai-button-backgroundColor
-    background-color $ui-monokai-button-backgroundColor
-    color $ui-monokai-text-color
-
-  .addStorage-header
-    color $ui-monokai-text-color
-    border-color $ui-monokai-borderColor
-
-  .addStorage-body-section-name-input
-    border-color $$ui-monokai-borderColor
-
-  .addStorage-body-section-type-description
-    color $ui-monokai-text-color
-
-  .addStorage-body-section-path-button
-    colorPrimaryButton()
-  .addStorage-body-control
-    border-color $ui-monokai-borderColor
-
-  .addStorage-body-control-createButton
-    colorDarkPrimaryButton()
-  .addStorage-body-control-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-monokai-borderColor
-  .list-attachement-clear-button
-    colorMonokaiPrimaryButton()
-
-body[data-theme="dracula"]
-  .root
-    color $ui-dracula-text-color
-
-  .folderList-item
-    border-bottom $ui-dracula-borderColor
-
-  .folderList-empty
-    color $ui-dracula-text-color
-
-  .list-empty
-    color $ui-dracula-text-color
-  .list-control-addStorageButton
-    border-color $ui-dracula-button-backgroundColor
-    background-color $ui-dracula-button-backgroundColor
-    color $ui-dracula-text-color
-
-  .addStorage-header
-    color $ui-dracula-text-color
-    border-color $ui-dracula-borderColor
-
-  .addStorage-body-section-name-input
-    border-color $$ui-dracula-borderColor
-
-  .addStorage-body-section-type-description
-    color $ui-dracula-text-color
-
-  .addStorage-body-section-path-button
-    colorPrimaryButton()
-  .addStorage-body-control
-    border-color $ui-dracula-borderColor
-
-  .addStorage-body-control-createButton
-    colorDarkPrimaryButton()
-  .addStorage-body-control-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-dracula-borderColor
-  .list-attachement-clear-button
-    colorDraculaPrimaryButton()

browser/main/modals/PreferencesModal/UiTab.js

@@ -12,6 +12,7 @@ import _ from 'lodash'
 import i18n from 'browser/lib/i18n'
 import { getLanguages } from 'browser/lib/Languages'
 import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
+import uiThemes from 'browser/lib/ui-themes'
 
 const OSX = global.process.platform === 'darwin'
 
@@ -214,12 +215,20 @@ class UiTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
                 ref='uiTheme'
               >
-                <option value='default'>{i18n.__('Default')}</option>
+                <optgroup label='Light Themes'>
-                <option value='white'>{i18n.__('White')}</option>
+                  {
-                <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
+                    uiThemes.filter(theme => !theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
-                <option value='monokai'>{i18n.__('Monokai')}</option>
+                      return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
-                <option value='dracula'>{i18n.__('Dracula')}</option>
+                    })
-                <option value='dark'>{i18n.__('Dark')}</option>
+                  }
+                </optgroup>
+                <optgroup label='Dark Themes'>
+                  {
+                    uiThemes.filter(theme => theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
+                      return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
+                    })
+                  }
+                </optgroup>
               </select>
             </div>
           </div>

browser/main/modals/RenameFolderModal.styl

@@ -43,23 +43,31 @@
   border-radius 2px
   padding 0 25px
   margin 0 auto
+  font-size 14px
   colorPrimaryButton()
 
-body[data-theme="dark"]
+apply-theme(theme)
-  .root
+  body[data-theme={theme}]
-    modalDark()
+    .root
+      background-color transparent
 
-  .header
+    .header
-    background-color $ui-dark-button--hover-backgroundColor
+      background-color get-theme-var(theme, 'button--hover-backgroundColor')
-    border-color $ui-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-   .description
+    .description
-    color $ui-inactive-text-color
+      color $ui-inactive-text-color
 
-  .control-input
+    .control-input
-    border-color $ui-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
-  .control-confirmButton
+    .control-confirmButton
-    colorDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/styles/Detail/TagSelect.styl

@@ -51,74 +51,6 @@
       background-color alpha($ui-button--active-backgroundColor, 40%)
       color $ui-text-color
 
-body[data-theme="dark"]
-  .TagSelect
-    .react-autosuggest__input
-      color $ui-dark-text-color
-
-    ul
-      border-color $ui-dark-borderColor
-      background-color $ui-dark-noteList-backgroundColor
-      color $ui-dark-text-color
-
-      &:before
-        background-color $ui-dark-noteList-backgroundColor
-
-      li[aria-selected="true"]
-        background-color $ui-dark-button--active-backgroundColor
-        color $ui-dark-text-color
-
-body[data-theme="monokai"]
-  .TagSelect
-    .react-autosuggest__input
-      color $ui-monokai-text-color
-
-    ul
-      border-color $ui-monokai-borderColor
-      background-color $ui-monokai-noteList-backgroundColor
-      color $ui-monokai-text-color
-
-      &:before
-        background-color $ui-dark-noteList-backgroundColor
-
-      li[aria-selected="true"]
-        background-color $ui-monokai-button-backgroundColor
-        color $ui-monokai-text-color
-
-body[data-theme="dracula"]
-  .TagSelect
-    .react-autosuggest__input
-      color $ui-dracula-text-color
-
-    ul
-      border-color $ui-dracula-borderColor
-      background-color $ui-dracula-noteList-backgroundColor
-      color $ui-dracula-text-color
-
-      &:before
-        background-color $ui-dark-noteList-backgroundColor
-
-      li[aria-selected="true"]
-        background-color $ui-dracula-button-backgroundColor
-        color $ui-dracula-text-color
-
-body[data-theme="solarized-dark"]
-  .TagSelect
-    .react-autosuggest__input
-      color $ui-solarized-dark-text-color
-
-    ul
-      border-color $ui-solarized-dark-borderColor
-      background-color $ui-solarized-dark-noteList-backgroundColor
-      color $ui-solarized-dark-text-color
-
-      &:before
-        background-color $ui-solarized-dark-noteList-backgroundColor
-
-      li[aria-selected="true"]
-        background-color $ui-dark-button--active-backgroundColor
-        color $ui-solarized-dark-text-color
-
 body[data-theme="white"]
   .TagSelect
     ul
@@ -126,3 +58,27 @@ body[data-theme="white"]
 
       li[aria-selected="true"]
         background-color $ui-button--active-backgroundColor
+
+apply-theme(theme)
+  body[data-theme={theme}]
+    .TagSelect
+      .react-autosuggest__input
+        color get-theme-var(theme, 'text-color')
+
+      ul
+        border-color get-theme-var(theme, 'borderColor')
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+
+        &:before
+          background-color $ui-dark-noteList-backgroundColor
+
+        li[aria-selected="true"]
+          background-color get-theme-var(theme, 'button-backgroundColor')
+          color get-theme-var(theme, 'text-color')
+
+for theme in 'dark' 'solarized-dark' 'dracula'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)

browser/styles/index.styl

@@ -107,36 +107,18 @@ colorDarkPrimaryButton()
   &:active:hover
     background-color $dark-primary-button-background--active
 
-
+colorThemedPrimaryButton(theme)
-colorSolarizedDarkPrimaryButton()
+  if theme == 'dark'
-  color $ui-solarized-dark-text-color
+    colorDarkPrimaryButton()
-  background-color $ui-solarized-dark-button-backgroundColor
+  else
-  border none
+    color get-theme-var(theme, 'text-color')
-  &:hover
+    background-color get-theme-var(theme, 'button-backgroundColor')
-    background-color $dark-primary-button-background--hover
+    border none
-  &:active
+    &:hover
-  &:active:hover
+      background-color get-theme-var(theme, 'button--hover-backgroundColor')
-    background-color $dark-primary-button-background--active
+    &:active
-
+    &:active:hover
-colorMonokaiPrimaryButton()
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
-  color $ui-monokai-text-color
-  background-color $ui-monokai-button-backgroundColor
-  border none
-  &:hover
-    background-color $dark-primary-button-background--hover
-  &:active
-  &:active:hover
-    background-color $dark-primary-button-background--active
-
-colorDraculaPrimaryButton()
-  color $ui-dracula-text-color
-  background-color $ui-dracula-button-backgroundColor
-  border none
-  &:hover
-    background-color $ui-dracula-button--active-backgroundColor
-  &:active
-  &:active:hover
-    background-color $ui-dracula-button--active-backgroundColor
 
 
 // Danger button(Brand color)
@@ -257,12 +239,14 @@ $ui-dark-borderColor = #444444
 $ui-dark-backgroundColor = #2C3033
 $ui-dark-noteList-backgroundColor = #2C3033
 $ui-dark-noteDetail-backgroundColor = #2C3033
+$ui-dark-tagList-backgroundColor = #FFFFFF
 
 $ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
 $ui-dark-button--active-color = #f4f4f4
 $ui-dark-button--active-backgroundColor = #3A404C
+$ui-dark-button--hover-color = #c0392b
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
 $ui-dark-topbar-button-color = #939395
@@ -332,19 +316,11 @@ darkTooltip()
   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
-
-
 /******* Solarized Dark theme ********/
 $ui-solarized-dark-backgroundColor = #073642
 $ui-solarized-dark-noteList-backgroundColor = #073642
 $ui-solarized-dark-noteDetail-backgroundColor = #073642
+$ui-solarized-dark-tagList-backgroundColor = #FFFFFF
 
 $ui-solarized-dark-text-color = #93a1a1
 $ui-solarized-dark-active-color = #2aa198
@@ -356,21 +332,23 @@ $ui-solarized-dark-tag-backgroundColor = #002b36
 $ui-solarized-dark-button-backgroundColor = #002b36
 $ui-solarized-dark-button--active-color = #93a1a1
 $ui-solarized-dark-button--active-backgroundColor = #073642
+$ui-solarized-dark-button--hover-color = #c0392b
 $ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%)
 
-modalSolarizedDark()
+$ui-solarized-dark-kbd-backgroundColor = darken(#21252B, 10%)
-  position relative
+$ui-solarized-dark-kbd-color = $ui-solarized-dark-text-color
-  z-index $modal-z-index
+
-  width 100%
+$ui-solarized-dark-table-odd-backgroundColor = $ui-solarized-dark-noteDetail-backgroundColor
-  background-color $ui-solarized-dark-backgroundColor
+$ui-solarized-dark-table-even-backgroundColor = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
-  overflow hidden
+$ui-solarized-dark-table-head-backgroundColor = $ui-solarized-dark-table-even-backgroundColor
-  border-radius $modal-border-radius
+$ui-solarized-dark-table-borderColor = lighten(darken(#21252B, 10%), 20%)
 
 /******* Monokai theme ********/
 $ui-monokai-backgroundColor = #272822
 $ui-monokai-noteList-backgroundColor = #272822
 $ui-monokai-noteDetail-backgroundColor = #272822
+$ui-monokai-tagList-backgroundColor = #FFFFFF
 
 $ui-monokai-text-color = #f8f8f2
 $ui-monokai-active-color = #f92672
@@ -382,21 +360,23 @@ $ui-monokai-tag-backgroundColor = #373831
 $ui-monokai-button-backgroundColor = #373831
 $ui-monokai-button--active-color = white
 $ui-monokai-button--active-backgroundColor = #f92672
+$ui-monokai-button--hover-color = #f92672
 $ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%)
 
-modalMonokai()
+$ui-monokai-kbd-backgroundColor = darken(#21252B, 10%)
-  position relative
+$ui-monokai-kbd-color = $ui-monokai-text-color
-  z-index $modal-z-index
+
-  width 100%
+$ui-monokai-table-odd-backgroundColor = $ui-monokai-noteDetail-backgroundColor
-  background-color $ui-monokai-backgroundColor
+$ui-monokai-table-even-backgroundColor = darken($ui-monokai-noteDetail-backgroundColor, 10%)
-  overflow hidden
+$ui-monokai-table-head-backgroundColor = $ui-monokai-table-even-backgroundColor
-  border-radius $modal-border-radius
+$ui-monokai-table-borderColor = lighten(darken(#21252B, 10%), 20%)
 
 /******* Dracula theme ********/
 $ui-dracula-backgroundColor = #282a36
 $ui-dracula-noteList-backgroundColor = #282a36
 $ui-dracula-noteDetail-backgroundColor = #282a36
+$ui-dracula-tagList-backgroundColor = #f8f8f2
 
 $ui-dracula-text-color = #f8f8f2
 $ui-dracula-active-color = #bd93f9
@@ -408,22 +388,52 @@ $ui-dracula-tag-backgroundColor = #8be9fd
 $ui-dracula-button-backgroundColor = #44475a
 $ui-dracula-button--active-color = #f8f8f2
 $ui-dracula-button--active-backgroundColor = #bd93f9
+$ui-dracula-button--hover-color = #ff79c6
 $ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%)
 $ui-dracula-button--focus-borderColor = lighten(#44475a, 25%)
-colorDraculaDefaultButton()
-  border-color $ui-dracula-borderColor
-  color $ui-dracula-text-color
-  background-color $ui-dracula-button-backgroundColor
-  &:hover
-    background-color $ui-dracula-button--hover-backgroundColor
-  &:active
-  &:active:hover
-    background-color $ui-dracula-button--active-backgroundColor
 
-modalDracula()
+$ui-dracula-kbd-backgroundColor = darken(#21252B, 10%)
-  position relative
+$ui-dracula-kbd-color = $ui-monokai-text-color
-  z-index $modal-z-index
+
-  width 100%
+$ui-dracula-table-odd-backgroundColor = $ui-dracula-noteDetail-backgroundColor
-  background-color $ui-dracula-backgroundColor
+$ui-dracula-table-even-backgroundColor = darken($ui-dracula-noteDetail-backgroundColor, 10%)
-  overflow hidden
+$ui-dracula-table-head-backgroundColor = $ui-dracula-table-even-backgroundColor
-  border-radius $modal-border-radius
+$ui-dracula-table-borderColor = lighten(darken(#21252B, 10%), 20%)
+
+/******* Nord theme ********/
+$ui-nord-backgroundColor = #2e3440
+$ui-nord-noteList-backgroundColor = #2e3440
+$ui-nord-noteDetail-backgroundColor = #2e3440
+$ui-nord-tagList-backgroundColor = #FFFFFF
+
+$ui-nord-text-color = #d8dee9
+$ui-nord-inactive-text-color = #8fbcbb
+$ui-nord-active-color = #5e81ac
+
+$ui-nord-borderColor = #3b4252
+
+$ui-nord-tag-backgroundColor = #3b4252
+
+$ui-nord-button-backgroundColor = #434c5e
+$ui-nord-button--active-color = #d8dee9
+$ui-nord-button--active-backgroundColor = #5e81ac
+$ui-nord-button--hover-color = #c0392b
+$ui-nord-button--hover-backgroundColor = #434c5e
+
+$ui-nord-kbd-backgroundColor = $ui-nord-text-color
+$ui-nord-kbd-color = $ui-nord-backgroundColor
+
+$ui-nord-table-odd-backgroundColor = $ui-nord-noteDetail-backgroundColor
+$ui-nord-table-even-backgroundColor = darken($ui-nord-noteDetail-backgroundColor, 10%)
+$ui-nord-table-head-backgroundColor = $ui-nord-table-even-backgroundColor
+$ui-nord-table-borderColor = lighten(darken(#21252B, 10%), 20%)
+
+
+
+debug-theme-var(theme, suffix)
+  '$ui-' + theme + '-' + suffix
+
+get-theme-var(theme, suffix)
+  lookup('$ui-' + theme + '-' + suffix)
+
+$themes = 'monokai' 'nord'

contributing.md

@@ -50,14 +50,26 @@ GPL v3 is too strict to be compatible with another license, so we thought it mig
 
 # Contributing to Boostnote (Korean)
 
-### 버그 리포트를 보고할 때
+### 이슈 또는 버그 리포트를 제출하는 절차
-이슈의 양식은 없습니다. 하지만 부탁이 있습니다.
+이슈를 제기할 때에 사용하는 양식(issue template)이 준비되어 있으니, 해당 양식에 맞추어 최대한 구체적인 정보를 첨부하여 주시기 바랍니다.
-
-**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요**
 
 도움을 주셔서 감사합니다.
 
-### Pull Request의 저작권에 관하여
+### Pull Request를 제출하는 절차
+Pull Request에 사용하는 양식(pull request template)이 준비되어 있으니, 코드를 접수하기 전에 미리 해당 양식을 작성해 주시기 바랍니다. 코드가 해결하고자 하는 문제가 무엇인지 정확히 알면 저희가 훨씬 신속하게 해당 pull request를 검토할 수 있습니다.
+
+다음 사항을 준수하여 주십시오:
+- [`code_style.md`](docs/code_style.md) 에 정리된 코드 스타일 정보를 확인할 것
+- 테스트 코드를 작성하고, 아래와 같은 테스트 커맨드를 실행할 것
+```
+npm run test
+```
+- 아래와 같은 린팅 커맨드로 코드를 확인할 것
+```
+npm run lint
+```
+
+### 저작권에 관한 기준
 
 당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 BoostIO에 양도한다는 것에 동의한다는 의미입니다.
 

docs/build.md

@@ -37,7 +37,7 @@ Visit the page for the pull request and look at the end of the url for the PR nu
 https://github.com/BoostIO/Boostnote/pull/2794
 </pre>
 In the following, replace \<PR> with that number (no brackets).
-For the above url, you would replace \<PR> with 2794
+For URLs below, you would replace \<PR> with 2794
 
 _If you do not have a local copy of the master branch yet_
 ```

docs/ko/build.md

@@ -5,8 +5,6 @@
 * npm: 6.x
 * node: 8.x
 
-`$ grunt pre-build`를 `npm v5.x`에서 실행할 수 없기 때문에, 반드시 `npm v4.x`를 사용하셔야 합니다.
-
 ## 개발
 
 개발에 있어서 Webpack HRM을 사용합니다.
@@ -29,6 +27,34 @@ $ yarn run dev
 > 1. 콤포넌트의 컨스트럭터 함수를 수정할 경우
 > 2. 새로운 CSS코드를 추가할 경우(1.과 같은 이유: CSS클래스는 콤포넌트마다 다시 만들어 지는데, 이 작업은 컨스트럭터에서 일어납니다.)
 
+## Pull Request에 사용된 코드를 적용하는 방법
+관련된 Pull request 페이지를 방문하여, url 스트링 마지막에 표기된 PR 번호를 확인합니다.
+<pre>
+https://github.com/BoostIO/Boostnote/pull/2794
+</pre>
+아래의 커맨드를 실행하면서, \<PR> 대신에 위에서 확인한 번호를 입력합니다 (부등호 신호는 빼고 입력하세요).
+위에 보여진 예시의 경우, \<PR> 자리에 2794를 입력하면 됩니다.
+
+_본인의 로컬 컴퓨터에 마스터 브랜치가 복사되어 있지 않은 경우_
+```
+git clone https://github.com/BoostIO/Boostnote.git
+cd Boostnote
+git fetch origin pull/<PR>/head:<PR>
+git checkout <PR>
+```
+
+_이미 마스터 브랜치를 로컬 컴퓨터에 저장해둔 경우_
+```
+git fetch origin pull/<PR>/head:<PR>
+git checkout <PR>
+```
+
+_To compile and run the code_
+```
+yarn
+yarn run dev
+```
+
 ## 배포
 
 Boostnote에서는 배포 자동화를 위하여 그런트를 사용합니다.
@@ -43,3 +69,31 @@ grunt pre-build
 실행 파일은 `dist`에서 찾을 수 있습니다. 이 경우, 인증이 되어있지 않기 때문에 업데이터는 사용할 수 없습니다.
 
 필요로 하다면, 이 실행파일에 Codesign나 Authenticode등의 서명을 할 수 있습니다.
+
+## 독자적인 배포판을 제작하는 방법 (deb, rpm)
+
+배포판 패키지를 제작하려면 (우분투, 페도라 등) 리눅스 플랫폼에서 `grunt build` 커맨드를 실행하면 됩니다.
+
+> 참조: 동일한 환경에서 `.deb` 파일과 `.rpm` 파일을 모두 만들 수 있습니다.
+
+지원되는 버전의 `node`와 `npm`을 설치한 다음, 빌드에 필요한 패키지를 설치합니다.
+
+우분투/데비안 환경 (Ubuntu/Debian):
+
+```
+$ sudo apt-get install -y rpm fakeroot
+```
+
+페도라 환경 (Fedora):
+
+```
+$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
+```
+
+그 다음 `grunt build` 커맨드를 실행합니다.
+
+```
+$ grunt build
+```
+
+`dist` 디렉토리에 `.deb` 파일과 `.rpm` 파일이 새롭게 생성됩니다.

docs/ko/debug.md

@@ -1,5 +1,7 @@
 # Boostnote의 디버그 방법(Electron app)
 
+## 구글 크롬 Developer Tools를 사용한 디버깅
+
 Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니다. 그렇기 때문에 개발자분들은 Google Chrome 브라우저에서 처럼 `Developer Tools`를 사용하실 수 있습니다.
 
 다음과 같이 `Developer Tools`를 실행할 수 있습니다:
@@ -10,12 +12,26 @@ Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니
 
 에러가 발생할 때에는, 에러메시지가 `console`위에 표시 됩니다.
 
-## 디버깅
+### 디버깅
 예를들면 `debugger`를 사용하여 코드 안에서 다음과 같이 일시 정지지점을 설정할 수 있습니다:
 
 ![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
 
 이는 단순한 하나의 예시에 불과합니다. 자기자신에게 가장 잘 맞는 디버그 방법을 찾는 것도 좋을 것 입니다.
 
-## 참고
+  ### 참고
 * [디버그에 관한 Google Chrome의 공식 문서](https://developer.chrome.com/devtools)
+
+## 비주얼 스튜디오 코드를 사용한 디버깅
+
+1. **[크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 'Install Debugger for Chrome')** 을 비주얼 스튜디오 코드에 설치한 후, 프로그램을 닫았다가 재실행합니다.
+2. **Shift+Command+B** 키를 누르거나, **Terminal** 메뉴 하단에 있는 **Run Build Task** 메뉴를 선택한 후 **Build Boostnote** 를 선택합니다. 아니면 터미널에서 곧바로 `yarn run watch`를 실행해도 됩니다.
+3. 위의 절차가 실행되고 있을 때, 사이드바 **Activity Bar**에서 **Debug view**를 선택합니다. 키보드 단축키로는 **Shift+Command+D**를 눌러도 됩니다..
+4. **Debug configuration**에서 **Boostnote All** 설정을 선택한 후, 초록색 화살표를 클릭하거나 **F5** 키를 누르면 디버깅이 시작됩니다.
+5. 이 시점에서는 **Boostnote**가 실행되고 있을 텐데, 두 개의 프로세스가 진행중인 것을 볼 수 있을 겁니다. 바로 **Boostnote Main** 프로세스와 **Boostnote Renderer** 프로세스입니다. 이제 비주얼 스튜디오 코드에서 곧바로 **디버깅 정지지점 (debug breakpoint)** 을 설정할 수 있습니다. 만약에 지정한 **정지지점 (breakpoint)** 이 등록되지 않는다면, **Boostnote Renderer** 와 **Boostnote Main** 프로세스 사이를 번갈아 확인해 보아야 합니다.
+
+
+### 참고
+
+- [일렉트론 애플리케이션 디버깅 공식 튜토리얼](https://electronjs.org/docs/tutorial/application-debugging)
+- [비쥬얼 스튜디오 코드용 크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

docs/zh_TW/build.md

@@ -10,7 +10,6 @@
 ## 開發
 
 我們使用 Webpack HMR 來開發 Boostnote。
-
 在專案根目錄底下執行下列指令，將會以原始設置啟動 Boostnote。
 
 **用 yarn 來安裝必要 packages**
@@ -19,41 +18,70 @@
 $ yarn
 ```
 
-**開始開發**
+**編譯及執行**
 
 ```
 $ yarn run dev
 ```
 
-> ### Notice
+> ### 注意
 >
-> There are some cases where you have to refresh the app manually.
+> 以下是一些可能要手動重新啟動程式的情況。
 >
-> 1. When editing a constructor method of a component
+> 1. 修改一個 component 的 constructor 方法時。
-> 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.)
+> 2. 新增新的 CSS 類別時 (和 1 很類似：CSS 類別會被每個 component 重寫過。這個過程在 constructor 方法中發生)。
 
-## Deploy
+## 使用 Pull Requests 中的程式碼
+瀏覽 pull request 的頁面，從 URL 的後面找到 PR 號碼。
 
-We use Grunt to automate deployment.
+<pre>
-You can build the program by using `grunt`. However, we don't recommend this because the default task includes codesign and authenticode.
+https://github.com/BoostIO/Boostnote/pull/2794
+</pre>
+接著，於底下步驟中把 \<PR> 換成這個號碼 (沒有括號)。
+請將下方 URL 中的 \<PR> 換置成 2794。
 
-So, we've prepared a separate script which just makes an executable file.
+_如果您還未取得一份 master branch 的本地備份_
+```
+git clone https://github.com/BoostIO/Boostnote.git
+cd Boostnote
+git fetch origin pull/<PR>/head:<PR>
+git checkout <PR>
+```
+
+_如果您已經擁有了 master branch_
+```
+git fetch origin pull/<PR>/head:<PR>
+git checkout <PR>
+```
+
+_編譯及執行程式碼_
+```
+yarn
+yarn run dev
+```
+
+## 佈署
+
+我們用 Grunt 做自動佈署。
+您能使用 `grung` 建構本程式。然而，我們並不建議這麼做，因為預設工作流程包含了程式簽名以及 Authenticode 驗證。
+
+所以，我們準備了一份額外的腳本用於建構可執行檔。
 
 ```
 grunt pre-build
 ```
 
-You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed.
+您可以在 `dist` 資料夾下找到可執行檔。注意，自動更新功能 (auto updater) 並不會生效，因為程式沒有被簽署過。
 
-If you find it necessary, you can use codesign or authenticode with this executable.
+必要時您可以使用程式簽名或 authenticode 驗證執行檔。
 
-## Make own distribution packages (deb, rpm)
+## 建立您自己的發行版套件 (deb, rpm)
 
-Distribution packages are created by exec `grunt build` on Linux platform (e.g. Ubuntu, Fedora).
+發行版套件可以透過在 Linux 平台上 (如 Ubuntu, Fedora) 執行 `grunt build` 來建立。
 
-> Note: You can create both `.deb` and `.rpm` in a single environment.
+> 注意：您可以在同個環境中同時建立 `.deb` 及`.rpm` 。
 
-After installing the supported version of `node` and `npm`, install build dependency packages.
+安裝支援版本的 `node` 和 `npm` 後，安裝編譯相依套件。
 
 Ubuntu/Debian:
 
@@ -67,10 +95,10 @@ Fedora:
 $ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
 ```
 
-Then execute `grunt build`.
+接著執行 `grunt build`。
 
 ```
 $ grunt build
 ```
 
-You will find `.deb` and `.rpm` in the `dist` directory.
+於 `dist` 資料夾下找到 `.deb` 及 `.rpm`。

yarn.lock

@@ -486,7 +486,7 @@ async@^0.9.0, async@~0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
-async@^1.3.0, async@^1.4.0, async@^1.4.2, async@^1.5.1, async@^1.5.2:
+async@^1.3.0, async@^1.4.2, async@^1.5.1, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
@@ -3669,8 +3669,9 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     is-extendable "^1.0.1"
 
 extend@~3.0.1:
-  version "3.0.1"
+  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 extglob@^0.3.1:
   version "0.3.2"
@@ -3952,6 +3953,7 @@ font-awesome@^4.3.0:
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
 for-own@^0.1.4:
   version "0.1.5"
@@ -4420,14 +4422,15 @@ gud@^1.0.0:
   integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
 
 handlebars@^4.0.3:
-  version "4.0.11"
+  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
+  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-schema@^2.0.0:
   version "2.0.0"
@@ -4997,6 +5000,7 @@ is-extendable@^0.1.0, is-extendable@^0.1.1:
 is-extendable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
   dependencies:
     is-plain-object "^2.0.4"
 
@@ -5126,6 +5130,7 @@ is-plain-obj@^1.0.0:
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
   dependencies:
     isobject "^3.0.1"
 
@@ -5229,6 +5234,7 @@ isobject@^2.0.0:
 isobject@^3.0.0, isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
@@ -6553,6 +6559,7 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
 minimist@~0.0.1:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
 minipass@^2.2.1, minipass@^2.3.3:
   version "2.3.3"
@@ -6568,8 +6575,9 @@ minizlib@^1.1.0:
     minipass "^2.2.1"
 
 mixin-deep@^1.1.3, mixin-deep@^1.2.0:
-  version "1.3.1"
+  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
@@ -6696,6 +6704,11 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+neo-async@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
+
 next-tick@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
@@ -7021,6 +7034,7 @@ open@0.0.5:
 optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
   dependencies:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
@@ -8976,12 +8990,6 @@ source-map@0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@^0.4.4, source-map@~0.4.1:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
-
 source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -8990,6 +8998,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
+source-map@~0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  dependencies:
+    amdefine ">=0.0.4"
+
 sourcemapped-stacktrace@^1.1.6:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688"
@@ -9680,14 +9694,13 @@ uc.micro@^1.0.5:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
-uglify-js@^2.6:
+uglify-js@^3.1.4:
-  version "2.8.29"
+  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
+  integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==
   dependencies:
-    source-map "~0.5.1"
+    commander "~2.20.3"
-    yargs "~3.10.0"
+    source-map "~0.6.1"
-  optionalDependencies:
-    uglify-to-browserify "~1.0.0"
 
 uglify-js@^3.5.1:
   version "3.6.9"
@@ -10144,6 +10157,7 @@ wordwrap@0.0.2:
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
 
 wordwrap@~1.0.0:
   version "1.0.0"