diff --git a/src/component/badge/index.less b/src/component/badge/index.less
index aa631f90..54d81a8e 100644
--- a/src/component/badge/index.less
+++ b/src/component/badge/index.less
@@ -32,4 +32,4 @@
   border-style: solid;
   background-color: #fff;
   color: #666;
-}
+}
\ No newline at end of file
diff --git a/src/component/body/index.less b/src/component/body/index.less
index 2fd17e3a..35ee7cb3 100644
--- a/src/component/body/index.less
+++ b/src/component/body/index.less
@@ -7,4 +7,4 @@
   height: 100%;
   box-sizing: border-box;
   min-height: 300px;
-}
+}
\ No newline at end of file
diff --git a/src/theme/index.less b/src/theme/index.less
index d7075598..aec1541d 100644
--- a/src/theme/index.less
+++ b/src/theme/index.less
@@ -150,7 +150,7 @@ hr {
   margin: 10px 0;
   padding: 0;
   border: none !important;
-  border-bottom: 1px solid #eee !important;
+  border-bottom: 1px solid @global-neutral-color-3 !important;
   clear: both;
   background: 0 0;
 }
@@ -238,7 +238,7 @@ a cite {
 
 .layui-disabled,
 .layui-disabled:hover {
-  color: #d2d2d2 !important;
+  color: @global-neutral-color-6 !important;
   cursor: not-allowed !important;
 }
 
@@ -313,7 +313,7 @@ a cite {
   position: relative;
   height: 6px;
   border-radius: 20px;
-  background-color: #eee;
+  background-color: @global-neutral-color-3;
 }
 
 .layui-progress-bar {
@@ -422,7 +422,7 @@ a cite {
   position: relative;
   padding: 15px;
   border-radius: 0;
-  border-top: 5px solid #eee;
+  border-top: 5px solid @global-neutral-color-3;
   background-color: #fff;
 }
 
@@ -495,7 +495,7 @@ a cite {
 .layui-tab-card,
 .layui-tab-title,
 .layui-tab-title .layui-this:after {
-  border-color: #eee;
+  border-color: @global-neutral-color-3;
 }
 
 .layui-border-red {
@@ -650,7 +650,7 @@ a cite {
 }
 
 .layui-font-gray {
-  color: #c2c2c2 !important;
+  color: @global-neutral-color-8 !important;
 }
 
 .layui-input-number[type="number"] {
@@ -788,7 +788,7 @@ a cite {
 }
 
 .layui-input-wrap .layui-input:focus + .layui-input-split {
-  border-color: #d2d2d2;
+  border-color: @global-neutral-color-6;
 }
 
 .layui-input-prefix .layui-icon,
@@ -872,7 +872,7 @@ a cite {
   margin-top: -3px;
   cursor: pointer;
   border-width: 6px;
-  border-top-color: #c2c2c2;
+  border-top-color: @global-neutral-color-8;
   border-top-style: solid;
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
@@ -886,7 +886,7 @@ a cite {
   padding: 5px 0;
   z-index: 899;
   min-width: 100%;
-  border: 1px solid #eee;
+  border: 1px solid @global-neutral-color-3;
   max-height: 300px;
   overflow-y: auto;
   background-color: #fff;
@@ -913,7 +913,7 @@ a cite {
 }
 
 .layui-form-select dl dd:hover {
-  background-color: #f6f6f6;
+  background-color: @global-neutral-color-2;
   -webkit-transition: 0.5s all;
   transition: 0.5s all;
 }
@@ -928,7 +928,7 @@ a cite {
 }
 
 .layui-form-select dl dd.layui-this {
-  background-color: #f6f6f6;
+  background-color: @global-neutral-color-2;
   color: @global-checked-color;
   font-weight: 700;
 }
@@ -972,11 +972,11 @@ a cite {
 }
 
 .layui-select-disabled .layui-disabled {
-  border-color: #eee !important;
+  border-color: @global-neutral-color-3 !important;
 }
 
 .layui-select-disabled .layui-edge {
-  border-top-color: #d2d2d2;
+  border-top-color: @global-neutral-color-6;
 }
 
 .layui-form-checkbox {
@@ -997,13 +997,13 @@ a cite {
   height: 100%;
   font-size: 14px;
   border-radius: 2px 0 0 2px;
-  background-color: #d2d2d2;
+  background-color: @global-neutral-color-6;
   color: #fff;
   overflow: hidden;
 }
 
 .layui-form-checkbox:hover span {
-  background-color: #c2c2c2;
+  background-color: @global-neutral-color-8;
 }
 
 .layui-form-checkbox i {
@@ -1012,7 +1012,7 @@ a cite {
   top: 0;
   width: 30px;
   height: 28px;
-  border: 1px solid #d2d2d2;
+  border: 1px solid @global-neutral-color-6;
   border-left: none;
   border-radius: 0 2px 2px 0;
   color: #fff;
@@ -1021,8 +1021,8 @@ a cite {
 }
 
 .layui-form-checkbox:hover i {
-  border-color: #c2c2c2;
-  color: #c2c2c2;
+  border-color: @global-neutral-color-8;
+  color: @global-neutral-color-8;
 }
 
 .layui-form-checked,
@@ -1070,7 +1070,7 @@ a cite {
   width: 16px;
   height: 16px;
   line-height: 16px;
-  border: 1px solid #d2d2d2;
+  border: 1px solid @global-neutral-color-6;
   font-size: 12px;
   border-radius: 2px;
   background-color: #fff;
@@ -1091,11 +1091,11 @@ a cite {
 
 .layui-checkbox-disabled[lay-skin="primary"] span {
   background: 0 0 !important;
-  color: #c2c2c2 !important;
+  color: @global-neutral-color-8 !important;
 }
 
 .layui-checkbox-disabled[lay-skin="primary"]:hover i {
-  border-color: #d2d2d2;
+  border-color: @global-neutral-color-6;
 }
 
 .layui-form-item .layui-form-checkbox[lay-skin="primary"] {
@@ -1108,7 +1108,7 @@ a cite {
   line-height: 22px;
   min-width: 35px;
   padding: 0 5px;
-  border: 1px solid #d2d2d2;
+  border: 1px solid @global-neutral-color-6;
   border-radius: 20px;
   cursor: pointer;
   background-color: #fff;
@@ -1123,7 +1123,7 @@ a cite {
   width: 16px;
   height: 16px;
   border-radius: 20px;
-  background-color: #d2d2d2;
+  background-color: @global-neutral-color-6;
   -webkit-transition: 0.1s linear;
   transition: 0.1s linear;
 }
@@ -1147,7 +1147,7 @@ a cite {
 
 .layui-checkbox-disabled,
 .layui-checkbox-disabled i {
-  border-color: #eee !important;
+  border-color: @global-neutral-color-3 !important;
 }
 
 .layui-form-onswitch i {
@@ -1163,11 +1163,11 @@ a cite {
 }
 
 .layui-checkbox-disabled span {
-  background-color: #eee !important;
+  background-color: @global-neutral-color-3 !important;
 }
 
 .layui-checkbox-disabled em {
-  color: #d2d2d2 !important;
+  color: @global-neutral-color-6 !important;
 }
 
 .layui-checkbox-disabled:hover i {
@@ -1199,7 +1199,7 @@ a cite {
 .layui-form-radio > i {
   margin-right: 8px;
   font-size: 22px;
-  color: #c2c2c2;
+  color: @global-neutral-color-8;
 }
 
 .layui-form-radio:hover *,
@@ -1209,11 +1209,11 @@ a cite {
 }
 
 .layui-radio-disabled > i {
-  color: #eee !important;
+  color: @global-neutral-color-3 !important;
 }
 
 .layui-radio-disabled * {
-  color: #c2c2c2 !important;
+  color: @global-neutral-color-8 !important;
 }
 
 .layui-form-pane .layui-form-label {
@@ -1354,7 +1354,7 @@ a cite {
 .layedit-tool-fixed {
   position: fixed;
   top: 0;
-  border-top: 1px solid #eee;
+  border-top: 1px solid @global-neutral-color-3;
 }
 
 .layui-layedit-tool .layedit-tool-mid,
@@ -1385,13 +1385,13 @@ a cite {
 }
 
 .layui-layedit-tool .layedit-tool-active {
-  background-color: #eee;
+  background-color: @global-neutral-color-3;
   color: #000;
 }
 
 .layui-layedit-tool .layui-disabled,
 .layui-layedit-tool .layui-disabled:hover {
-  color: #d2d2d2;
+  color: @global-neutral-color-6;
   cursor: not-allowed;
 }
 
@@ -1399,7 +1399,7 @@ a cite {
   width: 1px;
   height: 18px;
   margin: 0 10px;
-  background-color: #d2d2d2;
+  background-color: @global-neutral-color-6;
 }
 
 .layedit-tool-html {
@@ -1473,7 +1473,7 @@ a cite {
 .layui-laypage input,
 .layui-laypage select,
 .layui-laypage span {
-  border: 1px solid #eee;
+  border: 1px solid @global-neutral-color-3;
 }
 
 .layui-laypage a,
@@ -1619,7 +1619,7 @@ a cite {
 .layui-flow-more a cite {
   padding: 0 20px;
   border-radius: 3px;
-  background-color: #eee;
+  background-color: @global-neutral-color-3;
   color: #333;
   font-style: normal;
 }
@@ -1678,7 +1678,7 @@ a cite {
 .layui-upload-drag {
   position: relative;
   padding: 30px;
-  border: 1px dashed #e2e2e2;
+  border: 1px dashed @global-neutral-color-4;
   background-color: #fff;
   text-align: center;
   cursor: pointer;
@@ -1745,7 +1745,7 @@ a cite {
 }
 
 .layui-menu li:hover {
-  background-color: #f6f6f6;
+  background-color: @global-neutral-color-2;
 }
 
 .layui-menu-item-parent:hover > .layui-menu-body-panel {
@@ -1788,7 +1788,7 @@ a cite {
   padding: 0;
   height: 0;
   line-height: 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid @global-neutral-color-3;
   overflow: hidden;
 }
 
@@ -1824,7 +1824,7 @@ a cite {
 
 .layui-menu .layui-menu-item-checked,
 .layui-menu .layui-menu-item-checked2 {
-  background-color: #f6f6f6 !important;
+  background-color: @global-neutral-color-2 !important;
   border-radius: 2px;
   color: @global-checked-color;
 }
@@ -1933,7 +1933,7 @@ a cite {
 }
 
 .layui-dropdown dl > .layui-dropdown-menu {
-  border: 1px solid #eee;
+  border: 1px solid @global-neutral-color-3;
   border-radius: @global-border-radius;
 }
 
@@ -1984,7 +1984,7 @@ a cite {
   width: 30px;
   height: 36px;
   line-height: 26px;
-  border: 1px solid #eee;
+  border: 1px solid @global-neutral-color-3;
   border-radius: 2px;
   cursor: pointer;
   text-align: center;
@@ -2028,7 +2028,7 @@ a cite {
 
 .layui-breadcrumb span[lay-separator] {
   margin: 0 10px;
-  color: #ccc;
+  color: @global-neutral-color-7;
 }
 
 .layui-tab {
@@ -2128,7 +2128,7 @@ a cite {
 }
 
 .layui-tab-more li.layui-this:after {
-  border-bottom-color: #eee;
+  border-bottom-color: @global-neutral-color-3;
   border-radius: 2px;
 }
 
@@ -2157,7 +2157,7 @@ a cite {
   top: 1px;
   text-align: center;
   font-size: 14px;
-  color: #c2c2c2;
+  color: @global-neutral-color-8;
   transition: all 0.2s;
   -webkit-transition: all 0.2s;
 }
@@ -2271,7 +2271,7 @@ a cite {
   line-height: 20px;
   margin: -10px 0 0 -50px;
   text-align: center;
-  color: #c2c2c2;
+  color: @global-neutral-color-8;
   font-family: layui-icon !important;
   font-size: 30px;
   font-style: normal;
@@ -2387,7 +2387,7 @@ a cite {
   height: 10px;
   margin: 0 3px;
   font-size: 14px;
-  background-color: #eee;
+  background-color: @global-neutral-color-3;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   cursor: pointer;
@@ -2606,7 +2606,7 @@ body .layui-util-face .layui-layer-content {
   margin: 10px 0;
   padding: 15px;
   line-height: 20px;
-  border: 1px solid #eee;
+  border: 1px solid @global-neutral-color-3;
   border-left-width: 6px;
   background-color: @global-neutral-color-1;
   color: #333;
@@ -2615,7 +2615,7 @@ body .layui-util-face .layui-layer-content {
 }
 
 .layui-colorpicker {
-  border: 1px solid #eee;
+  border: 1px solid @global-neutral-color-3;
   padding: 5px;
   border-radius: @global-border-radius;
   line-height: 24px;
@@ -2626,7 +2626,7 @@ body .layui-util-face .layui-layer-content {
 }
 
 .layui-colorpicker:hover {
-  border-color: #d2d2d2;
+  border-color: @global-neutral-color-6;
 }
 
 .layui-colorpicker.layui-colorpicker-lg {
@@ -2681,7 +2681,7 @@ body .layui-util-face .layui-layer-content {
   margin: 5px 0;
   padding: 7px;
   background: #fff;
-  border: 1px solid #d2d2d2;
+  border: 1px solid @global-neutral-color-6;
   border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
 }
@@ -2826,7 +2826,7 @@ body .layui-util-face .layui-layer-content {
 
 .layui-slider {
   height: 4px;
-  background: #eee;
+  background: @global-neutral-color-3;
   border-radius: 3px;
   position: relative;
   cursor: pointer;
@@ -2919,7 +2919,7 @@ body .layui-util-face .layui-layer-content {
 .layui-slider-input {
   width: 70px;
   height: 32px;
-  border: 1px solid #eee;
+  border: 1px solid @global-neutral-color-3;
   border-radius: 3px;
   font-size: 16px;
   line-height: 32px;
@@ -2934,7 +2934,7 @@ body .layui-util-face .layui-layer-content {
   right: 0;
   width: 20px;
   height: 100%;
-  border-left: 1px solid #eee;
+  border-left: 1px solid @global-neutral-color-3;
 }
 
 .layui-slider-input-btn i {
@@ -2952,7 +2952,7 @@ body .layui-util-face .layui-layer-content {
 
 .layui-slider-input-btn i:first-child {
   top: 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid @global-neutral-color-3;
 }
 
 .layui-slider-input-txt {
@@ -3063,7 +3063,7 @@ body .layui-util-face .layui-layer-content {
 }
 
 .layui-tree-entry:hover {
-  background-color: #eee;
+  background-color: @global-neutral-color-3;
 }
 
 .layui-tree-line .layui-tree-entry:hover {