Merge pull request #2879 from daiyam/theme-nord

add Nord UI theme

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 () {

browser/components/MarkdownSplitEditor.styl

@@ -16,22 +16,14 @@
     z-index 10
     cursor col-resize
 
-body[data-theme="dark"]
+apply-theme(theme)
+  body[data-theme={theme}]
     .root
       .slider
-      border-left 1px solid $ui-dark-borderColor
+        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,61 +322,62 @@ body[data-theme="solarized-dark"]
     color $ui-inactive-text-color
     vertical-align middle
 
-body[data-theme="monokai"]
+apply-theme(theme)
+  body[data-theme={theme}]
     .root
-    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')
 
     .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
         transition 0.15s
-      // background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
+        // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
-      color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
         .item-title
         .item-title-icon
         .item-bottom-time
           transition 0.15s
-        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, 20%)
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
-        color $ui-monokai-text-color
+          color get-theme-var(theme, 'text-color')
       &:active
         transition 0.15s
-      background-color $ui-monokai-noteList-backgroundColor
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
-      color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
         .item-title
         .item-title-icon
         .item-bottom-time
           transition 0.15s
-        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%)
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
-        color $ui-monokai-text-color
+          color get-theme-var(theme, 'text-color')
 
     .item-wrapper
-    border-color alpha($ui-monokai-button-backgroundColor, 60%)
+      border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
 
     .item--active
-    border-color $ui-monokai-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-monokai-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
       .item-wrapper
         border-color transparent
       .item-title
       .item-title-icon
       .item-bottom-time
-      color $ui-monokai-active-color
+        color get-theme-var(theme, 'active-color')
       .item-bottom-tagList-item
-      background-color alpha(white, 10%)
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
-      color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
       &:hover
-      // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
-      color #f92672
+        color get-theme-var(theme, 'button--hover-color')
         .item-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
 
     .item-title
       color $ui-inactive-text-color
@@ -395,75 +396,8 @@ body[data-theme="monokai"]
       color $ui-inactive-text-color
       vertical-align middle
 
-body[data-theme="dracula"]
+for theme in 'dracula'
-  .root
+  apply-theme(theme)
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
 
-  .item
+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-noteList-backgroundColor, 20%)
-      color $ui-dracula-text-color
-      .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, 20%)
-        color $ui-dracula-text-color
-    &:active
-      transition 0.15s
-      background-color $ui-dracula-noteList-backgroundColor
-      color $ui-dracula-text-color
-      .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
-    .item-title-icon
-    .item-bottom-time
-      color $ui-dracula-active-color
-    .item-bottom-tagList-item
-      background-color alpha(#f8f8f2, 10%)
-      color $ui-dracula-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
-    color $ui-inactive-text-color
-
-  .item-title-icon
-    color $ui-inactive-text-color
-
-  .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

browser/components/NoteItemSimple.styl

@@ -223,61 +223,62 @@ body[data-theme="solarized-dark"]
       padding-left 4px
       opacity 0.4
 
-body[data-theme="monokai"]
+apply-theme(theme)
+  body[data-theme={theme}]
     .root
-    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')
 
     .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
         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 $ui-monokai-text-color
+          color get-theme-var(theme, 'text-color')
         .item-simple-bottom-tagList-item
           transition 0.15s
-        background-color alpha(#fff, 20%)
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
-        color $ui-monokai-text-color
+          color get-theme-var(theme, 'text-color')
       &:active
         transition 0.15s
-      background-color $ui-monokai-button--active-backgroundColor
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
-      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 $ui-monokai-text-color
+          color get-theme-var(theme, 'text-color')
         .item-simple-bottom-tagList-item
           transition 0.15s
-        background-color alpha(white, 10%)
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
-        color $ui-monokai-text-color
+          color get-theme-var(theme, 'text-color')
 
     .item-simple--active
-    border-color $ui-monokai-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-monokai-button--active-backgroundColor
+      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
-      color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
       .item-simple-bottom-tagList-item
-      background-color alpha(white, 10%)
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
-      color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
       &:hover
-      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
         color #c0392b
         .item-simple-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
     .item-simple-title
       color $ui-dark-text-color
       border-bottom $ui-dark-borderColor
@@ -287,66 +288,8 @@ body[data-theme="monokai"]
         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="solarized-dark"]
+  body[data-theme={theme}]
     .notification-area
       background-color none
 
     .notification-link
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
       border none
-    background-color $ui-solarized-dark-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
       &:hover
-      color #5CB85C
+        color get-theme-var(theme, 'button--hover-color')
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .notification-area
+  apply-theme(theme)
-    background-color none
 
-  .notification-link
+for theme in $themes
-    color $ui-monokai-text-color
+  apply-theme(theme)
-    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="solarized-dark"]
+  body[data-theme={theme}]
     .menu-button
       &:active
