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

# Conflicts: # browser/main/SideNav/PreferenceButton.styl # browser/main/SideNav/SideNav.styl
2026-01-03 03:59:18 +00:00 · 2020-02-05 09:07:13 +09:00
parent f1d03acbad 051ce9e208
commit 725bf2a691
56 changed files with 1487 additions and 2569 deletions
--- a/browser/components/MarkdownPreview.js
+++ b/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) {
-      case 'dark':
-      case 'solarized-dark':
-      case 'monokai':
-      case 'dracula':
-        return scrollBarDarkStyle
-      default:
-        return scrollBarStyle
-    }
+    return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle
  }

  componentDidMount () {
@@ -1142,7 +1135,17 @@ export default class MarkdownPreview extends React.Component {
    }

    // other case
-    shell.openExternal(href)
+    this.openExternal(href)
+  }
+
+  openExternal (href) {
+    try {
+      const success = shell.openExternal(href) || shell.openExternal(decodeURI(href))
+      if (!success) console.error('failed to open url ' + href)
+    } catch (e) {
+      // URI Error threw from decodeURI
+      console.error(e)
+    }
  }

  render () {
--- a/browser/components/MarkdownSplitEditor.styl
+++ b/browser/components/MarkdownSplitEditor.styl
@@ -16,22 +16,14 @@
    z-index 10
    cursor col-resize

-body[data-theme="dark"]
-  .root
-    .slider
-      border-left 1px solid $ui-dark-borderColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      .slider
+        border-left 1px solid get-theme-var(theme, 'borderColor')

-body[data-theme="solarized-dark"]
-  .root
-    .slider
-      border-left 1px solid $ui-solarized-dark-borderColor
+for theme in 'dark' 'dracula' 'solarized-dark'
+  apply-theme(theme)

-body[data-theme="monokai"]
-  .root
-    .slider
-      border-left 1px solid $ui-monokai-borderColor
-
-body[data-theme="dracula"]
-  .root
-    .slider
-      border-left 1px solid $ui-dracula-borderColor
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/NavToggleButton.styl
+++ b/browser/components/NavToggleButton.styl
@@ -17,10 +17,16 @@
 body[data-theme="white"]
  navWhiteButtonColor()

-body[data-theme="dark"]
-  .navToggle
-    &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+apply-theme(theme)
+  body[data-theme={theme}]
+    .navToggle:hover
+      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)
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -194,7 +194,7 @@ body[data-theme="dark"]
        color $ui-dark-text-color
      .item-bottom-tagList-item
        transition 0.15s
-        background-color alpha(#fff, 20%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 20%)
        color $ui-dark-text-color
    &:active
      transition 0.15s
@@ -207,7 +207,7 @@ body[data-theme="dark"]
        color $ui-dark-text-color
      .item-bottom-tagList-item
        transition 0.15s
-        background-color alpha(white, 10%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 10%)
        color $ui-dark-text-color

  .item-wrapper
@@ -223,13 +223,13 @@ body[data-theme="dark"]
    .item-bottom-time
      color $ui-dark-text-color
    .item-bottom-tagList-item
-      background-color alpha(white, 10%)
+      background-color alpha($ui-dark-tagList-backgroundColor, 10%)
      color $ui-dark-text-color
    &:hover
      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-      color #c0392b
+      color $ui-dark-button--hover-color
      .item-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+        background-color alpha($ui-dark-tagList-backgroundColor, 20%)

  .item-title
    color $ui-inactive-text-color
@@ -322,148 +322,82 @@ body[data-theme="solarized-dark"]
    color $ui-inactive-text-color
    vertical-align middle

-body[data-theme="monokai"]
-  .root
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteList-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')

-  .item
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteList-backgroundColor
-    &:hover
-      transition 0.15s
-      // background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
-      color $ui-monokai-text-color
-      .item-title
-      .item-title-icon
-      .item-bottom-time
+    .item
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
+      &:hover
        transition 0.15s
-        color $ui-monokai-text-color
-      .item-bottom-tagList-item
+        // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
+        color get-theme-var(theme, 'text-color')
+        .item-title
+        .item-title-icon
+        .item-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      &:active
        transition 0.15s
-        background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
-        color $ui-monokai-text-color
-    &:active
-      transition 0.15s
-      background-color $ui-monokai-noteList-backgroundColor
-      color $ui-monokai-text-color
-      .item-title
-      .item-title-icon
-      .item-bottom-time
-        transition 0.15s
-        color $ui-monokai-text-color
-      .item-bottom-tagList-item
-        transition 0.15s
-        background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
-        color $ui-monokai-text-color
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .item-title
+        .item-title-icon
+        .item-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
+          color get-theme-var(theme, 'text-color')

-  .item-wrapper
-    border-color alpha($ui-monokai-button-backgroundColor, 60%)
-
-  .item--active
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-button-backgroundColor
    .item-wrapper
-      border-color transparent
-    .item-title
-    .item-title-icon
-    .item-bottom-time
-      color $ui-monokai-active-color
-    .item-bottom-tagList-item
-      background-color alpha(white, 10%)
-      color $ui-monokai-text-color
-    &:hover
-      // background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
-      color #f92672
-      .item-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+      border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)

