Add the Solarized Dark Theme

browser/components/NoteItem.styl

@@ -231,3 +231,77 @@ body[data-theme="dark"]
   .item-bottom-tagList-empty
     color $ui-inactive-text-color
     vertical-align middle
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .item
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)
+      color $ui-solarized-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)
+        color $ui-solarized-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-solarized-dark-noteList-backgroundColor, 10%)
+        color $ui-solarized-dark-text-color  
+
+  .item-wrapper
+    border-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-button--active-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-solarized-dark-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-solarized-dark-text-color
+    &:hover
+      // background-color alpha($ui-solarized-dark-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

browser/components/NoteItemSimple.styl

@@ -143,3 +143,57 @@ body[data-theme="dark"]
 
   .item-simple-title-empty
     color $ui-dark-inactive-text-color
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-solarized-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-solarized-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-solarized-dark-button--active-backgroundColor
+      color $ui-solarized-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-solarized-dark-text-color  
+
+  .item-simple--active
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-solarized-dark-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-solarized-dark-text-color
+    &:hover
+      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)

browser/components/SideNavFilter.styl

@@ -182,4 +182,25 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 50%)
       color #5D9E36
       .menu-button-label
-        color $ui-dark-text-color
+        color $ui-dark-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 alpha($ui-solarized-dark-button--active-backgroundColor, 20%)
+      color $ui-solarized-dark-text-color
+
+  .menu-button--active
+    color #c0392b
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    .menu-button-label
+      color $ui-solarized-dark-text-color
+    &:hover
+      // background-color alpha($ui-solarized-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .menu-button-label
+        color $ui-solarized-dark-text-color

browser/components/markdown.styl

@@ -332,4 +332,9 @@ body[data-theme="dark"]
           border-right solid 1px themeDarkTableBorder
   kbd
     background-color themeDarkBorder
-    color themeDarkText
+    color themeDarkText
+
+body[data-theme="solarized-dark"]
+  color themeDarkText
+  border-color themeDarkBorder
+  background-color $ui-solarized-dark-noteDetail-backgroundColor