From b52616c64df1e438a4febf1f55c1751ffc4c213f Mon Sep 17 00:00:00 2001
From: John Ciprian <johnciprian@icloud.com>
Date: Tue, 11 Dec 2018 15:07:07 -0500
Subject: [PATCH 1/5] Changing tabs from material design to traditional
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adding support for “default” interface theme.
- Adding support for “white” interface theme.
- Adding support for “dark” interface theme.
---
 browser/components/SnippetTab.styl         | 109 ++++++++++-----------
 browser/main/Detail/SnippetNoteDetail.styl |  32 +++++-
 browser/styles/index.styl                  |   2 -
 3 files changed, 80 insertions(+), 63 deletions(-)

diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl
index a31b85949..9c785104c 100644
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -3,19 +3,30 @@
   flex 1
   min-width 70px
   overflow hidden
+  border-left 1px solid $ui-borderColor
+  border-top 1px solid $ui-borderColor
   &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .deleteButton
-      color $ui-inactive-text-color
-      &:hover
-        background-color darken($ui-backgroundColor, 15%)
-      &:active
-        color white
-        background-color $ui-active-color
+      color: $ui-text-color
+      visibility visible
+      transition 0.15s
+    .button
+      color: $ui-text-color
+      transition 0.15s
 
 .root--active
   @extend .root
   min-width 100px
-  border-bottom $ui-border
+  background-color alpha($ui-button--active-backgroundColor, 60%)
+  .deleteButton
+    visibility visible
+    color: $ui-text-color
+    transition 0.15s
+  .button
+    font-weight bold
+    color: $ui-text-color
+    transition 0.15s
 
 .button
   width 100%
@@ -27,8 +38,7 @@
   background-color transparent
   transition 0.15s
   border-left 4px solid transparent
-  &:hover
-    background-color $ui-button--hover-backgroundColor
+  color $ui-inactive-text-color
 
 .deleteButton
   position absolute
@@ -42,6 +52,7 @@
   color $ui-inactive-text-color
   background-color transparent
   border-radius 2px
+  visibility hidden
 
 .input
   height 29px
@@ -50,73 +61,68 @@
   width 100%
   outline none
 
+body[data-theme="default"], body[data-theme="white"]  
+  .root--active
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
-    color $ui-dark-text-color
-    border-color $ui-dark-borderColor
+    border-left 1px solid $ui-dark-borderColor
+    border-top 1px solid $ui-dark-borderColor
     &:hover
-      background-color $ui-dark-button--hover-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      .button
+        color $ui-dark-text-color
+        transition 0.15s
       .deleteButton
-        color $ui-dark-inactive-text-color
-        &:hover
-          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
-        &:active
-          color $ui-dark-text-color
-          background-color $ui-dark-button--active-backgroundColor
+        color $ui-dark-text-color
+        transition 0.15s
 
   .root--active
-    color $ui-dark-text-color
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-      .deleteButton
-        color $ui-dark-inactive-text-color
-        &:hover
-          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
-        &:active
-          color $ui-dark-text-color
-          background-color $ui-dark-button--active-backgroundColor
+    background-color $ui-dark-button--active-backgroundColor
+    border-left 1px solid $ui-dark-borderColor
+    border-top 1px solid $ui-dark-borderColor
+    .button
+      color $ui-dark-text-color
+    .deleteButton
+      color $ui-dark-text-color
 
   .button
     border none
-    color $ui-dark-text-color
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-dark-text-color
-      background-color $ui-dark-button--hover-backgroundColor
 
   .input
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-text-color
-
-  .deleteButton
-    color alpha($ui-dark-text-color, 30%)
+    transition 0.15s
 
 body[data-theme="solarized-dark"]
   .root
     color $ui-solarized-dark-text-color
-    border-color $ui-dark-borderColor
+    border-left 1px solid $ui-solarized-dark-borderColor
+    border-top 1px solid $ui-solarized-dark-borderColor
     &:hover
       background-color $ui-solarized-dark-noteDetail-backgroundColor
       .deleteButton
         color $ui-solarized-dark-text-color
