diff --git a/src/client/theme-default/slots/Loading/index.less b/src/client/theme-default/slots/Loading/index.less
index 98f1aabae4..4685a2093f 100644
--- a/src/client/theme-default/slots/Loading/index.less
+++ b/src/client/theme-default/slots/Loading/index.less
@@ -3,20 +3,18 @@
 @skeleton-cls: react-loading-skeleton;
 
 .@{prefix}-loading-skeleton {
-
   .@{skeleton-cls} {
+    margin-block-end: 0.38em;
 
-    // first-line indent
     &.first-line {
-      display: inline-block;
       width: calc(100% - 2em);
       margin-inline-start: 2em;
     }
 
     // ======== dark mode ========
     @{dark-selector} & {
-      --highlight-color: rgba(255, 255, 255, 0.12);
-      --base-color: #1f1f1f;
+      --highlight-color: fade(@c-text-dark, @dark-light-amount);
+      --base-color: @c-text;
     }
   }
 }
diff --git a/src/client/theme-default/slots/Loading/index.tsx b/src/client/theme-default/slots/Loading/index.tsx
index cd4359fc1d..9e6042c220 100644
--- a/src/client/theme-default/slots/Loading/index.tsx
+++ b/src/client/theme-default/slots/Loading/index.tsx
@@ -6,8 +6,8 @@ import './index.less';
 const Loading: React.FC = () => (
   <div className="dumi-default-loading-skeleton">
     <Skeleton className="first-line" count={1} />
-    <Skeleton count={Math.floor(Math.random() * 3) + 1} />
-    <Skeleton count={1} width={`${Math.random() * 50 + 30}%`} />
+    <Skeleton count={2} />
+    <Skeleton count={1} width="75%" />
   </div>
 );