-      background-color $ui-solarized-dark-noteList-backgroundColor
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
-      color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
       &:hover
-      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')
 
     .menu-button--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
+        color get-theme-var(theme, 'text-color')
       &:hover
-      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')
         .menu-button-label
-        color $ui-solarized-dark-text-color
+          color get-theme-var(theme, 'text-color')
 
     .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
+        color get-theme-var(theme, 'text-color')
       &:hover
-      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')
         .menu-button-label
-        color $ui-solarized-dark-text-color
+          color get-theme-var(theme, 'text-color')
 
     .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
+        color get-theme-var(theme, 'text-color')
       &:hover
-      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')
         .menu-button-label
-        color $ui-solarized-dark-text-color
+          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,61 +100,28 @@ body[data-theme="dark"]
     color $ui-dark-text-color
     transition 0.15s
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
+  body[data-theme={theme}]
     .root
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
       &:hover
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
+        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
         transition 0.15s
         .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, 'text-color')
           transition 0.15s
 
     .root--active
-    color $ui-solarized-dark-button--active-color
+      color get-theme-var(theme, 'active-color')
-    background-color $ui-solarized-dark-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
       .deleteButton
-      color $ui-solarized-dark-button--active-color
+        color get-theme-var(theme, 'text-color')
       .button
-      color $ui-solarized-dark-button--active-color
+        color get-theme-var(theme, 'active-color')
-
-  .button
-    border none
-    color $ui-solarized-dark-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
-    color $ui-monokai-active-color
-    background-color $ui-monokai-button-backgroundColor
-    border-color $ui-monokai-borderColor
-    .deleteButton
-      color $ui-monokai-text-color
-    .button
-      color $ui-monokai-active-color
 
     .button
       border none
@@ -164,39 +131,12 @@ body[data-theme="monokai"]
       border-left 4px solid transparent
 
     .input
-    background-color $ui-monokai-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
       transition 0.15s
 
-body[data-theme="dracula"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    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
+for theme in $themes
-    color $ui-dracula-text-color
+  apply-theme(theme)
-    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)
+  body[data-theme={theme}]
     .folderList-item
       &:hover
-      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')
       &: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')
 
     .folderList-item--active
       @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
-      background-color $ui-solarized-dark-button-backgroundColor
+        background-color get-theme-var(theme, 'button-backgroundColor')
       &: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)
+  body[data-theme={theme}]
     .tagList-item
-    color $ui-dark-inactive-text-color
+      color get-theme-var(theme, 'inactive-text-color')
       &:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
       &:active
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color $ui-dark-button--active-backgroundColor
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
     .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
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
       &: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
-    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)
+  body[data-theme={theme}]
     .percentageBar
-    background-color: $ui-monokai-borderColor
+      background-color: get-theme-var(theme, 'borderColor')
 
     .progressBar
-    background-color $ui-monokai-active-color
+      background-color get-theme-var(theme, 'active-color')
 
     .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
+    background-color get-theme-var(theme, 'noteDetail-backgroundColor')
     table
       thead
         tr
-        background-color themeSolarizedDarkTableHead
+          background-color get-theme-var(theme, 'table-head-backgroundColor')
         th
-        border-color themeSolarizedDarkTableBorder
+          border-color get-theme-var(theme, 'table-borderColor')
           &:last-child
-          border-right solid 1px themeSolarizedDarkTableBorder
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
       tbody
         tr:nth-child(2n + 1)
-        background-color themeSolarizedDarkTableOdd
+          background-color get-theme-var(theme, 'table-odd-backgroundColor')
         tr:nth-child(2n)
-        background-color themeSolarizedDarkTableEven
+          background-color get-theme-var(theme, 'table-even-backgroundColor')
         td
