Merge pull request #60 from vuepress-reco/feature/orange

feat: add back-color for kanbanniang's messageBox

Author: reco_luan

styles/colorMixin.styl

@@ -3,61 +3,61 @@
 color-mode(accountColor , colorName)
   .reco-theme-{colorName}
     input
-      color accountColor!important; 
+      color accountColor!important;
     a.sidebar-link.active
       border-color: accountColor
-      color accountColor!important; 
+      color accountColor!important;
     blockquote
       border-color: accountColor
     .search-box input
-      border-color: accountColor!important; 
+      border-color: accountColor!important;
       &:focus
-        border-color: accountColor!important; 
+        border-color: accountColor!important;
     .navbar
       box-shadow: 0 1px 6px 0 rgba(32,33,36,.28)
-      .nav-links a:hover, 
+      .nav-links a:hover,
       .nav-links a.router-link-active,
-      .nav-links a:hover .iconfont, 
+      .nav-links a:hover .iconfont,
       .nav-links a.router-link-active .iconfont
-        color accountColor!important; 
-    .home 
+        color accountColor!important;
+    .home
       .hero
         .action-button
-          background-color accountColor!important; 
+          background-color accountColor!important;
           color: #fff!important
-      .footer 
-        a 
+      .footer
+        a
           color accountColor!important;
       .home-blog
         .info-wrapper
           .num
             > div, >div i
               color accountColor!important;
-    .abstract-wrapper .abstract-item .title 
+    .abstract-wrapper .abstract-item .title
       a
-        color accountColor!important; 
+        color accountColor!important;
       a:after
-        background-color accountColor!important; 
+        background-color accountColor!important;
     .back-to-ceiling i
-      color accountColor!important;  
+      color accountColor!important;
     .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
-      border-left: 5px solid accountColor!important; 
-    .tags 
+      border-left: 5px solid accountColor!important;
+    .tags
       .tag-item.active, .tag-item:hover
-        color accountColor!important;   
-    .timeline-wrapper .year-wrapper li:hover 
+        color accountColor!important;
+    .timeline-wrapper .year-wrapper li:hover
       .title
-        color accountColor!important; 
+        color accountColor!important;
       .date::before
-        background: accountColor!important; 
+        background: accountColor!important;
       .date
         color accountColor!important;
     .categories-wrapper
       .category-wrapper
         .category-item
           &:hover, &.active
             background accountColor!important
-            a 
+            a
               span.post-num
                 color accountColor!important
     .color-picker
@@ -83,16 +83,17 @@ color-mode(accountColor , colorName)
         button
           border 1px solid accountColor!important
           color accountColor!important;
-
-
+    .banniang-container
+      .messageBox
+        background-color lighten(accountColor, 50%)!important
 
     @media (min-width: 765px)
-      .nav-item > a:not(.external):hover, 
+      .nav-item > a:not(.external):hover,
       .nav-item > a:not(.external).router-link-active
-        border-color: accountColor!important; 
+        border-color: accountColor!important;
     @media (max-width: 959px)
       .search-box input
-        border-color: transparent!important; 
+        border-color: transparent!important;
 
 for key, value in $themePicker
-  color-mode(value, key)
+  color-mode(value, key)