docs: fix res page not work in dark mode (#47697)

.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;
     `,

.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,8 +16,13 @@ const resourcePadding = 40;
 const articleMaxWidth = 1208;
 const resourcePaddingXS = 24;
 
-const useStyle = createStyles(({ token, css }) => {
+const useStyle = () => {
+  const isRootDark = useDark();
+
+  return createStyles((config) => {
+    const { token, css } = config;
     const { antCls } = token;
+
     return {
       resourcePage: css`
         footer {
@@ -44,7 +50,6 @@ const useStyle = createStyles(({ token, css }) => {
 
           h2 {
             margin-top: 124px;
-          color: #314659;
             font-weight: lighter;
             font-size: 30px;
             line-height: 38px;
@@ -60,10 +65,6 @@ const useStyle = createStyles(({ token, css }) => {
             font-size: 24px;
             line-height: 32px;
           }
-
-        p {
-          color: #697b8c;
-        }
         }
 
         @media only screen and (max-width: 767.99px) {
@@ -82,7 +83,11 @@ const useStyle = createStyles(({ token, css }) => {
       banner: css`
         padding: 0 ${resourcePadding}px;
         overflow: hidden;
-      background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');
+        ${
+          isRootDark
+            ? ``
+            : `background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');`
+        }
         background-size: cover;
 
         h1 {
@@ -107,13 +112,15 @@ const useStyle = createStyles(({ token, css }) => {
         }
       `,
     };
-});
+  })();
+};
 
 const ResourceLayout: React.FC<ResourceLayoutProps> = ({ children }) => {
   const { styles } = useStyle();
   const meta = useRouteMeta();
-  return (
-    <ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>
+  const isRootDark = useDark();
+
+  const node = (
     <Layout>
       <CommonHelmet />
       <div id="resources-page" className={styles.resourcePage}>
@@ -132,8 +139,13 @@ const ResourceLayout: React.FC<ResourceLayoutProps> = ({ children }) => {
         <Footer />
       </div>
     </Layout>
-    </ConfigProvider>
   );
+
+  if (!isRootDark) {
+    return <ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>{node}</ConfigProvider>;
+  }
+
+  return node;
 };
 
 export default ResourceLayout;