-        &:hover
-          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
         &:active
           color $ui-solarized-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .root--active
     color $ui-solarized-dark-text-color
-    border-color $ui-solarized-dark-borderColor
+    background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 20%)
+    border-left 1px solid $ui-solarized-dark-borderColor
+    border-top 1px solid $ui-solarized-dark-borderColor
     &:hover
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
       .deleteButton
         color $ui-solarized-dark-text-color
         &:hover
-          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
+          // background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
           color $ui-solarized-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
@@ -129,7 +135,6 @@ body[data-theme="solarized-dark"]
     border-left 4px solid transparent
     &:hover
       color $ui-solarized-dark-text-color
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
 
   .input
     background-color $ui-solarized-dark-noteDetail-backgroundColor
@@ -146,21 +151,16 @@ body[data-theme="monokai"]
       background-color $ui-monokai-noteDetail-backgroundColor
       .deleteButton
         color $ui-monokai-text-color
-        &:hover
-          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
         &:active
           color $ui-monokai-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .root--active
     color $ui-monokai-text-color
-    border-color $ui-monokai-borderColor
+    background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
     &:hover
-      background-color $ui-monokai-noteDetail-backgroundColor
       .deleteButton
         color $ui-monokai-text-color
-        &:hover
-          background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
         &:active
           color $ui-monokai-text-color
           background-color $ui-dark-button--active-backgroundColor
@@ -173,7 +173,6 @@ body[data-theme="monokai"]
     border-left 4px solid transparent
     &:hover
       color $ui-monokai-text-color
-      background-color $ui-monokai-noteDetail-backgroundColor
 
   .input
     background-color $ui-monokai-noteDetail-backgroundColor
@@ -190,21 +189,16 @@ body[data-theme="dracula"]
       background-color $ui-dracula-noteDetail-backgroundColor
       .deleteButton
         color $ui-dracula-text-color
-        &:hover
-          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
         &:active
           color $ui-dracula-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .root--active
     color $ui-dracula-text-color
-    border-color $ui-dracula-borderColor
+    background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
     &:hover
-      background-color $ui-dracula-noteDetail-backgroundColor
       .deleteButton
         color $ui-dracula-text-color
-        &:hover
-          background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
         &:active
           color $ui-dracula-text-color
           background-color $ui-dark-button--active-backgroundColor
@@ -217,7 +211,6 @@ body[data-theme="dracula"]
     border-left 4px solid transparent
     &:hover
       color $ui-dracula-text-color
-      background-color $ui-dracula-noteDetail-backgroundColor
 
   .input
     background-color $ui-dracula-noteDetail-backgroundColor
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index e3bb31c6b..4757d414a 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -31,7 +31,7 @@
 
 .tabList
   absolute left right
-  top 55px
+  top 70px
   height 30px
   display flex
   background-color $ui-noteDetail-backgroundColor
@@ -57,6 +57,9 @@
 .tabList .tabButton
   navWhiteButtonColor()
   width 30px
+  border-left 1px solid $ui-borderColor
+  border-top 1px solid $ui-borderColor
+  border-right 1px solid $ui-borderColor
 
 .tabView
   absolute left right bottom
@@ -98,17 +101,36 @@
   opacity 0
   transition 0.1s
 
-body[data-theme="white"]
+body[data-theme="white"], body[data-theme="default"]
   .root
     box-shadow $note-detail-box-shadow
     border none
 
+  .tabButton
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      color $ui-text-color
+      transition 0.15s
+
 body[data-theme="dark"]
   .root
     border-left 1px solid $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 
+  .tabList .tabButton
+    border-left 1px solid $ui-dark-borderColor
+    border-top 1px solid $ui-dark-borderColor
+    border-right 1px solid $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+
+  .tabButton
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+      transition 0.15s
+
   .body
     background-color $ui-dark-noteDetail-backgroundColor
 
@@ -118,7 +140,6 @@ body[data-theme="dark"]
     border 1px solid $ui-dark-borderColor
 
   .tabList