-        border-color themeSolarizedDarkTableBorder
+          border-color get-theme-var(theme, 'table-borderColor')
           &:last-child
-          border-right solid 1px themeSolarizedDarkTableBorder
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
-  dl
-    border-color themeDarkBorder
-    background-color themeSolarizedDarkTableHead
-  dt
-    border-color themeDarkBorder
-  dd
-    border-color themeDarkBorder
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
-
-  pre.fence
-    .gallery
-      .carousel-main, .carousel-footer
-        background-color $ui-solarized-dark-noteDetail-backgroundColor
-      .prev, .next
-        color $ui-solarized-dark-button--active-color
-        background-color $ui-solarized-dark-button-backgroundColor
-
-  .markdownIt-TOC-wrapper
-    &,
-    &:before
-      background-color darken(themeSolarizedDarkBackground, 15%)
-      color themeDarkText
-
-themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor
-themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
-themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
-themeMonokaiTableHead = themeMonokaiTableEven
-themeMonokaiTableBorder = themeDarkBorder
-
-body[data-theme="monokai"]
-  color $ui-monokai-text-color
-  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
+      background-color get-theme-var(theme, 'kbd-backgroundColor')
+      color get-theme-var(theme, 'kbd-color')
 
     dl
       border-color themeDarkBorder
-    background-color themeMonokaiTableHead
+      background-color get-theme-var(theme, 'table-head-backgroundColor')
     dt
       border-color themeDarkBorder
     dd
       border-color themeDarkBorder
-    background-color $ui-monokai-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
     pre.fence
       .gallery
         .carousel-main, .carousel-footer
-        background-color $ui-monokai-noteDetail-backgroundColor
+          background-color get-theme-var(theme, 'noteDetail-backgroundColor')
         .prev, .next
-        color $ui-monokai-button--active-color
+          color get-theme-var(theme, 'button--active-color')
-        background-color $ui-monokai-button-backgroundColor
+          background-color get-theme-var(theme, 'button-backgroundColor')
 
     .markdownIt-TOC-wrapper
       &,
       &:before
-      background-color darken(themeMonokaiBackground, 15%)
+        background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
         color themeDarkText
 
-themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor
+for theme in 'solarized-dark' 'dracula'
-themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
+  apply-theme(theme)
-themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
-themeDraculaTableHead = themeDraculaTableEven
-themeDraculaTableBorder = themeDarkBorder
 
-body[data-theme="dracula"]
+for theme in $themes
-  color $ui-dracula-text-color
+  apply-theme(theme)
-  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)
+  body[data-theme={theme}]
     .root
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
-    border-left 1px solid $ui-solarized-dark-borderColor
+      border-left 1px solid get-theme-var(theme, 'borderColor')
     .empty-message
-    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)
-    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)
+  body[data-theme={theme}]
     .root
-    color $ui-dark-text-color
       &: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-input
+      color get-theme-var(theme, 'text-color')
+      background-color transparent
+      border-color get-theme-var(theme, 'borderColor')
 
     .search-optionList
-    color white
+      color get-theme-var(theme, 'text-color')
-    border-color $ui-monokai-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-monokai-button-backgroundColor
+      background-color get-theme-var(theme, 'button-backgroundColor')
 
     .search-optionList-item
       &:hover
-      background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
+        background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)
 
     .search-optionList-item--active
-    background-color $ui-monokai-button--active-backgroundColor
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
-    color $ui-monokai-button--active-color
+      color get-theme-var(theme, 'button--active-color')
       &:hover
-      background-color $ui-monokai-button--active-backgroundColor
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
-      color $ui-monokai-button--active-color
+        color get-theme-var(theme, 'button--active-color')
+
     .search-optionList-item-name-surfix
-    color $ui-monokai-inactive-text-color
+      color get-theme-var(theme, 'inactive-text-color')
 
-body[data-theme="dracula"]
+for theme in 'solarized-dark' 'dracula'
- .root
+  apply-theme(theme)
-    color $ui-dracula-text-color
-    &:hover
-      color #f8f8f2
-      background-color $ui-dark-button--hover-backgroundColor
-      border-color $ui-dracula-borderColor
 
