docs: fix site issues (#44970)

.dumi/hooks/useThemeAnimation.ts

@@ -76,7 +76,7 @@ const useThemeAnimation = () => {
     [data-prefers-color='dark'] {
       color-scheme: light !important;
     }
-    
+
     [data-prefers-color='light'] {
       color-scheme: dark !important;
     }

.dumi/theme/common/styles/Common.tsx

@@ -63,6 +63,14 @@ export default () => {
       html {
         scroll-padding-top: ${headerHeight + margin}px;
       }
+
+      [data-prefers-color='dark'] {
+        color-scheme: dark;
+      }
+
+      [data-prefers-color='light'] {
+        color-scheme: light;
+      }
     `}
     />
   );

.dumi/theme/layouts/GlobalLayout.tsx

@@ -80,6 +80,10 @@ const GlobalLayout: React.FC = () => {
             ...nextSearchParams,
             theme: value.filter((t) => t !== 'light'),
           });
+
+          document
+            .querySelector('html')
+            ?.setAttribute('data-prefers-color', value.includes('dark') ? 'dark' : 'light');
         }
       });
 

.dumi/theme/slots/Header/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
-import { Alert, Col, Popover, Row, Select } from 'antd';
+import { Alert, Col, ConfigProvider, Popover, Row, Select } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
@@ -120,9 +120,9 @@ const useStyle = createStyles(({ token, css }) => {
     },
     banner: css`
       width: 100%;
-      background: #daf5eb;
       text-align: center;
       word-break: keep-all;
+      user-select: none;
     `,
     link: css`
       margin-left: 10px;
@@ -136,9 +136,6 @@ const useStyle = createStyles(({ token, css }) => {
       width: 22px;
       height: 22px;
     `,
-    message: css`
-      color: rgba(0, 0, 0, 0.88);
-    `,
   };
 });
 
@@ -364,40 +361,40 @@ const Header: React.FC = () => {
         </Popover>
       )}
       {isZhCN && bannerVisible && (
-        <Alert
-          className={styles.banner}
-          message={
-            <>
-              <img
-                className={styles.icon}
-                src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
-                alt="yuque"
-              />
-              <span className={styles.message}>
-                {isMobile ? locale.shortMessage : locale.message}
-              </span>
-              <a
-                className={styles.link}
-                href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
-                target="_blank"
-                rel="noreferrer"
-                onClick={() => {
-                  window.gtag?.('event', '点击', {
-                    event_category: 'top_banner',
-                    event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
-                  });
-                }}
-              >
-                {locale.more}
-              </a>
-            </>
-          }
-          type="info"
-          banner
-          closable
-          showIcon={false}
-          onClose={onBannerClose}
-        />
+        <ConfigProvider theme={{ token: { colorInfoBg: '#daf5eb', colorTextBase: '#000' } }}>
+          <Alert
+            className={styles.banner}
+            message={
+              <>
+                <img
+                  className={styles.icon}
+                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+                  alt="yuque"
+                />
+                <span>{isMobile ? locale.shortMessage : locale.message}</span>
+                <a
+                  className={styles.link}
+                  href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={() => {
+                    window.gtag?.('event', '点击', {
+                      event_category: 'top_banner',
+                      event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
+                    });
+                  }}
+                >
+                  {locale.more}
+                </a>
+              </>
+            }
+            type="info"
+            banner
+            closable
+            showIcon={false}
+            onClose={onBannerClose}
+          />
+        </ConfigProvider>
       )}
       <Row style={{ flexFlow: 'nowrap', height: 64 }}>
         <Col {...colProps[0]}>