-    background-color $ui-button--active-backgroundColor
     background-color $ui-dark-noteDetail-backgroundColor
 
   .tabList .list
@@ -150,6 +171,11 @@ body[data-theme="solarized-dark"]
     color $ui-solarized-dark-text-color
     border 1px solid $ui-solarized-dark-borderColor
 
+  .tabList .tabButton
+    border-left 1px solid $ui-solarized-dark-borderColor
+    border-top 1px solid $ui-solarized-dark-borderColor
+    border-right 1px solid $ui-solarized-dark-borderColor
+    
   .tabList
     background-color $ui-solarized-dark-noteDetail-backgroundColor
     color $ui-solarized-dark-text-color
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 56cb0eab8..b9f9c41e0 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -240,10 +240,8 @@ navWhiteButtonColor()
   &:hover
     background-color alpha($ui-button--active-backgroundColor, 20%)
     transition  0.15s
-    color $ui-text-color
   &:active, &:active:hover
     background-color $ui-button--active-backgroundColor
-    color $ui-text-color
     transition 0.15s
 
 // UI Button

From 58fd2273ea3359904ce20697309090ee928719b7 Mon Sep 17 00:00:00 2001
From: John Ciprian <johnciprian@icloud.com>
Date: Tue, 11 Dec 2018 16:28:02 -0500
Subject: [PATCH 2/5] Adding support for solarized-dark interface theme

---
 browser/components/SnippetTab.styl         | 34 +++++++++-------------
 browser/main/Detail/SnippetNoteDetail.styl |  6 ++++
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl
index 9c785104c..6f858d91e 100644
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -107,25 +107,23 @@ body[data-theme="solarized-dark"]
     border-top 1px solid $ui-solarized-dark-borderColor
     &:hover
       background-color $ui-solarized-dark-noteDetail-backgroundColor
+      transition 0.15s
       .deleteButton
-        color $ui-solarized-dark-text-color
-        &:active
-          color $ui-solarized-dark-text-color
-          background-color $ui-dark-button--active-backgroundColor
+        color $ui-solarized-dark-button--active-color
+        transition 0.15s
+      .button
+        color $ui-solarized-dark-button--active-color
+        transition 0.15s
 
   .root--active
-    color $ui-solarized-dark-text-color
-    background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 20%)
+    color $ui-solarized-dark-button--active-color
+    background-color $ui-solarized-dark-button-backgroundColor
     border-left 1px solid $ui-solarized-dark-borderColor
     border-top 1px solid $ui-solarized-dark-borderColor
-    &:hover
-      .deleteButton
-        color $ui-solarized-dark-text-color
-        &:hover
-          // background-color darken($ui-dark-button--hover-backgroundColor, 15%)
-        &:active
-          color $ui-solarized-dark-text-color
-          background-color $ui-dark-button--active-backgroundColor
+    .deleteButton
+      color $ui-solarized-dark-button--active-color
+    .button
+      color $ui-solarized-dark-button--active-color
 
   .button
     border none
@@ -133,15 +131,11 @@ body[data-theme="solarized-dark"]
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-solarized-dark-text-color
 
   .input
     background-color $ui-solarized-dark-noteDetail-backgroundColor
-    color $ui-solarized-dark-text-color
-
-  .deleteButton
-    color alpha($ui-solarized-dark-text-color, 30%)
+    color $ui-solarized-dark-button--active-color
+    transition 0.15s
 
 body[data-theme="monokai"]
   .root
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 4757d414a..5a81c8437 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -175,6 +175,12 @@ body[data-theme="solarized-dark"]
     border-left 1px solid $ui-solarized-dark-borderColor
     border-top 1px solid $ui-solarized-dark-borderColor
     border-right 1px solid $ui-solarized-dark-borderColor
+
+  .tabButton
+    &:hover
+      color $ui-solarized-dark-button--active-color
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      transition 0.15s
     
   .tabList
     background-color $ui-solarized-dark-noteDetail-backgroundColor

