modify: change background-color for note-detail component

browser/components/markdown.styl

@@ -55,6 +55,7 @@ body
   line-height 1.6
   overflow-x hidden
   user-select all
+  background-color $ui-noteDetail-backgroundColor
   .katex
     font 400 1.2em 'KaTeX_Main'
     line-height 1.2em
@@ -273,13 +274,14 @@ table
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #DDDDDD
 themeDarkBorder = lighten(themeDarkBackground, 20%)
-themeDarkPreview = #282C34
+themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
 themeDarkTableEven = darken(themeDarkPreview, 10%)
 themeDarkTableHead = themeDarkTableEven
 themeDarkTableBorder = themeDarkBorder
 themeDarkModalButtonDefault = themeDarkPreview
 themeDarkModalButtonDanger = #BF360C
+
 body[data-theme="dark"]
   color themeDarkText
   border-color themeDarkBorder

browser/main/Detail/NoteDetailInfo.styl

@@ -4,7 +4,7 @@ $info-height = 60px
   absolute top left right
   height $info-height
   border-bottom $ui-border
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .info-left
   float left
@@ -49,7 +49,7 @@ $info-height = 60px
 body[data-theme="dark"]
   .info
     border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .info-delete
     color $ui-dark-text-color

browser/main/Detail/SnippetNoteDetail.styl

@@ -24,6 +24,7 @@
   border none
   padding 10px
   line-height 1.6
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
@@ -31,7 +32,7 @@
   height 30px
   border-bottom $ui-border
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList .list
   flex 1
@@ -71,13 +72,13 @@ body[data-theme="dark"]
     border-bottom-color $ui-dark-borderColor
 
   .body .description textarea
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     color white
 
   .tabList
     background-color $ui-button--active-backgroundColor
     border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .tabList .list
     border-color $ui-dark-borderColor

browser/main/StatusBar/StatusBar.styl

@@ -1,7 +1,7 @@
 .root
   absolute bottom left right
   height $statusBar-height
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
   border-top $ui-border
   display flex
 
@@ -39,7 +39,7 @@
 
 body[data-theme="dark"]
   .root
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     border-color $ui-dark-borderColor
 
   .zoom