-  .search-optionList
+for theme in $themes
-    color #f8f8f2
+  apply-theme(theme)
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-button-backgroundColor
-
-  .search-optionList-item
-    &:hover
-      background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
-
-  .search-optionList-item--active
-    background-color $ui-dracula-button--active-backgroundColor
-    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)
+  body[data-theme={theme}]
     .control-infoButton-panel
-    background-color $ui-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
     .control-infoButton-panel-trash
-    background-color $ui-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
     .modification-date
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .modification-date-desc
       color $ui-inactive-text-color
 
     .infoPanel-defaul-count
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .infoPanel-sub-count
       color $ui-inactive-text-color
 
     .infoPanel-default
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .infoPanel-sub
       color $ui-inactive-text-color
 
     .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]
       button
         color $ui-dark-inactive-text-color
         &: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
         color $ui-dark-inactive-text-color
         &: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="solarized-dark"]
+  body[data-theme={theme}]
     .root
-    border-left 1px solid $ui-solarized-dark-borderColor
+      border-left 1px solid get-theme-var(theme, 'borderColor')
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
-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[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)
+  body[data-theme={theme}]
     .info
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      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)
+  body[data-theme={theme}]
     .root
-    border-left 1px solid $ui-solarized-dark-borderColor
+      border-left 1px solid get-theme-var(theme, 'borderColor')
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
     .body
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
 
     .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
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
     .tabButton
       &: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
 
     .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)
+  body[data-theme={theme}]
     .tag
-    background-color $ui-solarized-dark-tag-backgroundColor
+      background-color get-theme-var(theme, 'tag-backgroundColor')
 
     .tag-removeButton
       border-color $ui-button--focus-borderColor
       background-color transparent
 
     .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)
+  body[data-theme={theme}]
     .control-toggleModeButton
-      background-color #373831
+      background-color get-theme-var(theme, 'borderColor')
       .active
-      background-color #f92672
+        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)
+  body[data-theme={theme}]
     .control-toggleModeButton
-      background-color #373831
+      background-color get-theme-var(theme, 'borderColor')
       .active
-      background-color #f92672
+        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)
+  body[data-theme={theme}]
     .root, .root--expanded
-    background-color $ui-solarized-dark-noteList-backgroundColor
+      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)
+  body[data-theme={theme}]
     .root
-    border-color $ui-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    background-color $ui-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
     .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
       &:hover
         transition 0.2s
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
     .control-button
-    color $ui-dark-inactive-text-color
+      color get-theme-var(theme, 'inactive-text-color')
       &:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
     .control-button--active
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
       &: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

@@ -35,8 +35,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

@@ -113,17 +113,14 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-body[data-theme="solarized-dark"]
+apply-theme(theme)
+  body[data-theme={theme}]
     .root, .root--folded
-    background-color $ui-solarized-dark-backgroundColor
+      background-color get-theme-var(theme, 'backgroundColor')
-    border-right 1px solid $ui-solarized-dark-borderColor
+      border-right 1px solid 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
 
-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

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)
+  body[data-theme={theme}]
     .header--active
-    background-color $ui-dark-button--active-backgroundColor
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
       transition color background-color  0.15s
 
     .header--active
       .header-toggleButton
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
     .header--active
       .header-info
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color $ui-dark-button--active-backgroundColor
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
         &:active
-        color $ui-dark-text-color
+          color get-theme-var(theme, 'text-color')
-        background-color $ui-dark-button--active-backgroundColor
+          background-color get-theme-var(theme, 'button--active-backgroundColor')
 
     .header--active
       .header-addFolderButton
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
     .header-toggleButton
       &:hover
         transition 0.2s
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
       &:active, &:active:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color $ui-dark-button--active-backgroundColor
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
     .header-info
-    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
       &:hover
         transition 0.2s
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
       &:active, &:active:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color $ui-dark-button--active-backgroundColor
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
 
     .header-addFolderButton
       &:hover
         transition 0.2s
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
       &:active, &:active:hover
-      color $ui-dark-text-color
+        color get-theme-var(theme, 'text-color')
-      background-color $ui-dark-button--active-backgroundColor
+        background-color get-theme-var(theme, '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
       border-color $ui-dark-borderColor
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
       &:hover
         transition 0.15s
-      color $ui-monokai-active-color
+        color get-theme-var(theme, 'active-color')
       &: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="solarized-dark"]
+  body[data-theme={theme}]
     .root, .root--expanded
