diff --git a/.dumi/theme/builtins/ResourceCards/index.tsx b/.dumi/theme/builtins/ResourceCards/index.tsx
index 207db10e64..92e4d65c2f 100644
--- a/.dumi/theme/builtins/ResourceCards/index.tsx
+++ b/.dumi/theme/builtins/ResourceCards/index.tsx
@@ -15,7 +15,7 @@ const useStyle = createStyles(({ token, css }) => {
       height: 100%;
       color: inherit;
       list-style: none;
-      border: 1px solid #e6e6e6;
+      border: 1px solid ${token.colorSplit};
       border-radius: 2px;
       cursor: pointer;
       transition: box-shadow 0.3s;
@@ -47,13 +47,13 @@ const useStyle = createStyles(({ token, css }) => {
     `,
     title: css`
       margin: 16px 20px 8px;
-      color: #0d1a26;
+      opacity: 0.85;
       font-size: 20px;
       line-height: 28px;
     `,
     description: css`
       margin: 0 20px 20px;
-      color: #697b8c;
+      opacity: 0.65;
       font-size: 14px;
       line-height: 22px;
     `,
diff --git a/.dumi/theme/layouts/ResourceLayout/index.tsx b/.dumi/theme/layouts/ResourceLayout/index.tsx
index d82b9d39fb..9f6e0fb296 100644
--- a/.dumi/theme/layouts/ResourceLayout/index.tsx
+++ b/.dumi/theme/layouts/ResourceLayout/index.tsx
@@ -4,6 +4,7 @@ import { ConfigProvider, Layout, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { FormattedMessage, useRouteMeta } from 'dumi';
 
+import useDark from '../../../hooks/useDark';
 import CommonHelmet from '../../common/CommonHelmet';
 import EditButton from '../../common/EditButton';
 import Footer from '../../slots/Footer';
@@ -15,125 +16,136 @@ const resourcePadding = 40;
 const articleMaxWidth = 1208;
 const resourcePaddingXS = 24;
 
-const useStyle = createStyles(({ token, css }) => {
-  const { antCls } = token;
-  return {
-    resourcePage: css`
-      footer {
-        margin-top: 176px;
+const useStyle = () => {
+  const isRootDark = useDark();
 
-        .rc-footer-container {
-          max-width: ${articleMaxWidth}px;
-          margin: 0 auto;
-          padding-right: 0;
-          padding-left: 0;
+  return createStyles((config) => {
+    const { token, css } = config;
+    const { antCls } = token;
+
+    return {
+      resourcePage: css`
+        footer {
+          margin-top: 176px;
+
+          .rc-footer-container {
+            max-width: ${articleMaxWidth}px;
+            margin: 0 auto;
+            padding-right: 0;
+            padding-left: 0;
+          }
         }
-      }
-    `,
-    resourceContent: css`
-      padding: 0 ${resourcePadding}px;
-      max-width: ${articleMaxWidth}px;
-      margin: 0 auto;
-      box-sizing: content-box;
-      min-height: 100vh;
+      `,
+      resourceContent: css`
+        padding: 0 ${resourcePadding}px;
+        max-width: ${articleMaxWidth}px;
+        margin: 0 auto;
+        box-sizing: content-box;
+        min-height: 100vh;
 
-      > .markdown {
-        > p {
-          margin-bottom: 56px;
-        }
+        > .markdown {
+          > p {
+            margin-bottom: 56px;
+          }
 
-        h2 {
-          margin-top: 124px;
-          color: #314659;
-          font-weight: lighter;
-          font-size: 30px;
-          line-height: 38px;
+          h2 {
+            margin-top: 124px;
+            font-weight: lighter;
+            font-size: 30px;
+            line-height: 38px;
 
-          &:first-child {
-            margin-top: 88px;
+            &:first-child {
+              margin-top: 88px;
+            }
+          }
+
+          h3 {
+            margin-top: 56px;
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 32px;
           }
         }
 
-        h3 {
-          margin-top: 56px;
-          font-weight: 400;
-          font-size: 24px;
-          line-height: 32px;
+        @media only screen and (max-width: 767.99px) {
+          & {
+            article {
+              padding: 0 ${resourcePaddingXS}px;
+            }
+
+            ${antCls}-col {
+              padding-top: 16px !important;
+              padding-bottom: 16px !important;
+            }
+          }
+        }
+      `,
+      banner: css`
+        padding: 0 ${resourcePadding}px;
+        overflow: hidden;
+        ${
+          isRootDark
+            ? ``
+            : `background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');`
+        }
+        background-size: cover;
+
+        h1 {
+          box-sizing: content-box;
+          max-width: ${articleMaxWidth}px;
+          margin: 56px auto 16px;
         }
 
-        p {
-          color: #697b8c;
+        section {
+          max-width: ${articleMaxWidth}px;
+          margin: 0 auto 56px;
+          font-weight: 200;
+          font-size: 16px;
+          line-height: 24px;
         }
-      }
 
-      @media only screen and (max-width: 767.99px) {
-        & {
-          article {
+        @media only screen and (max-width: 767.99px) {
+          & {
+            margin: 0 -${resourcePaddingXS}px;
             padding: 0 ${resourcePaddingXS}px;
           }
-
-          ${antCls}-col {
-            padding-top: 16px !important;
-            padding-bottom: 16px !important;
-          }
         }
-      }
-    `,
-    banner: css`
-      padding: 0 ${resourcePadding}px;
-      overflow: hidden;
-      background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');
-      background-size: cover;
-
-      h1 {
-        box-sizing: content-box;
-        max-width: ${articleMaxWidth}px;
-        margin: 56px auto 16px;
-      }
-
-      section {
-        max-width: ${articleMaxWidth}px;
-        margin: 0 auto 56px;
-        font-weight: 200;
-        font-size: 16px;
-        line-height: 24px;
-      }
-
-      @media only screen and (max-width: 767.99px) {
-        & {
-          margin: 0 -${resourcePaddingXS}px;
-          padding: 0 ${resourcePaddingXS}px;
-        }
-      }
-    `,
-  };
-});
+      `,
+    };
+  })();
+};
 
 const ResourceLayout: React.FC<ResourceLayoutProps> = ({ children }) => {
   const { styles } = useStyle();
   const meta = useRouteMeta();
-  return (
-    <ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>
-      <Layout>
-        <CommonHelmet />
-        <div id="resources-page" className={styles.resourcePage}>
-          <AffixTabs />
-          <div className={styles.banner}>
-            <Typography.Title style={{ fontSize: 30 }}>
-              {meta.frontmatter?.title}
-              <EditButton
-                title={<FormattedMessage id="app.content.edit-page" />}
-                filename={meta.frontmatter.filename}
-              />
-            </Typography.Title>
-            <section>{meta.frontmatter.description}</section>
-          </div>
-          <div className={styles.resourceContent}>{children}</div>
-          <Footer />
+  const isRootDark = useDark();
+
+  const node = (
+    <Layout>
+      <CommonHelmet />
+      <div id="resources-page" className={styles.resourcePage}>
+        <AffixTabs />
+        <div className={styles.banner}>
+          <Typography.Title style={{ fontSize: 30 }}>
+            {meta.frontmatter?.title}
+            <EditButton
+              title={<FormattedMessage id="app.content.edit-page" />}
+              filename={meta.frontmatter.filename}
+            />
+          </Typography.Title>
+          <section>{meta.frontmatter.description}</section>
         </div>
-      </Layout>
-    </ConfigProvider>
+        <div className={styles.resourceContent}>{children}</div>
+        <Footer />
+      </div>
+    </Layout>
   );
+
+  if (!isRootDark) {
+    return <ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>{node}</ConfigProvider>;
+  }
+
+  return node;
 };
 
 export default ResourceLayout;