diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
index 36ca24e100..71840b79d2 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css
@@ -10,7 +10,7 @@ body a {
   text-decoration: none;
 }
 body .btn-primary {
-  background-color: #b84297 !important;
+  background-color: #E83090 !important;
   font-size: 12px;
 }
 body .for-mobile {
@@ -298,7 +298,7 @@ body.scrolledMore .alert-criteria p.alert-p {
 }
 .docs-page .docs-sidebar .docs-tree-list ul li.selected-tree > span .fa {
   transform: rotate(90deg);
-  color: #b84297;
+  color: #E83090;
 }
 .docs-page .docs-sidebar .docs-tree-list ul li.selected-tree.last-link > span .fa {
   transform: rotate(0deg);
@@ -482,7 +482,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   margin-bottom: 1rem;
   margin-left: 0;
   padding: 1em 1.5em;
-  background-color: #e3edf2;
+  background-color: rgb(227, 237, 242);
   font-size: 1em;
   border-radius: 12px;
   color: #385766;
@@ -549,7 +549,7 @@ body.scrolledMore .alert-criteria p.alert-p {
   background-color: #f4f6fa;
   border-color: #f4f6fa;
   border-radius: 12px;
-  background: rgba(190, 223, 238, 0.82);
+  background: hsla(199, 59%, 84%, 0.82);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   z-index: 3;
@@ -600,16 +600,16 @@ body.scrolledMore .alert-criteria p.alert-p {
   font-weight: normal;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active {
-  border-left: 1px solid #b84297;
+  border-left: 1px solid #E83090;
   background: none;
-  color: #b84297;
+  color: #E83090;
   font-weight: normal;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active {
-  color: #b84297;
+  color: #E83090;
 }
 .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active {
-  color: #b84297;
+  color: #E83090;
 }
 .docs-page .docs-page-index .docs-inner-anchors .index-scroll {
   margin-left: -30px;
@@ -667,7 +667,7 @@ body.scrolledMore .alert-criteria p.alert-p {
     display: none;
   }
   body .close-mmenu,
-body .close-dmenu {
+  body .close-dmenu {
     position: absolute;
     top: -78px;
     left: 25px;
@@ -720,7 +720,7 @@ body .close-dmenu {
     display: none;
   }
   .docs-page .docs-sidebar .docs-top .navbar.navbar-logo .navbar-collapse {
-    background: #38003d;
+    background: rgb(56, 0, 61);
     position: fixed;
     top: 86px;
     left: 0;
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
index deba3d39c3..9d5de59393 100644
--- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
+++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss
@@ -16,7 +16,7 @@ body {
     }
 
     .btn-primary {
-        background-color: #b84297 !important;
+        background-color: #E83090 !important;
         font-size: 12px;
     }
 
@@ -368,7 +368,7 @@ body {
                         > span {
                             .fa {
                                 transform: rotate(90deg);
-                                color: #b84297;
+                                color: #E83090;
                             }
                         }
 
@@ -734,9 +734,9 @@ body {
                         font-weight: normal;
 
                         &.active {
-                            border-left: 1px solid #b84297;
+                            border-left: 1px solid #E83090;
                             background: none;
-                            color: #b84297;
+                            color: #E83090;
                             font-weight: normal;
                         }
                     }
@@ -744,14 +744,14 @@ body {
                     .nav-pills {
                         .nav-link {
                             &.active {
-                                color: #b84297;
+                                color: #E83090;
                             }
                         }
 
                         .nav-pills {
                             .nav-link {
                                 &.active {
-                                    color: #b84297;
+                                    color: #E83090;
                                 }
                             }
                         }