From 29cf4769f5d4a9612aff5338e3b4a845700e7315 Mon Sep 17 00:00:00 2001
From: John Ciprian <johnciprian@icloud.com>
Date: Wed, 12 Dec 2018 19:41:02 -0500
Subject: [PATCH 3/5] Adding support for monokai interface theme

---
 browser/components/SnippetTab.styl         | 36 ++++++++++------------
 browser/main/Detail/SnippetNoteDetail.styl |  8 +++++
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl
index 6f858d91e..a76a11962 100644
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -139,41 +139,37 @@ body[data-theme="solarized-dark"]
 
 body[data-theme="monokai"]
   .root
-    color $ui-monokai-text-color
-    border-color $ui-dark-borderColor
+    border-color $ui-monokai-borderColor
     &:hover
       background-color $ui-monokai-noteDetail-backgroundColor
+      transition 0.15s
       .deleteButton
         color $ui-monokai-text-color
-        &:active
-          color $ui-monokai-text-color
-          background-color $ui-dark-button--active-backgroundColor
-
-  .root--active
-    color $ui-monokai-text-color
-    background-color darken($ui-monokai-noteDetail-backgroundColor, 15%)
-    &:hover
-      .deleteButton
+        transition 0.15s
+      .button
         color $ui-monokai-text-color
-        &:active
-          color $ui-monokai-text-color
-          background-color $ui-dark-button--active-backgroundColor
+        transition 0.15s
 
+  .root--active
+    color $ui-monokai-active-color
+    background-color $ui-monokai-button-backgroundColor
+    border-color $ui-monokai-borderColor
+    .deleteButton
+      color $ui-monokai-text-color
+    .button
+      color $ui-monokai-active-color
+        
   .button
     border none
-    color $ui-monokai-text-color
+    color $ui-inactive-text-color
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-monokai-text-color
 
   .input
     background-color $ui-monokai-noteDetail-backgroundColor
     color $ui-monokai-text-color
-
-  .deleteButton
-    color alpha($ui-monokai-text-color, 30%)
+    transition 0.15s
 
 body[data-theme="dracula"]
   .root
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 5a81c8437..1366e8699 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -199,6 +199,14 @@ body[data-theme="monokai"]
     color $ui-monokai-text-color
     border 1px solid $ui-monokai-borderColor
 
+  .tabList .tabButton
+    border-color $ui-monokai-borderColor
+
+  .tabButton
+    &:hover
+      color $ui-monokai-text-color
+      background-color $ui-monokai-noteDetail-backgroundColor
+
   .tabList
     background-color $ui-monokai-noteDetail-backgroundColor
     color $ui-monokai-text-color

From cfcaa58b719b839d16b75bc99967bea9c4582b86 Mon Sep 17 00:00:00 2001
From: John Ciprian <johnciprian@icloud.com>
Date: Wed, 12 Dec 2018 19:43:01 -0500
Subject: [PATCH 4/5] Optimizing css for dark and solarized-dark themes

---
 browser/components/SnippetTab.styl         | 9 +++------
 browser/main/Detail/SnippetNoteDetail.styl | 8 ++------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl
index a76a11962..03d6409b3 100644
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -68,7 +68,7 @@ body[data-theme="default"], body[data-theme="white"]
 
 body[data-theme="dark"]
   .root
-    border-left 1px solid $ui-dark-borderColor
+    border-color $ui-dark-borderColor
     border-top 1px solid $ui-dark-borderColor
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
@@ -102,9 +102,7 @@ body[data-theme="dark"]
 
 body[data-theme="solarized-dark"]
   .root
-    color $ui-solarized-dark-text-color
-    border-left 1px solid $ui-solarized-dark-borderColor
-    border-top 1px solid $ui-solarized-dark-borderColor
+    border-color $ui-solarized-dark-borderColor
     &:hover
       background-color $ui-solarized-dark-noteDetail-backgroundColor
       transition 0.15s
@@ -118,8 +116,7 @@ body[data-theme="solarized-dark"]
   .root--active
     color $ui-solarized-dark-button--active-color
     background-color $ui-solarized-dark-button-backgroundColor
