chore: update Loading

umijs · Mar 3, 2023 · 173ae53 · 173ae53
1 parent 021ae1a
commit 173ae53
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/src/client/theme-default/slots/Loading/index.tsx b/src/client/theme-default/slots/Loading/index.tsx
@@ -1,5 +1,6 @@
+import { usePrefersColor } from 'dumi';
 import React from 'react';
-import type { SkeletonProps } from 'react-loading-skeleton';
+import type { SkeletonProps, SkeletonThemeProps } from 'react-loading-skeleton';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 import './index.less';
@@ -42,9 +43,29 @@ const DemoBlockSkeleton = ({ children }: React.PropsWithChildren) => (
 );
 
 const Loading: React.FC = () => {
+  const [currentPrefersColor] = usePrefersColor();
+
+  const skeletonThemeProps = React.useMemo<SkeletonThemeProps>(() => {
+    // light use default color
+    let baseColor = undefined;
+    let highlightColor = undefined;
+
+    if (currentPrefersColor === 'dark') {
+      baseColor = '#1f1f1f';
+      highlightColor = 'rgba(255, 255, 255, 0.12)';
+    }
+
+    return {
+      baseColor,
+      highlightColor,
+      // TODO: direction support
+      direction: 'ltr',
+    };
+  }, [currentPrefersColor]);
+
   return (
     <div className="dumi-default-loading-skeleton">
-      <SkeletonTheme>
+      <SkeletonTheme {...skeletonThemeProps}>
         <TitleSkeleton />
         <DescriptionSkeleton />
         <DemoBlockSkeleton>