dark theme

browser/main/Detail/Detail.styl

@@ -15,3 +15,10 @@
   line-height 72px
   text-align center
   color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+  .empty-message
+    color $ui-dark-inactive-text-color

browser/main/Detail/FolderSelect.styl

@@ -57,10 +57,11 @@
 
 .search-optionList
   position fixed
-  border $ui-border
   z-index 200
   background-color white
   border-radius 2px
+  box-shadow 2px 2px 10px gray
+
 
 .search-optionList-item
   height 34px
@@ -86,3 +87,45 @@
   font-size 10px
   color $ui-inactive-text-color
   margin-left 5px
+
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
+    &:hover
+      color white
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-dark-borderColor
+
+  .root--search, .root--focus
+    @extend .root
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-input--focus-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-input--focus-borderColor
+
+  .idle-label-name-surfix
+    color $ui-dark-inactive-text-color
+
+  .search-input
+    color white
+    background-color transparent
+    border-color $ui-dark-borderColor
+
+  .search-optionList
+    color white
+    background-color $ui-dark-button--hover-backgroundColor
+    box-shadow 2px 2px 10px black
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-dark-inactive-text-color

browser/main/Detail/MarkdownNoteDetail.styl

@@ -29,7 +29,6 @@ $info-height = 75px
   padding 0 25px
   border-radius 2px
   border none
-  color $ui-text-color
   colorDangerButton()
 
 .info-delete-cancelButton
@@ -88,6 +87,7 @@ $info-height = 75px
   top 45px
   padding 5px
   opacity 0
+  border-radius 2px
 
 .body
   absolute bottom left right
@@ -95,3 +95,36 @@ $info-height = 75px
 
 .body-noteEditor
   absolute top bottom left right
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+
+  .info
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right-button
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:hover .info-right-button-tooltip
+      opacity 1
+    &:focus
+      border-color $ui-button--focus-borderColor
+
+  .info-right-button-tooltip
+    darkTooltip()

browser/main/Detail/SnippetNoteDetail.styl

@@ -174,3 +174,95 @@ $info-height = 75px
 .tabView-content
   absolute left right bottom
   top 30px
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+
+  .info
+    border-bottom-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right-button
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:hover .info-right-button-tooltip
+      opacity 1
+    &:focus
+      border-color $ui-button--focus-borderColor
+
+  .info-right-button-tooltip
+    darkTooltip()
+
+  .body-description
+    border-bottom-color $ui-dark-borderColor
+
+  .body-description-textarea
+    background-color $ui-dark-button--hover-backgroundColor
+    color white
+
+  .tabList
+    background-color $ui-button--active-backgroundColor
+    border-bottom-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+
+  .tabList-item
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      .tabList-item-deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color white
+          background-color $ui-dark-button--active-backgroundColor
+  .tabList-item--active
+    border-color $ui-dark-borderColor
+    .tabList-item-button
+      border-color $brand-color
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      .tabList-item-deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color white
+          background-color $ui-dark-button--active-backgroundColor
+  .tabList-item-button
+    navDarkButtonColor()
+    border-left 4px solid transparent
+  .tabList-plusButton
+    navDarkButtonColor()
+  .tabView-top
+    border-color $ui-dark-borderColor
+  .tabView-top-name
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+    background-color $ui-dark-button--hover-backgroundColor
+  .tabView-top-mode
+    border-color $ui-dark-borderColor
+    background-color $dark-default-button-background
+    color $ui-dark-inactive-text-color
+    &:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--hover-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:active:hover
+      background-color $ui-dark-button--active-backgroundColor

browser/main/Detail/StarButton.styl

@@ -7,10 +7,11 @@
     .tooltip
       opacity 1
 
-
 .root--active
   @extend .root
-  color $ui-active-color
+  color $brand-color
+  &:hover
+    color $brand-color !important
   .icon
     transform rotate(-72deg)
 .icon
@@ -23,3 +24,4 @@
   right 65px
   padding 5px
   opacity 0
+  border-radius 2px

browser/main/Detail/TagSelect.styl

@@ -61,3 +61,27 @@
     border-color $ui-input--focus-borderColor = #369DCD
   &:disabled
     background-color $ui-input--disabled-backgroundColor = #DDD
+
+body[data-theme="dark"]
+  .icon
+    color $ui-dark-button-color
+
+  .tag
+    background-color $ui-dark-button--hover-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+    color $ui-button-color
+
+  .tag-label
+    color $ui-dark-text-color
+
+  .newTag
+    border-color $ui-dark-borderColor
+    background-color transparent
+    color $ui-dark-text-color
+    &:focus
+      border-color $ui-input--focus-borderColor = #369DCD
+    &:disabled
+      background-color $ui-input--disabled-backgroundColor = #DDD