-    border-left 1px solid $ui-solarized-dark-borderColor
-    border-top 1px solid $ui-solarized-dark-borderColor
+    border-color $ui-solarized-dark-borderColor
     .deleteButton
       color $ui-solarized-dark-button--active-color
     .button
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 1366e8699..157430518 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -119,9 +119,7 @@ body[data-theme="dark"]
     box-shadow none
 
   .tabList .tabButton
-    border-left 1px solid $ui-dark-borderColor
-    border-top 1px solid $ui-dark-borderColor
-    border-right 1px solid $ui-dark-borderColor
+    border-color $ui-dark-borderColor
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
 
@@ -172,9 +170,7 @@ body[data-theme="solarized-dark"]
     border 1px solid $ui-solarized-dark-borderColor
 
   .tabList .tabButton
-    border-left 1px solid $ui-solarized-dark-borderColor
-    border-top 1px solid $ui-solarized-dark-borderColor
-    border-right 1px solid $ui-solarized-dark-borderColor
+    border-color $ui-solarized-dark-borderColor
 
   .tabButton
     &:hover

From ec506e71a44d39f57e6b7fb2d339e387c7f145c3 Mon Sep 17 00:00:00 2001
From: John Ciprian <johnciprian@icloud.com>
Date: Wed, 12 Dec 2018 20:56:31 -0500
Subject: [PATCH 5/5] Adding support for dracula interface theme

---
 browser/components/SnippetTab.styl         | 33 +++++++++-------------
 browser/main/Detail/SnippetNoteDetail.styl |  8 ++++++
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl
index 03d6409b3..d101f3183 100644
--- a/browser/components/SnippetTab.styl
+++ b/browser/components/SnippetTab.styl
@@ -170,38 +170,33 @@ body[data-theme="monokai"]
 
 body[data-theme="dracula"]
   .root
-    color $ui-dracula-text-color
-    border-color $ui-dark-borderColor
+    border-color $ui-dracula-borderColor
     &:hover
       background-color $ui-dracula-noteDetail-backgroundColor
+      transition 0.15s
       .deleteButton
         color $ui-dracula-text-color
-        &:active
-          color $ui-dracula-text-color
-          background-color $ui-dark-button--active-backgroundColor
+        transition 0.15s
+      .button
+        color $ui-dracula-text-color
+        transition 0.15s
 
   .root--active
     color $ui-dracula-text-color
-    background-color darken($ui-dracula-noteDetail-backgroundColor, 15%)
-    &:hover
-      .deleteButton
-        color $ui-dracula-text-color
-        &:active
-          color $ui-dracula-text-color
-          background-color $ui-dark-button--active-backgroundColor
+    background-color $ui-dracula-button-backgroundColor
+    border-color $ui-dracula-borderColor
+    .deleteButton
+      color $ui-dracula-text-color
+    .button
+      color $ui-dracula-active-color
 
   .button
     border none
-    color $ui-dracula-text-color
+    color $ui-inactive-text-color
     background-color transparent
     transition color background-color 0.15s
     border-left 4px solid transparent
-    &:hover
-      color $ui-dracula-text-color
 
   .input
     background-color $ui-dracula-noteDetail-backgroundColor
-    color $ui-dracula-text-color
-
-  .deleteButton
-    color alpha($ui-dracula-text-color, 30%)
\ No newline at end of file
+    color $ui-dracula-text-color
\ No newline at end of file
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 157430518..1af936455 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -220,6 +220,14 @@ body[data-theme="dracula"]
     color $ui-dracula-text-color
     border 1px solid $ui-dracula-borderColor
 
+  .tabList .tabButton
+    border-color $ui-dracula-borderColor
+
+  .tabButton
+    &:hover
+      color $ui-dracula-text-color
+      background-color $ui-dracula-noteDetail-backgroundColor
+
   .tabList
     background-color $ui-dracula-noteDetail-backgroundColor
     color $ui-dracula-text-color
\ No newline at end of file