initial work for dracula theme done

browser/styles/Detail/TagSelect.styl

@@ -14,18 +14,18 @@
     list-style none
     padding 0
     margin 0
-    
+
     border-radius 4px
     margin .2em 0 0
     background-color $ui-noteList-backgroundColor
     border 1px solid rgba(0,0,0,.3)
     box-shadow .05em .2em .6em rgba(0,0,0,.2)
     text-shadow none
-    
+
     &:empty,
     &[hidden]
       display none
-    
+
     &:before
       content ""
       position absolute
@@ -39,12 +39,12 @@
       border-bottom 0
       -webkit-transform rotate(45deg)
       transform rotate(45deg)
-      
+
     li
       position relative
       padding 6px 18px 6px 10px
       cursor pointer
-    
+
     li[aria-selected="true"]
       background-color alpha($ui-button--active-backgroundColor, 40%)
       color $ui-text-color
@@ -53,15 +53,15 @@ 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
@@ -70,32 +70,49 @@ 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
@@ -104,6 +121,6 @@ body[data-theme="white"]
   .TagSelect
     ul
       background-color $ui-white-noteList-backgroundColor
-      
+
       li[aria-selected="true"]
         background-color $ui-button--active-backgroundColor

browser/styles/index.styl

@@ -383,4 +383,30 @@ modalMonokai()
   width 100%
   background-color $ui-monokai-backgroundColor
   overflow hidden
+  border-radius $modal-border-radius
+
+/******* Dracula theme ********/
+$ui-dracula-backgroundColor = #282a36
+$ui-dracula-noteList-backgroundColor = #282a36
+$ui-dracula-noteDetail-backgroundColor = #282a36
+
+$ui-dracula-text-color = #f8f8f2
+$ui-dracula-active-color = #50fa7b
+
+$ui-dracula-borderColor = #44475a
+
+$ui-dracula-tag-backgroundColor = #50fa7b
+
+$ui-dracula-button-backgroundColor = #44475a
+$ui-dracula-button--active-color = #ff79c6
+$ui-dracula-button--active-backgroundColor = #50fa7b
+$ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%)
+$ui-dracula-button--focus-borderColor = lighten(#bd93f9, 25%)
+
+modalDracula()
+  position relative
+  z-index $modal-z-index
+  width 100%
+  background-color $ui-dracula-backgroundColor
+  overflow hidden
   border-radius $modal-border-radius