-    background-color $ui-solarized-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
     .control
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
     .control-search
-    background-color $ui-solarized-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
     .control-search-icon
       absolute top bottom left
       line-height 32px
       width 35px
-    color $ui-solarized-dark-inactive-text-color
+      color get-theme-var(theme, 'inactive-text-color')
-    background-color $ui-solarized-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
 
     .control-search-input
-    background-color $ui-solarized-dark-noteList-backgroundColor
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
       input
-      background-color $ui-solarized-dark-noteList-backgroundColor
+        background-color get-theme-var(theme, 'noteList-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, .root--expanded
+  apply-theme(theme)
-    background-color $ui-monokai-noteList-backgroundColor
 
-  .control
+for theme in $themes
-    border-color $ui-monokai-borderColor
+  apply-theme(theme)
-  .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}]
+    background-color get-theme-var(theme, 'backgroundColor')
     ::-webkit-scrollbar-thumb
       background-color rgba(0, 0, 0, 0.3)
     .ModalBase
       .modalBack
-      background-color $ui-solarized-dark-backgroundColor
+        background-color get-theme-var(theme, 'backgroundColor')
     .sortableItemHelper
-    color: $ui-solarized-dark-text-color
+      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,21 +51,27 @@
   font-size 14px
   colorPrimaryButton()
 
-body[data-theme="dark"]
+apply-theme(theme)
+  body[data-theme={theme}]
     .root
-    modalDark()
       width 500px
       height 270px
       overflow hidden
       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
       background-color transparent
       border-color $ui-dark-borderColor
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .control-folder-label
-    color $ui-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .control-folder-input
       border 1px solid $ui-input--create-folder-modal
@@ -75,82 +81,10 @@ body[data-theme="dark"]
       color $ui-inactive-text-color
 
     .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,65 +51,14 @@
   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)
+  body[data-theme={theme}]
     .root
-    modalMonokai()
+      background-color transparent
       width 500px
       height 270px
       overflow hidden
@@ -117,11 +66,11 @@ body[data-theme="monokai"]
 
     .header
       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
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
 
     .control-folder-input
       border 1px solid $ui-input--create-folder-modal
@@ -131,30 +80,10 @@ body[data-theme="monokai"]
       color $ui-inactive-text-color
 
     .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()
-
-  .header
-    color $ui-dark-text-color
-
-  .control-button
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    background-color transparent
-    &:focus
-      colorDarkPrimaryButton()
-
-  .description, .from-url
-    color $ui-inactive-text-color
-
-body[data-theme="solarized-dark"]
     .root
       background-color transparent
 
     .header
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .control-button
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
       background-color transparent
       &:focus
-      colorDarkPrimaryButton()
+        colorThemedPrimaryButton(theme)
-
-  .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
+      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/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="solarized-dark"]
+  body[data-theme={theme}]
     .root
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .group-header
-  .group-header--sub
+      color get-theme-var(theme, 'text-color')
-    color $ui-solarized-dark-text-color
+      border-color get-theme-var(theme, 'borderColor')
-    border-color $ui-solarized-dark-borderColor
 
     .group-header2
-  .group-header2--sub
+      color get-theme-var(theme, 'text-color')
-    color $ui-solarized-dark-text-color
 
     .group-section-control-input
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
     .group-control
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
     .group-control-leftButton
       colorDarkDefaultButton()
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
     .group-control-rightButton
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
     .group-hint
-    colorSolarizedDarkControl()
+      colorThemedControl(theme)
     .group-section-control
       select, .group-section-control-input
-      colorSolarizedDarkControl()
+        colorThemedControl(theme)
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    color $ui-monokai-text-color
 
-  .group-header
+for theme in $themes
-  .group-header--sub
+  apply-theme(theme)
-    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)
+  body[data-theme={theme}]
     .root
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
     p
-    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)
-    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,12 +107,11 @@ body[data-theme="dark"]
   .folderItem-right-dangerButton
     colorDarkDangerButton()
 
-
+apply-theme(theme)
-
+  body[data-theme={theme}]
-body[data-theme="solarized-dark"]
     .folderItem
       &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
+        background-color get-theme-var(theme, 'button-backgroundColor')
 
     .folderItem-left-danger
       color $danger-color
