initial work for dracula theme done

browser/main/modals/CreateFolderModal.styl

@@ -128,3 +128,29 @@ body[data-theme="monokai"]
 
   .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/NewNoteModal.styl

@@ -97,3 +97,20 @@ body[data-theme="monokai"]
 
   .description
     color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    background-color transparent
+
+  .header
+    color $ui-dracula-text-color
+
+  .control-button
+    border-color $ui-dracula-borderColor
+    color $ui-dracula-text-color
+    background-color transparent
+    &:focus
+      colorDraculaPrimaryButton()
+
+  .description
+    color $ui-dracula-text-color

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -127,7 +127,7 @@ colorDarkControl()
   border-color $ui-dark-borderColor
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
-  
+
 colorSolarizedDarkControl()
   border none
   background-color $ui-solarized-dark-button-backgroundColor
@@ -138,6 +138,10 @@ colorMonokaiControl()
   background-color $ui-monokai-button-backgroundColor
   color $ui-monokai-text-color
 
+colorDraculaControl()
+  border none
+  background-color $ui-dracula-button-backgroundColor
+  color $ui-dracula-text-color
 
 body[data-theme="dark"]
   .root
@@ -165,27 +169,27 @@ body[data-theme="dark"]
   .group-section-control
     select, .group-section-control-input
       colorDarkControl()
-     
-      
+
+
 body[data-theme="solarized-dark"]
   .root
     color $ui-solarized-dark-text-color
 
   .group-header
     color $ui-solarized-dark-text-color
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
 
   .group-header2
     color $ui-solarized-dark-text-color
 
   .group-section-control-input
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
 
   .group-control
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
   .group-control-leftButton
     colorDarkDefaultButton()
-    border-color $ui-solarized-dark-borderColor 
+    border-color $ui-solarized-dark-borderColor
   .group-control-rightButton
     colorSolarizedDarkPrimaryButton()
   .group-hint
@@ -200,19 +204,19 @@ body[data-theme="monokai"]
 
   .group-header
     color $ui-monokai-text-color
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
 
   .group-header2
     color $ui-monokai-text-color
 
   .group-section-control-input
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
 
   .group-control
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
   .group-control-leftButton
     colorDarkDefaultButton()
-    border-color $ui-monokai-borderColor 
+    border-color $ui-monokai-borderColor
   .group-control-rightButton
     colorMonokaiPrimaryButton()
   .group-hint
@@ -220,3 +224,30 @@ body[data-theme="monokai"]
   .group-section-control
     select, .group-section-control-input
       colorMonokaiControl()
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+
+  .group-header
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor
+
+  .group-header2
+    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

@@ -29,7 +29,7 @@ p
 body[data-theme="dark"]
   p
     color $ui-dark-text-color
-    
+
 body[data-theme="solarized-dark"]
   .root
     color $ui-solarized-dark-text-color
@@ -41,3 +41,9 @@ body[data-theme="monokai"]
     color $ui-monokai-text-color
   p
     color $ui-monokai-text-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+  p
+    color $ui-dracula-text-color

browser/main/modals/PreferencesModal/FolderItem.styl

@@ -149,3 +149,26 @@ body[data-theme="monokai"]
 
   .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

@@ -60,7 +60,7 @@
 body[data-theme="dark"]
   .root
     color alpha($tab--dark-text-color, 80%)
-    
+
 
 body[data-theme="solarized-dark"]
   .root
@@ -75,3 +75,10 @@ body[data-theme="monokai"]
 .list
   a
     color $ui-monokai-active-color
+
+body[data-theme="dracula"]
+  .root
+    color $ui-dracula-text-color
+.list
+  a
+    color $ui-dracula-active-color

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -90,7 +90,7 @@ body[data-theme="dark"]
     background-color $dark-primary-button-background--active
     &:hover
       color white
-      
+
 
 body[data-theme="solarized-dark"]
   .root
@@ -139,3 +139,27 @@ body[data-theme="monokai"]
     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

@@ -196,3 +196,19 @@ body[data-theme="monokai"]
     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/StoragesTab.styl

@@ -158,7 +158,7 @@ body[data-theme="dark"]
   .addStorage-body-control-cancelButton
     colorDarkDefaultButton()
     border-color $ui-dark-borderColor
-    
+
 
 
 body[data-theme="solarized-dark"]
@@ -236,3 +236,41 @@ body[data-theme="monokai"]
   .addStorage-body-control-cancelButton
     colorDarkDefaultButton()
     border-color $ui-monokai-borderColor
+
+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

browser/main/modals/PreferencesModal/UiTab.js

@@ -187,6 +187,7 @@ class UiTab extends React.Component {
                 <option value='white'>{i18n.__('White')}</option>
                 <option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
                 <option value='monokai'>{i18n.__('Monokai')}</option>
+                <option value='dracula'>{i18n.__('Dracula')}</option>
                 <option value='dark'>{i18n.__('Dark')}</option>
               </select>
             </div>