diff --git a/src/loading/README.en-US.md b/src/loading/README.en-US.md
index 1af7609f7..ec4838b34 100644
--- a/src/loading/README.en-US.md
+++ b/src/loading/README.en-US.md
@@ -25,5 +25,6 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description 
 -- | -- | --
 --td-loading-color | @brand-color | - 
+--td-loading-text-color | @font-gray-1 | - 
 --td-loading-text-font-size | 24rpx | - 
 --td-loading-text-line-height | 40rpx | - 
diff --git a/src/loading/README.md b/src/loading/README.md
index 037b52166..e0464173c 100644
--- a/src/loading/README.md
+++ b/src/loading/README.md
@@ -80,5 +80,6 @@ t-class-indicator | 指示符样式类
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-loading-color | @brand-color | - 
+--td-loading-text-color | @font-gray-1 | - 
 --td-loading-text-font-size | 24rpx | - 
 --td-loading-text-line-height | 40rpx | - 
diff --git a/src/loading/loading.less b/src/loading/loading.less
index eeb5429c7..5154c0402 100644
--- a/src/loading/loading.less
+++ b/src/loading/loading.less
@@ -3,6 +3,7 @@
 @loading: ~'@{prefix}-loading';
 
 @loading-color: var(--td-loading-color, @brand-color);
+@loading-text-color: var(--td-loading-text-color, @font-gray-1);
 @loading-text-font-size: var(--td-loading-text-font-size, 24rpx);
 @loading-text-line-height: var(--td-loading-text-line-height, 40rpx);
 
@@ -89,6 +90,7 @@
   }
 
   &__text {
+    color: @loading-text-color;
     font-size: @loading-text-font-size;
     line-height: @loading-text-line-height;
 
diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap
index 803ab3731..198a82e20 100644
--- a/src/navbar/__test__/__snapshots__/index.test.js.snap
+++ b/src/navbar/__test__/__snapshots__/index.test.js.snap
@@ -40,7 +40,7 @@ exports[`navbar :base 2`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:94px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 94px;"
+      style=""
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -75,7 +75,7 @@ exports[`navbar :base 3`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:94px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 94px;"
+      style=""
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -110,7 +110,7 @@ exports[`navbar :fixed 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:94px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 94px;"
+      style=""
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -145,7 +145,7 @@ exports[`navbar :menu button 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed  class t-class"
-      style="--td-navbar-padding-top:20px; --td-navbar-right:428px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
+      style="--td-navbar-padding-top:20px; --td-navbar-right:414px; --td-navbar-capsule-height: 10px; --td-navbar-capsule-width: 40px; --td-navbar-height: -10px;"
     >
       <wx-view
         class="t-navbar__placeholder"