@@ -121,59 +120,19 @@ body[data-theme="solarized-dark"]
       color $ui-dark-inactive-text-color
 
     .folderItem-left-colorButton
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
     .folderItem-right-button
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
     .folderItem-right-confirmButton
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
     .folderItem-right-dangerButton
-    colorSolarizedDarkPrimaryButton()
+      colorThemedPrimaryButton(theme)
 
-body[data-theme="monokai"]
+for theme in 'solarized-dark' 'dracula'
-  .folderItem
+  apply-theme(theme)
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
 
-  .folderItem-left-danger
+for theme in $themes
-    color $danger-color
+  apply-theme(theme)
-
-  .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)
+  body[data-theme={theme}]
     .root
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
     .appId
-    color $ui-monokai-text-color
+      color get-theme-var(theme, 'text-color')
-.list
+    .list
       a
-    color $ui-monokai-active-color
+        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()
-
-  .top-bar
-    background-color transparent
-    border-color #4A4D52
-    p
-      color $tab--dark-text-color
-
-  .nav
-    background-color transparent
-    border-color $ui-dark-borderColor
-
-  .nav-button
-    background-color transparent
-    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
+      border-color get-theme-var(theme, 'borderColor')
       p
-      color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
     .nav
       background-color transparent
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
     .nav-button
       background-color transparent
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
       &:hover
-      color $ui-solarized-dark-text-color
+        color get-theme-var(theme, 'text-color')
 
     .nav-button--active
       @extend .nav-button
-    color $ui-solarized-dark-button--active-color
+      color get-theme-var(theme, 'button--active-color')
-    background-color $ui-solarized-dark-button--active-backgroundColor
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
-    &:hover
-      color white
 
-body[data-theme="monokai"]
+for theme in 'dark' 'solarized-dark' 'dracula'
-  .root
+  apply-theme(theme)
-    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
+for theme in $themes
-    @extend .nav-button
+  apply-theme(theme)
-    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)
+  body[data-theme={theme}]
     .snippets
-    background $ui-dark-backgroundColor
+      background get-theme-var(theme, 'backgroundColor')
       .snippet-item
-      color white
+        color get-theme-var(theme, 'text-color')
         &::after
-        background $ui-dark-borderColor
+          background get-theme-var(theme, 'borderColor')
         &:hover
-        background darken($ui-dark-backgroundColor, 5)
+          background darken(get-theme-var(theme, 'backgroundColor'), 5)
       .snippet-item-selected
-      background darken($ui-dark-backgroundColor, 5)
+        background darken(get-theme-var(theme, 'backgroundColor'), 5)
     .snippet-detail
-    color white
+      color get-theme-var(theme, 'text-color')
     .group-control-button
-    colorDarkPrimaryButton()
+      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)
+  body[data-theme={theme}]
     .header
-    border-color $ui-dracula-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
     .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)
+  body[data-theme={theme}]
     .root
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .folderList-item
-    border-bottom $ui-solarized-dark-borderColor
+      border-bottom get-theme-var(theme, 'borderColor')
 
     .folderList-empty
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .list-empty
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
     .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
-    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
-    border-color $$ui-solarized-dark-borderColor
+      border-color $get-theme-var(theme, 'borderColor')
 
     .addStorage-body-section-type-description
-    color $ui-solarized-dark-text-color
+      color get-theme-var(theme, 'text-color')
 
     .addStorage-body-section-path-button
       colorPrimaryButton()
     .addStorage-body-control
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
 
     .addStorage-body-control-createButton
       colorDarkPrimaryButton()
     .addStorage-body-control-cancelButton
       colorDarkDefaultButton()
-    border-color $ui-solarized-dark-borderColor
+      border-color get-theme-var(theme, 'borderColor')
     .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)
+  body[data-theme={theme}]
     .root
-    modalDark()
+      background-color transparent
 
     .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
       color $ui-inactive-text-color
 
     .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
-    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
+    color get-theme-var(theme, 'text-color')
+    background-color get-theme-var(theme, 'button-backgroundColor')
     border none
     &:hover
-    background-color $dark-primary-button-background--hover
+      background-color get-theme-var(theme, 'button--hover-backgroundColor')
     &:active
     &:active:hover
-    background-color $dark-primary-button-background--active
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
-
-colorMonokaiPrimaryButton()
-  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'