diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index 4067a6cde..017ef6d0f 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -321,3 +321,76 @@ body[data-theme="solarized-dark"]
   .item-bottom-tagList-empty
     color $ui-inactive-text-color
     vertical-align middle
+
+body[data-theme="monokai"]
+  .root
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-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
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-bottom-tagList-item
+        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
+
+  .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-text-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 #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 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
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index 3097b82c9..91c28c2ab 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -212,3 +212,61 @@ body[data-theme="solarized-dark"]
   .item-simple-right-storageName
     padding-left 4px
     opacity 0.4
+
+body[data-theme="monokai"]
+  .root
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-monokai-text-color
+      .item-simple-title
+      .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(#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-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-monokai-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-monokai-text-color
+
+  .item-simple--active
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-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-right
+  float right
+  .item-simple-right-storageName
+    padding-left 4px
+    opacity 0.4
diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl
index 0f77acbbc..0365d8c98 100644
--- a/browser/components/RealtimeNotification.styl
+++ b/browser/components/RealtimeNotification.styl
@@ -41,3 +41,14 @@ body[data-theme="solarized-dark"]
     background-color $ui-solarized-dark-button-backgroundColor
     &:hover
       color #5CB85C
+
+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
\ No newline at end of file
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 8a9a350d0..c1b378b88 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -222,4 +222,46 @@ body[data-theme="solarized-dark"]
       background-color $ui-solarized-dark-button-backgroundColor
       color $ui-solarized-dark-text-color
       .menu-button-label
-        color $ui-solarized-dark-text-color
\ No newline at end of file
+        color $ui-solarized-dark-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
+
+  .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
\ No newline at end of file
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index 842f8d669..ece97008e 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -138,3 +138,22 @@ body[data-theme="solarized-dark"]
     &:hover
       color $ui-solarized-dark-text-color
       background-color $ui-solarized-dark-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
+
+  .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
\ No newline at end of file
diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl
index 329663f9c..6116cd58c 100644
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -47,5 +47,15 @@ body[data-theme="solarized-dark"]
   .progressBar
     background-color: #2aa198
 
+  .percentageText
+    color #fdf6e3
+
+body[data-theme="monokai"]
+  .percentageBar
+    background-color #f92672
+
+  .progressBar
+    background-color: #373831
+
   .percentageText
     color #fdf6e3
\ No newline at end of file
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index cc6d7d924..373b321e7 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -371,3 +371,30 @@ body[data-theme="solarized-dark"]
         border-color themeSolarizedDarkTableBorder
         &:last-child
           border-right solid 1px themeSolarizedDarkTableBorder
+
+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 $ui-monokai-noteDetail-backgroundColor
+  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
\ No newline at end of file
diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl
index d4c4100c6..49a634f38 100644
--- a/browser/main/Detail/Detail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -30,3 +30,10 @@ body[data-theme="solarized-dark"]
     border-left 1px solid $ui-solarized-dark-borderColor
   .empty-message
     color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    background-color $ui-monokai-noteDetail-backgroundColor
+    border-left 1px solid $ui-monokai-borderColor
+  .empty-message
+    color $ui-monokai-text-color
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index 31930fe60..cfdc2734b 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -133,3 +133,29 @@ body[data-theme="dark"]
       color $ui-dark-button--active-color
   .search-optionList-item-name-surfix
     color $ui-dark-inactive-text-color
+
+body[data-theme="monokai"]
+ .root
+    color $ui-dark-text-color
+    &:hover
+      color white
+      background-color $ui-monokai-button--hover-backgroundColor
+      border-color $ui-monokai-borderColor
+
+  .search-optionList
+    color white
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-button-backgroundColor
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-monokai-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-monokai-button--active-backgroundColor
+    color $ui-monokai-button--active-color
+    &:hover
+      background-color $ui-monokai-button--active-backgroundColor
+      color $ui-monokai-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-monokai-inactive-text-color
diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl
index d90dea494..480441bd3 100644
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -215,3 +215,43 @@ body[data-theme="solarized-dark"]
       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
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index ad20f0f2c..b27dc80ee 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -71,3 +71,8 @@ body[data-theme="solarized-dark"]
   .root
     border-left 1px solid $ui-solarized-dark-borderColor
     background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+body[data-theme="monokai"]
+  .root
+    border-left 1px solid $ui-monokai-borderColor
+    background-color $ui-monokai-noteDetail-backgroundColor
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index bc3c94623..8d4542030 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -98,3 +98,7 @@ body[data-theme="solarized-dark"]
     border-color $ui-solarized-dark-borderColor
     background-color $ui-solarized-dark-noteDetail-backgroundColor
     
+body[data-theme="monokai"]
+  .info
+    border-color $ui-monokai-borderColor
+    background-color $ui-monokai-noteDetail-backgroundColor
\ No newline at end of file
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 789d51860..f8ca48ccb 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -152,4 +152,21 @@ body[data-theme="solarized-dark"]
 
   .tabList
     background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-text-color
\ No newline at end of file
+    color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    border-left 1px solid $ui-monokai-borderColor
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-monokai-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
+    border 1px solid $ui-monokai-borderColor
+
+  .tabList
+    background-color $ui-monokai-noteDetail-backgroundColor
+    color $ui-monokai-text-color
\ No newline at end of file
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index 18d4d2e02..0ff4c6a34 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -81,4 +81,20 @@ body[data-theme="solarized-dark"]
   .newTag
     border-color none
     background-color transparent
-    color $ui-solarized-dark-text-color
\ No newline at end of file
+    color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .tag
+    background-color $ui-monokai-button-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+
+  .tag-label
+    color $ui-monokai-text-color
+    
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-monokai-text-color
diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl
index 185a780c5..2e7ab5fac 100644
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -56,3 +56,10 @@ body[data-theme="solarized-dark"]
     .active
       background-color #1EC38B
       box-shadow 2px 0px 7px #222222
+
+body[data-theme="monokai"]
+  .control-toggleModeButton
+      background-color #272822
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #222222
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 9f1c06e71..9c15a0fec 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -144,7 +144,8 @@ class Main extends React.Component {
     const supportedThemes = [
       'dark',
       'white',
-      'solarized-dark'
+      'solarized-dark',
+      'monokai'
     ]
 
     if (supportedThemes.indexOf(config.ui.theme) !== -1) {
diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl
index 81ff7e8d4..e8e4b5f07 100644
--- a/browser/main/NewNoteButton/NewNoteButton.styl
+++ b/browser/main/NewNoteButton/NewNoteButton.styl
@@ -74,4 +74,8 @@ body[data-theme="dark"]
 
 body[data-theme="solarized-dark"]
   .root, .root--expanded
-    background-color $ui-solarized-dark-noteList-backgroundColor
\ No newline at end of file
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+body[data-theme="monokai"]
+  .root, .root--expanded
+    background-color $ui-monokai-noteList-backgroundColor
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 312f5143b..ea2612084 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -113,4 +113,28 @@ body[data-theme="solarized-dark"]
   .control-button--active
     color $ui-solarized-dark-text-color
     &:active
-      color $ui-solarized-dark-text-color
\ No newline at end of file
+      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
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 666ae0cdc..ecab70d09 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -117,3 +117,8 @@ body[data-theme="solarized-dark"]
   .root, .root--folded
     background-color $ui-solarized-dark-backgroundColor
     border-right 1px solid $ui-solarized-dark-borderColor
+
+body[data-theme="monokai"]
+  .root, .root--folded
+    background-color $ui-monokai-backgroundColor
+    border-right 1px solid $ui-monokai-borderColor
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 9f189fec7..52cc4b021 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -69,3 +69,14 @@ body[data-theme="dark"]
     navDarkButtonColor()
     border-color $ui-dark-borderColor
     border-left 1px solid $ui-dark-borderColor
+
+body[data-theme="monokai"]
+   navButtonColor()
+  .zoom
+    border-color $ui-dark-borderColor
+    color $ui-monokai-text-color
+    &:hover
+      transition 0.15s
+      color $ui-monokai-active-color
+    &:active
+      color $ui-monokai-active-color
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 0956571ff..7654f66f8 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -234,3 +234,25 @@ body[data-theme="solarized-dark"]
     input
       background-color $ui-solarized-dark-noteList-backgroundColor
       color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root, .root--expanded
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control
+    border-color $ui-monokai-borderColor
+  .control-search
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-monokai-inactive-text-color
+    background-color $ui-monokai-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-monokai-noteList-backgroundColor
+    input
+      background-color $ui-monokai-noteList-backgroundColor
+      color $ui-monokai-text-color
diff --git a/browser/main/global.styl b/browser/main/global.styl
index 613c76112..7025163f0 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -134,4 +134,10 @@ body[data-theme="solarized-dark"]
   .sortableItemHelper
     color: $ui-solarized-dark-text-color
 
+body[data-theme="monokai"]
+  .ModalBase
+    .modalBack
+      background-color $ui-monokai-backgroundColor
+  .sortableItemHelper
+    color: $ui-monokai-text-color
 
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 3e1a21626..ee8a57c78 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -135,6 +135,8 @@ function set (updates) {
     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 {
     document.body.setAttribute('data-theme', 'default')
   }
diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl
index 45f2e852c..1b96e1237 100644
--- a/browser/main/modals/CreateFolderModal.styl
+++ b/browser/main/modals/CreateFolderModal.styl
@@ -102,3 +102,29 @@ body[data-theme="solarized-dark"]
 
   .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()
diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl
index 748ab88c5..db14133f6 100644
--- a/browser/main/modals/NewNoteModal.styl
+++ b/browser/main/modals/NewNoteModal.styl
@@ -81,3 +81,19 @@ body[data-theme="solarized-dark"]
   .description
     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
+    color $ui-monokai-text-color
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index f6f7ace96..0e5f81fb6 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -133,6 +133,11 @@ colorSolarizedDarkControl()
   background-color $ui-solarized-dark-button-backgroundColor
   color $ui-solarized-dark-text-color
 
+colorMonokaiControl()
+  border none
+  background-color $ui-monokai-button-backgroundColor
+  color $ui-monokai-text-color
+
 
 body[data-theme="dark"]
   .root
@@ -189,4 +194,29 @@ body[data-theme="solarized-dark"]
     select, .group-section-control-input
       colorSolarizedDarkControl()
 
+body[data-theme="monokai"]
+  .root
+    color $ui-monokai-text-color
+
+  .group-header
+    color $ui-monokai-text-color
+    border-color $ui-monokai-borderColor 
+
+  .group-header2
+    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()
diff --git a/browser/main/modals/PreferencesModal/Crowdfunding.styl b/browser/main/modals/PreferencesModal/Crowdfunding.styl
index 930c33f0b..3d4af539b 100644
--- a/browser/main/modals/PreferencesModal/Crowdfunding.styl
+++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl
@@ -33,4 +33,10 @@ body[data-theme="solarized-dark"]
   .root
     color $ui-solarized-dark-text-color
   p
-    color $ui-solarized-dark-text-color
\ No newline at end of file
+    color $ui-solarized-dark-text-color
+
+body[data-theme="monokai"]
+  .root
+    color $ui-monokai-text-color
+  p
+    color $ui-monokai-text-color
diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl
index acc4cbfb7..8bcf2b02c 100644
--- a/browser/main/modals/PreferencesModal/FolderItem.styl
+++ b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -126,3 +126,26 @@ body[data-theme="solarized-dark"]
 
   .folderItem-right-dangerButton
     colorSolarizedDarkPrimaryButton()
+
+body[data-theme="monokai"]
+  .folderItem
+    &:hover
+      background-color $ui-monokai-button-backgroundColor
+
+  .folderItem-left-danger
+    color $danger-color
+
+  .folderItem-left-key
+    color $ui-dark-inactive-text-color
+
+  .folderItem-left-colorButton
+    colorMonokaiPrimaryButton()
+
+  .folderItem-right-button
+    colorMonokaiPrimaryButton()
+
+  .folderItem-right-confirmButton
+    colorMonokaiPrimaryButton()
+
+  .folderItem-right-dangerButton
+    colorMonokaiPrimaryButton()
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl
index cc04a10f5..491fc4d44 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -68,3 +68,10 @@ body[data-theme="solarized-dark"]
 .list
   a
     color $ui-solarized-dark-active-color
+
+body[data-theme="monokai"]
+  .root
+    color $ui-monokai-text-color
+.list
+  a
+    color $ui-monokai-active-color
diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl
index 57b5dbad6..d21f6c284 100644
--- a/browser/main/modals/PreferencesModal/PreferencesModal.styl
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -116,3 +116,26 @@ body[data-theme="solarized-dark"]
     &:hover
       color white
 
+body[data-theme="monokai"]
+  .root
+    background-color transparent
+  .top-bar
+    background-color transparent
+    border-color $ui-monokai-borderColor
+    p
+      color $ui-monokai-text-color
+  .nav
+    background-color transparent
+    border-color $ui-monokai-borderColor
+  .nav-button
+    background-color transparent
+    color $ui-monokai-text-color
+    &:hover
+      color $ui-monokai-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color $ui-monokai-button--active-color
+    background-color $ui-monokai-button--active-backgroundColor
+    &:hover
+      color white
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl
index 230f0aed3..9804d7e74 100644
--- a/browser/main/modals/PreferencesModal/StoragesTab.styl
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -199,3 +199,40 @@ body[data-theme="solarized-dark"]
     colorDarkDefaultButton()
     border-color $ui-solarized-dark-borderColor
 
+body[data-theme="monokai"]
+  .root
+    color $ui-monokai-text-color
+
+  .folderList-item
+    border-bottom $ui-monokai-borderColor
+
+  .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
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 213387310..a607f548b 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -172,6 +172,7 @@ class UiTab extends React.Component {
                 <option value='default'>{i18n.__('Default')}</option>
                 <option value='white'>{i18n.__('White')}</option>
                 <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
+                <option value='monokai'>{i18n.__('Monokai')}</option>
                 <option value='dark'>{i18n.__('Dark')}</option>
               </select>
             </div>
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 6fb208b1b..7d32e77a7 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -118,6 +118,16 @@ colorSolarizedDarkPrimaryButton()
   &:active:hover
     background-color $dark-primary-button-background--active
 
+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
+
 
 // Danger button(Brand color)
 $danger-button-background = #c9302c
@@ -348,3 +358,29 @@ modalSolarizedDark()
   background-color $ui-solarized-dark-backgroundColor
   overflow hidden
   border-radius $modal-border-radius
+
+/******* Monokai theme ********/
+$ui-monokai-backgroundColor = #272822
+$ui-monokai-noteList-backgroundColor = #272822
+$ui-monokai-noteDetail-backgroundColor = #272822
+
+$ui-monokai-text-color = #f8f8f2
+$ui-monokai-active-color = #f92672
+
+$ui-monokai-borderColor = #373831
+
+$ui-monokai-tag-backgroundColor = #f92672
+
+$ui-monokai-button-backgroundColor = #373831
+$ui-monokai-button--active-color = white
+$ui-monokai-button--active-backgroundColor = #f92672
+$ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
+$ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%)
+
+modalmonokai()
+  position relative
+  z-index $modal-z-index
+  width 100%
+  background-color $ui-monokai-backgroundColor
+  overflow hidden
+  border-radius $modal-border-radius
\ No newline at end of file