-  .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
-
-body[data-theme="dracula"]
-  .root
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
-
-  .item
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
-    &:hover
-      transition 0.15s
-      // background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
-      color $ui-dracula-text-color
+    .item--active
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      .item-wrapper
+        border-color transparent
      .item-title
      .item-title-icon
      .item-bottom-time
-        transition 0.15s
-        color $ui-dracula-text-color
+        color get-theme-var(theme, 'active-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
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+        color get-theme-var(theme, 'button--hover-color')
+        .item-bottom-tagList-item
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)

-  .item-wrapper
-    border-color alpha($ui-dracula-button-backgroundColor, 60%)
-
-  .item--active
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-button-backgroundColor
-    .item-wrapper
-      border-color transparent
    .item-title
+      color $ui-inactive-text-color
+
    .item-title-icon
-    .item-bottom-time
-      color $ui-dracula-active-color
+      color $ui-inactive-text-color
+
+    .item-title-empty
+      color $ui-inactive-text-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%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+      color $ui-inactive-text-color

-  .item-title
-    color $ui-inactive-text-color
+    .item-bottom-tagList-empty
+      color $ui-inactive-text-color
+      vertical-align middle

-  .item-title-icon
-    color $ui-inactive-text-color
+for theme in 'dracula'
+  apply-theme(theme)

-  .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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -223,130 +223,73 @@ body[data-theme="solarized-dark"]
      padding-left 4px
      opacity 0.4

-body[data-theme="monokai"]
-  .root
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteList-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')

-  .item-simple
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-noteList-backgroundColor
-    &:hover
-      transition 0.15s
-      background-color alpha($ui-monokai-button-backgroundColor, 60%)
-      color $ui-monokai-text-color
+    .item-simple
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'noteList-backgroundColor')
+      &:hover
+        transition 0.15s
+        background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
+        color get-theme-var(theme, 'text-color')
+        .item-simple-title
+        .item-simple-title-empty
+        .item-simple-title-icon
+        .item-simple-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-simple-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
+          color get-theme-var(theme, 'text-color')
+      &:active
+        transition 0.15s
+        background-color get-theme-var(theme, 'button--active-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .item-simple-title
+        .item-simple-title-empty
+        .item-simple-title-icon
+        .item-simple-bottom-time
+          transition 0.15s
+          color get-theme-var(theme, 'text-color')
+        .item-simple-bottom-tagList-item
+          transition 0.15s
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+          color get-theme-var(theme, 'text-color')
+
+    .item-simple--active
+      border-color get-theme-var(theme, 'borderColor')
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      .item-simple-wrapper
+        border-color transparent
      .item-simple-title
      .item-simple-title-empty
      .item-simple-title-icon
      .item-simple-bottom-time
-        transition 0.15s
-        color $ui-monokai-text-color
+        color get-theme-var(theme, 'text-color')
      .item-simple-bottom-tagList-item
-        transition 0.15s
-        background-color alpha(#fff, 20%)
-        color $ui-monokai-text-color
-    &:active
-      transition 0.15s
-      background-color $ui-monokai-button--active-backgroundColor
-      color $ui-monokai-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
-      .item-simple-bottom-tagList-item
-        transition 0.15s
-        background-color alpha(white, 10%)
-        color $ui-monokai-text-color
-
-  .item-simple--active
-    border-color $ui-monokai-borderColor
-    background-color $ui-monokai-button--active-backgroundColor
-    .item-simple-wrapper
-      border-color transparent
+        background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
+        color #c0392b
+        .item-simple-bottom-tagList-item
+          background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
    .item-simple-title
-    .item-simple-title-empty
-    .item-simple-title-icon
-    .item-simple-bottom-time
-      color $ui-monokai-text-color
-    .item-simple-bottom-tagList-item
-      background-color alpha(white, 10%)
-      color $ui-monokai-text-color
-    &:hover
-      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
-      color #c0392b
-      .item-simple-bottom-tagList-item
-        background-color alpha(#fff, 20%)
-  .item-simple-title
-    color $ui-dark-text-color
-    border-bottom $ui-dark-borderColor
-  .item-simple-right
-    float right
-    .item-simple-right-storageName
-      padding-left 4px
-      opacity 0.4
+      color $ui-dark-text-color
+      border-bottom $ui-dark-borderColor
+    .item-simple-right
+      float right
+      .item-simple-right-storageName
+        padding-left 4px
+        opacity 0.4

-body[data-theme="dracula"]
-  .root
-    border-color $ui-dracula-borderColor
-    background-color $ui-dracula-noteList-backgroundColor
+for theme in 'dracula'
+  apply-theme(theme)

-  .item-simple
-    border-color $ui-dracula-borderColor
-    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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -30,36 +30,20 @@ body[data-theme="dark"]
    &:hover
      color #5CB85C

+apply-theme(theme)
+  body[data-theme={theme}]
+    .notification-area
+      background-color none

-body[data-theme="solarized-dark"]
-  .notification-area
-    background-color none
+    .notification-link
+      color get-theme-var(theme, 'text-color')
+      border none
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      &:hover
+        color get-theme-var(theme, 'button--hover-color')

-  .notification-link
-    color $ui-solarized-dark-text-color
-    border none
-    background-color $ui-solarized-dark-button-backgroundColor
-    &:hover
-      color #5CB85C
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-body[data-theme="monokai"]
-  .notification-area
-    background-color none
-
-  .notification-link
-    color $ui-monokai-text-color
-    border none
-    background-color $ui-monokai-button-backgroundColor
-    &:hover
-      color #5CB85C
-
-body[data-theme="dracula"]
-  .notification-area
-    background-color none
-
-  .notification-link
-    color $ui-dracula-text-color
-    border none
-    background-color $ui-dracula-button-backgroundColor
-    &:hover
-      color #ff79c6
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -180,129 +180,51 @@ body[data-theme="dark"]
      .menu-button-label
        color $ui-dark-text-color

+apply-theme(theme)
+  body[data-theme={theme}]
+    .menu-button
+      &:active
+        background-color get-theme-var(theme, 'noteList-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')

-body[data-theme="solarized-dark"]
-  .menu-button
-    &:active
-      background-color $ui-solarized-dark-noteList-backgroundColor
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
-
-  .menu-button--active
-    color $ui-solarized-dark-text-color
-    background-color $ui-solarized-dark-button-backgroundColor
-    .menu-button-label
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
+    .menu-button--active
+      color get-theme-var(theme, 'text-color')
+      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 get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, 'text-color')

-  .menu-button-star--active
-    color $ui-solarized-dark-text-color
-    background-color $ui-solarized-dark-button-backgroundColor
-    .menu-button-label
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
+    .menu-button-star--active
+      color get-theme-var(theme, 'text-color')
+      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 get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, 'text-color')

-  .menu-button-trash--active
-    color $ui-solarized-dark-text-color
-    background-color $ui-solarized-dark-button-backgroundColor
-    .menu-button-label
-      color $ui-solarized-dark-text-color
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
+    .menu-button-trash--active
+      color get-theme-var(theme, 'text-color')
+      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 get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+        .menu-button-label
+          color get-theme-var(theme, 'text-color')

-body[data-theme="monokai"]
-  .menu-button
-    &:active
-      background-color $ui-monokai-noteList-backgroundColor
-      color $ui-monokai-text-color
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-      color $ui-monokai-text-color
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  .menu-button--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-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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -61,7 +61,7 @@
  width 100%
  outline none

-body[data-theme="default"], body[data-theme="white"]  
+body[data-theme="default"], body[data-theme="white"]
  .root--active
    &:hover
      background-color alpha($ui-button--active-backgroundColor, 60%)
@@ -100,103 +100,43 @@ body[data-theme="dark"]
    color $ui-dark-text-color
    transition 0.15s

-body[data-theme="solarized-dark"]
-  .root
-    border-color $ui-solarized-dark-borderColor
-    &:hover
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
-      transition 0.15s
+apply-theme(theme)
+  body[data-theme={theme}]
+    .root
+      border-color get-theme-var(theme, 'borderColor')
+      &:hover
+        background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+        transition 0.15s
+        .deleteButton
+          color get-theme-var(theme, 'text-color')
+          transition 0.15s
+        .button
+          color get-theme-var(theme, 'text-color')
+          transition 0.15s
+
+    .root--active
+      color get-theme-var(theme, 'active-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      border-color get-theme-var(theme, 'borderColor')
      .deleteButton
-        color $ui-solarized-dark-button--active-color
-        transition 0.15s
+        color get-theme-var(theme, 'text-color')
      .button
-        color $ui-solarized-dark-button--active-color
-        transition 0.15s
+        color get-theme-var(theme, 'active-color')

-  .root--active
-    color $ui-solarized-dark-button--active-color
-    background-color $ui-solarized-dark-button-backgroundColor
-    border-color $ui-solarized-dark-borderColor
-    .deleteButton
-      color $ui-solarized-dark-button--active-color
    .button
-      color $ui-solarized-dark-button--active-color
+      border none
+      color $ui-inactive-text-color
+      background-color transparent
+      transition color background-color 0.15s
+      border-left 4px solid transparent

-  .button
-    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
+    .input
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+      color get-theme-var(theme, 'text-color')
      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
-    color $ui-inactive-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  .input
-    background-color $ui-monokai-noteDetail-backgroundColor
-    color $ui-monokai-text-color
-    transition 0.15s
-
-body[data-theme="dracula"]
-  .root
-    border-color $ui-dracula-borderColor
-    &:hover
-      background-color $ui-dracula-noteDetail-backgroundColor
-      transition 0.15s
-      .deleteButton
-        color $ui-dracula-text-color
-        transition 0.15s
-      .button
-        color $ui-dracula-text-color
-        transition 0.15s
-
-  .root--active
-    color $ui-dracula-text-color
-    background-color $ui-dracula-button-backgroundColor
-    border-color $ui-dracula-borderColor
-    .deleteButton
-      color $ui-dracula-text-color
-    .button
-      color $ui-dracula-active-color
-
-  .button
-    border none
-    color $ui-inactive-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-
-  .input
-    background-color $ui-dracula-noteDetail-backgroundColor
-    color $ui-dracula-text-color
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/StorageItem.styl
+++ b/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"]
-  .folderList-item
-    &:hover
-      background-color $ui-solarized-dark-button-backgroundColor
-      color $ui-solarized-dark-text-color
-    &:active
-      color $ui-solarized-dark-text-color
-      background-color $ui-solarized-dark-button-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .folderList-item
+      &:hover
+        background-color get-theme-var(theme, 'button-backgroundColor')
+        color get-theme-var(theme, 'text-color')
+      &:active
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button-backgroundColor')

-  .folderList-item--active
-    @extend .folderList-item
-    color $ui-solarized-dark-text-color
-    background-color $ui-solarized-dark-button-backgroundColor
-    &:active
-      background-color $ui-solarized-dark-button-backgroundColor
-    &:hover
-      color $ui-solarized-dark-text-color
-      background-color $ui-solarized-dark-button-backgroundColor
+    .folderList-item--active
+      @extend .folderList-item
+      color get-theme-var(theme, 'text-color')
+      background-color get-theme-var(theme, 'button-backgroundColor')
+      &:active
+        background-color get-theme-var(theme, 'button-backgroundColor')
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button-backgroundColor')

-body[data-theme="monokai"]
-  .folderList-item
-    &:hover
-      background-color $ui-monokai-button-backgroundColor
-      color $ui-monokai-text-color
-    &:active
-      color $ui-monokai-text-color
-      background-color $ui-monokai-button-backgroundColor
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  .folderList-item--active
-    @extend .folderList-item
-    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
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -94,23 +94,30 @@ body[data-theme="white"]
  .tagList-item-count
    color $ui-text-color

-body[data-theme="dark"]
-  .tagList-item
-    color $ui-dark-inactive-text-color
-    &:hover
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-    &:active
-      color $ui-dark-text-color
-      background-color $ui-dark-button--active-backgroundColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .tagList-item
+      color get-theme-var(theme, 'inactive-text-color')
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
+      &:active
+        color get-theme-var(theme, 'text-color')
+        background-color get-theme-var(theme, 'button--active-backgroundColor')

-  .tagList-item-active
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-text-color
-    &:active
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
-    &:hover
-      color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
-  .tagList-item-count
-    color $ui-dark-button--active-color
+    .tagList-item-active
+      background-color get-theme-var(theme, 'button--active-backgroundColor')
+      color get-theme-var(theme, 'text-color')
+      &:active
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
+      &:hover
+        color get-theme-var(theme, 'text-color')
+        background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
+    .tagList-item-count
+      color get-theme-var(theme, 'button--active-color')
+
+for theme in 'dark'
+  apply-theme(theme)
+
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -54,7 +54,7 @@ body[data-theme="dark"]

  .percentageText
    color $ui-dark-text-color
-  
+
  .todoClearText
    color $ui-dark-text-color

@@ -71,25 +71,19 @@ body[data-theme="solarized-dark"]
  .todoClearText
    color #fdf6e3

-body[data-theme="monokai"]
-  .percentageBar
-    background-color: $ui-monokai-borderColor
+apply-theme(theme)
+  body[data-theme={theme}]
+    .percentageBar
+      background-color: get-theme-var(theme, 'borderColor')

-  .progressBar
-    background-color $ui-monokai-active-color
+    .progressBar
+      background-color get-theme-var(theme, 'active-color')

-  .percentageText
-    color $ui-monokai-text-color
+    .percentageText
+      color get-theme-var(theme, 'text-color')

-body[data-theme="dracula"]
-  .percentageBar
-    background-color $ui-dracula-borderColor
+for theme in 'dracula'
+  apply-theme(theme)

-  .progressBar
-    background-color: $ui-dracula-active-color
-
-  .percentageText
-    color $ui-dracula-text-color
-
-  .percentageText
-    color $ui-dracula-text-color
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -561,159 +561,57 @@ body[data-theme="dark"]
      background-color darken(themeDarkBackground, 5%)
      color themeDarkText

-
-themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor
-themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
-themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
-themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
-themeSolarizedDarkTableBorder = themeDarkBorder
-
-body[data-theme="solarized-dark"]
-  color $ui-solarized-dark-text-color
-  border-color themeDarkBorder
-  background-color themeSolarizedDarkBackground
-  table
-    thead
-      tr
-        background-color themeSolarizedDarkTableHead
-      th
-        border-color themeSolarizedDarkTableBorder
-        &:last-child
-          border-right solid 1px themeSolarizedDarkTableBorder
-    tbody
-      tr:nth-child(2n + 1)
-        background-color themeSolarizedDarkTableOdd
-      tr:nth-child(2n)
-        background-color themeSolarizedDarkTableEven
-      td
-        border-color themeSolarizedDarkTableBorder
-        &:last-child
-          border-right solid 1px themeSolarizedDarkTableBorder
-  dl
+apply-theme(theme)
+  body[data-theme={theme}]
+    color get-theme-var(theme, 'text-color')
    border-color themeDarkBorder
-    background-color themeSolarizedDarkTableHead
-  dt
-    border-color themeDarkBorder
-  dd
-    border-color themeDarkBorder
-    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+    table
+      thead
+        tr
+          background-color get-theme-var(theme, 'table-head-backgroundColor')
+        th
+          border-color get-theme-var(theme, 'table-borderColor')
+          &:last-child
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
+      tbody
+        tr:nth-child(2n + 1)
+          background-color get-theme-var(theme, 'table-odd-backgroundColor')
+        tr:nth-child(2n)
+          background-color get-theme-var(theme, 'table-even-backgroundColor')
+        td
+          border-color get-theme-var(theme, 'table-borderColor')
+          &:last-child
+            border-right solid 1px get-theme-var(theme, 'table-borderColor')
+    kbd
+      background-color get-theme-var(theme, 'kbd-backgroundColor')
+      color get-theme-var(theme, 'kbd-color')

-  pre.fence
-    .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
+    dl
+      border-color themeDarkBorder
+      background-color get-theme-var(theme, 'table-head-backgroundColor')
+    dt
+      border-color themeDarkBorder
+    dd
+      border-color themeDarkBorder
+      background-color get-theme-var(theme, 'noteDetail-backgroundColor')

-  .markdownIt-TOC-wrapper
-    &,
-    &:before
-      background-color darken(themeSolarizedDarkBackground, 15%)
-      color themeDarkText
+    pre.fence
+      .gallery
+        .carousel-main, .carousel-footer
+          background-color get-theme-var(theme, 'noteDetail-backgroundColor')
+        .prev, .next
+          color get-theme-var(theme, 'button--active-color')
+          background-color get-theme-var(theme, 'button-backgroundColor')

-themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor
-themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor
-themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%)
-themeMonokaiTableHead = themeMonokaiTableEven
-themeMonokaiTableBorder = themeDarkBorder
+    .markdownIt-TOC-wrapper
+      &,
+      &:before
+        background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
+        color themeDarkText

-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
+for theme in 'solarized-dark' 'dracula'
+  apply-theme(theme)

-  dl
-    border-color themeDarkBorder
-    background-color themeMonokaiTableHead
-  dt
-    border-color themeDarkBorder
-  dd
-    border-color themeDarkBorder
-    background-color $ui-monokai-noteDetail-backgroundColor
-
-  pre.fence
-    .gallery
-      .carousel-main, .carousel-footer
-        background-color $ui-monokai-noteDetail-backgroundColor
-      .prev, .next
-        color $ui-monokai-button--active-color
-        background-color $ui-monokai-button-backgroundColor
-
-  .markdownIt-TOC-wrapper
-    &,
-    &:before
-      background-color darken(themeMonokaiBackground, 15%)
-      color themeDarkText
-
-themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor
-themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
-themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
-themeDraculaTableHead = themeDraculaTableEven
-themeDraculaTableBorder = themeDarkBorder
-
-body[data-theme="dracula"]
-  color $ui-dracula-text-color
-  border-color themeDarkBorder
-  background-color themeDraculaBackground
-  table
-    thead
-      tr
-        background-color themeDraculaTableHead
-      th
-        border-color themeDraculaTableBorder
-        &:last-child
-          border-right solid 1px themeDraculaTableBorder
-    tbody
-      tr:nth-child(2n + 1)
-        background-color themeDraculaTableOdd
-      tr:nth-child(2n)
-        background-color themeDraculaTableEven
-      td
-        border-color themeDraculaTableBorder
-        &:last-child
-          border-right solid 1px themeDraculaTableBorder
-  kbd
-    background-color themeDarkBackground
-
-  dl
-    border-color themeDarkBorder
-    background-color themeDraculaTableHead
-  dt
-    border-color themeDarkBorder
-  dd
-    border-color themeDarkBorder
-    background-color $ui-dracula-noteDetail-backgroundColor
-
-  pre.fence
-    .gallery
-      .carousel-main, .carousel-footer
-        background-color $ui-dracula-noteDetail-backgroundColor
-      .prev, .next
-        color $ui-dracula-button--active-color
-        background-color $ui-dracula-button-backgroundColor
-
-  .markdownIt-TOC-wrapper
-    &,
-    &:before
-      background-color darken(themeDraculaBackground, 15%)
-      color themeDarkText
+for theme in $themes
+  apply-theme(theme)
--- a/browser/components/render/MermaidRender.js
+++ b/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