fix: Tour panel token & home support dark mode (#44428)

* docs: update home page

* docs: home support dark mode

* docs: fix mobile

* docs: fix rtl

* docs: update locale

.dumi/hooks/useDark.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const DarkContext = React.createContext(false);
+
+export default function useDark() {
+  return React.useContext(DarkContext);
+}

.dumi/pages/index/components/ComponentsList.tsx

@@ -1,21 +1,23 @@
 /* eslint-disable react/jsx-pascal-case */
 import React, { useContext } from 'react';
-import dayjs from 'dayjs';
 import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Carousel,
+  DatePicker,
+  FloatButton,
+  Modal,
+  Progress,
+  Space,
+  Tag,
+  Tour,
+  Typography,
+} from 'antd';
 import { createStyles, css, useTheme } from 'antd-style';
 import classNames from 'classnames';
-import {
-  Space,
-  Typography,
-  Tour,
-  Tag,
-  DatePicker,
-  Alert,
-  Modal,
-  FloatButton,
-  Progress,
-  Carousel,
-} from 'antd';
+import dayjs from 'dayjs';
+
+import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
 import SiteContext from '../../../theme/slots/SiteContext';
 import { getCarouselStyle } from './util';
@@ -55,40 +57,45 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ token }) => {
-  const { carousel } = getCarouselStyle();
+const useStyle = () => {
+  const isRootDark = useDark();
 
-  return {
-    card: css`
-      border-radius: ${token.borderRadius}px;
-      background: #f5f8ff;
-      padding: ${token.paddingXL}px;
-      flex: none;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
+  return createStyles(({ token }) => {
+    const { carousel } = getCarouselStyle();
 
-      > * {
+    return {
+      card: css`
+        border-radius: ${token.borderRadius}px;
+        border: 1px solid ${isRootDark ? token.colorBorder : 'transparent'};
+        background: ${isRootDark ? token.colorBgContainer : '#f5f8ff'};
+        padding: ${token.paddingXL}px;
         flex: none;
-      }
-    `,
-    cardCircle: css`
-      position: absolute;
-      width: 120px;
-      height: 120px;
-      background: #1677ff;
-      border-radius: 50%;
-      filter: blur(40px);
-      opacity: 0.1;
-    `,
-    mobileCard: css`
-      height: 395px;
-    `,
-    carousel,
-  };
-});
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        > * {
+          flex: none;
+        }
+      `,
+      cardCircle: css`
+        position: absolute;
+        width: 120px;
+        height: 120px;
+        background: #1677ff;
+        border-radius: 50%;
+        filter: blur(40px);
+        opacity: 0.1;
+      `,
+      mobileCard: css`
+        height: 395px;
+      `,
+      carousel,
+    };
+  })();
+};
 
 const ComponentItem: React.FC<ComponentItemProps> = ({ title, node, type, index }) => {
   const tagColor = type === 'new' ? 'processing' : 'warning';

.dumi/pages/index/components/DesignFramework.tsx

@@ -1,10 +1,12 @@
 import React, { useContext } from 'react';
+import { Col, Row, Typography } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { Link, useLocation } from 'dumi';
-import { Col, Row, Typography } from 'antd';
+
+import useDark from '../../../hooks/useDark';
 import useLocale from '../../../hooks/useLocale';
-import * as utils from '../../../theme/utils';
 import SiteContext from '../../../theme/slots/SiteContext';
+import * as utils from '../../../theme/utils';
 
 const SECONDARY_LIST = [
   {
@@ -60,12 +62,17 @@ const locales = {
   },
 };
 
-const useStyle = createStyles(({ token, css }) => ({
-  card: css`
+const useStyle = () => {
+  const isRootDark = useDark();
+
+  return createStyles(({ token, css }) => ({
+    card: css`
       padding: ${token.paddingSM}px;
       border-radius: ${token.borderRadius * 2}px;
-      background: #fff;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      background: ${isRootDark ? 'rgba(0,0,0,0.45)' : token.colorBgElevated};
+      box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.03),
+        0 1px 6px -1px rgba(0, 0, 0, 0.02),
         0 2px 4px rgba(0, 0, 0, 0.02);
 
       img {
@@ -75,18 +82,19 @@ const useStyle = createStyles(({ token, css }) => ({
       }
     `,
 
-  cardMini: css`
+    cardMini: css`
       display: block;
       border-radius: ${token.borderRadius * 2}px;
       padding: ${token.paddingMD}px ${token.paddingLG}px;
-      background: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.06);
+      background: ${isRootDark ? 'rgba(0,0,0,0.25)' : 'rgba(0, 0, 0, 0.02)'};
+      border: 1px solid ${isRootDark ? 'rgba(255,255,255, 0.45)' : 'rgba(0, 0, 0, 0.06)'};
 
       img {
         height: 48px;
       }
     `,
-}));
+  }))();
+};
 
 export default function DesignFramework() {
   const [locale] = useLocale(locales);

.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx

@@ -0,0 +1,256 @@
+import React from 'react';
+import { AntDesignOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  ColorPicker,
+  Dropdown,
+  Input,
+  message,
+  Modal,
+  Progress,
+  Select,
+  Slider,
+  Steps,
+  Switch,
+  Tooltip,
+} from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+
+import useLocale from '../../../../hooks/useLocale';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMessage } = message;
+
+const locales = {
+  cn: {
+    range: '设置范围',
+    text: 'Ant Design 5.0 使用 CSS-in-JS 技术以提供动态与混合主题的能力。与此同时，我们使用组件级别的 CSS-in-JS 解决方案，让你的应用获得更好的性能。',
+    infoText: '信息内容展示',
+    dropdown: '下拉菜单',
+    finished: '已完成',
+    inProgress: '进行中',
+    waiting: '等待中',
+    option: '选项',
+    apple: '苹果',
+    banana: '香蕉',
+    orange: '橘子',
+    watermelon: '西瓜',
+    primary: '主要按钮',
+    danger: '危险按钮',
+    default: '默认按钮',
+    dashed: '虚线按钮',
+    icon: '图标按钮',
+    hello: '你好，Ant Design!',
+    release: 'Ant Design 5.0 正式发布！',
+  },
+  en: {
+    range: 'Set Range',
+    text: 'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.',
+    infoText: 'Info Text',
+    dropdown: 'Dropdown',
+    finished: 'Finished',
+    inProgress: 'In Progress',
+    waiting: 'Waiting',
+    option: 'Option',
+    apple: 'Apple',
+    banana: 'Banana',
+    orange: 'Orange',
+    watermelon: 'Watermelon',
+    primary: 'Primary',
+    danger: 'Danger',
+    default: 'Default',
+    dashed: 'Dashed',
+    icon: 'Icon',
+    hello: 'Hello, Ant Design!',
+    release: 'Ant Design 5.0 is released!',
+  },
+};
+
+const useStyle = createStyles(({ token, css }) => {
+  const gap = token.padding;
+
+  return {
+    holder: css`
+      width: 500px;
+      display: flex;
+      flex-direction: column;
+      row-gap: ${gap}px;
+      opacity: 0.65;
+    `,
+
+    flex: css`
+      display: flex;
+      flex-wrap: nowrap;
+      column-gap: ${gap}px;
+    `,
+    ptg_20: css`
+      flex: 0 1 20%;
+    `,
+    ptg_none: css`
+      flex: none;
+    `,
+    block: css`
+      background-color: ${token.colorBgContainer};
+      padding: ${token.paddingXS}px ${token.paddingSM}px;
+      border-radius: ${token.borderRadius}px;
+      border: 1px solid ${token.colorBorder};
+    `,
+    noMargin: css`
+      margin: 0;
+    `,
+  };
+});
+
+export interface ComponentsBlockProps {
+  className?: string;
+}
+
+export default function ComponentsBlock(props: ComponentsBlockProps) {
+  const { className } = props;
+
+  const [locale] = useLocale(locales);
+  const { styles } = useStyle();
+
+  return (
+    <div className={classNames(className, styles.holder)}>
+      <ModalPanel title="Ant Design 5.0" width="100%">
+        {locale.text}
+      </ModalPanel>
+
+      <Alert message={locale.infoText} type="info" />
+
+      {/* Line */}
+      <div className={styles.flex}>
+        <ColorPicker style={{ flex: 'none' }} />
+        <div style={{ flex: 'none' }}>
+          <Dropdown.Button
+            menu={{
+              items: new Array(5).fill(null).map((_, index) => ({
+                key: `opt${index}`,
+                label: `${locale.option} ${index}`,
+              })),
+            }}
+          >
+            {locale.dropdown}
+          </Dropdown.Button>
+        </div>
+
+        <Select
+          style={{ flex: 'auto' }}
+          mode="multiple"
+          maxTagCount="responsive"
+          defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
+          options={[
+            {
+              value: 'apple',
+              label: locale.apple,
+            },
+            {
+              value: 'banana',
+              label: locale.banana,
+            },
+            {
+              value: 'orange',
+              label: locale.orange,
+            },
+            {
+              value: 'watermelon',
+              label: locale.watermelon,
+            },
+          ]}
+        />
+
+        <Input style={{ flex: 'none', width: 120 }} />
+      </div>
+
+      <Progress
+        style={{ margin: 0 }}
+        percent={100}
+        strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
+      />
+      <Progress style={{ margin: 0 }} percent={33} status="exception" />
+
+      <Steps
+        current={1}
+        items={[
+          {
+            title: locale.finished,
+          },
+          {
+            title: locale.inProgress,
+          },
+          {
+            title: locale.waiting,
+          },
+        ]}
+      />
+
+      {/* Line */}
+      <div className={styles.block}>
+        <Slider
+          style={{ marginInline: 20 }}
+          range
+          marks={{
+            0: '0°C',
+            26: '26°C',
+            37: '37°C',
+            100: {
+              style: {
+                color: '#f50',
+              },
+              label: <strong>100°C</strong>,
+            },
+          }}
+          defaultValue={[26, 37]}
+        />
+      </div>
+
+      {/* Line */}
+      <div className={styles.flex}>
+        <Button className={styles.ptg_20} type="primary">
+          {locale.primary}
+        </Button>
+        <Button className={styles.ptg_20} type="primary" danger>
+          {locale.danger}
+        </Button>
+        <Button className={styles.ptg_20}>{locale.default}</Button>
+        <Button className={styles.ptg_20} type="dashed">
+          {locale.dashed}
+        </Button>
+        <Button className={styles.ptg_20} icon={<AntDesignOutlined />}>
+          {locale.icon}
+        </Button>
+      </div>
+
+      {/* Line */}
+      <div className={styles.block}>
+        <div className={styles.flex}>
+          <Switch
+            className={styles.ptg_none}
+            defaultChecked
+            checkedChildren={<CheckOutlined />}
+            unCheckedChildren={<CloseOutlined />}
+          />
+
+          <Checkbox.Group
+            className={styles.ptg_none}
+            options={[locale.apple, locale.banana, locale.orange]}
+            defaultValue={[locale.apple]}
+          />
+        </div>
+      </div>
+
+      <div>
+        <InternalMessage content={locale.release} type="success" />
+      </div>
+
+      <InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
+
+      <Alert message="Ant Design love you!" type="success" />
+    </div>
+  );
+}

.dumi/pages/index/components/PreviewBanner/index.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Button, ConfigProvider, Space, Typography } from 'antd';
+import { createStyles, useTheme } from 'antd-style';
+import { Link, useLocation } from 'dumi';
+
+import useLocale from '../../../../hooks/useLocale';
+import SiteContext from '../../../../theme/slots/SiteContext';
+import * as utils from '../../../../theme/utils';
+import { GroupMask } from '../Group';
+import ComponentsBlock from './ComponentsBlock';
+
+const locales = {
+  cn: {
+    slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～',
+    start: '开始使用',
+    designLanguage: '设计语言',
+  },
+  en: {
+    slogan:
+      'Help designers/developers building beautiful products more flexible and working with happiness',
+    start: 'Getting Started',
+    designLanguage: 'Design Language',
+  },
+};
+
+const useStyle = createStyles(({ token, css }) => {
+  const textShadow = `0 0 3px ${token.colorBgContainer}`;
+  const { direction } = React.useContext(ConfigProvider.ConfigContext);
+  const isRTL = direction === 'rtl';
+
+  return {
+    holder: css`
+      height: 520px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+      perspective: 800px;
+      row-gap: ${token.marginXL}px;
+    `,
+
+    typography: css`
+      text-align: center;
+      position: relative;
+      z-index: 1;
+      padding-inline: ${token.paddingXL}px;
+      text-shadow: ${new Array(5)
+        .fill(null)
+        .map(() => textShadow)
+        .join(', ')};
+
+      h1 {
+        font-family: AliPuHui, ${token.fontFamily} !important;
+        font-weight: 900 !important;
+        font-size: ${token.fontSizeHeading2 * 2}px !important;
+        line-height: ${token.lineHeightHeading2} !important;
+      }
+
+      p {
+        font-size: ${token.fontSizeLG}px !important;
+        font-weight: normal !important;
+        margin-bottom: 0;
+      }
+    `,
+
+    block: css`
+      position: absolute;
+      inset-inline-end: 0;
+      top: -38px;
+      transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'};
+    `,
+
+    child: css`
+      position: relative;
+      z-index: 1;
+    `,
+  };
+});
+
+export interface PreviewBannerProps {
+  children?: React.ReactNode;
+}
+
+export default function PreviewBanner(props: PreviewBannerProps) {
+  const { children } = props;
+
+  const [locale] = useLocale(locales);
+  const { styles } = useStyle();
+  const { isMobile } = React.useContext(SiteContext);
+  const token = useTheme();
+  const { pathname, search } = useLocation();
+  const isZhCN = utils.isZhCN(pathname);
+
+  return (
+    <GroupMask>
+      {/* Image Left Top */}
+      <img
+        style={{ position: 'absolute', left: isMobile ? -120 : 0, top: 0, width: 240 }}
+        src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
+        alt="bg"
+      />
+      {/* Image Right Top */}
+      <img
+        style={{ position: 'absolute', right: isMobile ? 0 : '40%', bottom: 120, width: 240 }}
+        src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
+        alt="bg"
+      />
+
+      <div className={styles.holder}>
+        {/* Mobile not show the component preview */}
+        {!isMobile && <ComponentsBlock className={styles.block} />}
+
+        <Typography className={styles.typography}>
+          <h1>Ant Design 5.0</h1>
+          <p>{locale.slogan}</p>
+        </Typography>
+
+        <Space size="middle" style={{ marginBottom: token.marginXL }}>
+          <Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}>
+            <Button size="large" type="primary">
+              {locale.start}
+            </Button>
+          </Link>
+          <Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
+            <Button size="large">{locale.designLanguage}</Button>
+          </Link>
+        </Space>
+
+        <div className={styles.child}>{children}</div>
+      </div>
+    </GroupMask>
+  );
+}

.dumi/pages/index/components/Theme/index.tsx

@@ -1,15 +1,12 @@
-import { TinyColor } from '@ctrl/tinycolor';
+import * as React from 'react';
+import { defaultAlgorithm, defaultTheme } from '@ant-design/compatible';
 import {
   BellOutlined,
   FolderOutlined,
   HomeOutlined,
   QuestionCircleOutlined,
 } from '@ant-design/icons';
-import { createStyles, css, useTheme } from 'antd-style';
-import * as React from 'react';
-import classNames from 'classnames';
-import { defaultTheme, defaultAlgorithm } from '@ant-design/compatible';
-import { useLocation } from 'dumi';
+import { TinyColor } from '@ctrl/tinycolor';
 import type { MenuProps } from 'antd';
 import {
   Breadcrumb,
@@ -21,24 +18,29 @@ import {
   Menu,
   Radio,
   Space,
-  Typography,
   theme,
+  Typography,
 } from 'antd';
+import { createStyles, css, useTheme } from 'antd-style';
 import type { Color } from 'antd/es/color-picker';
 import { generateColor } from 'antd/es/color-picker/util';
-import * as utils from '../../../../theme/utils';
+import classNames from 'classnames';
+import { useLocation } from 'dumi';
+
+import useDark from '../../../../hooks/useDark';
 import useLocale from '../../../../hooks/useLocale';
+import Link from '../../../../theme/common/Link';
 import SiteContext from '../../../../theme/slots/SiteContext';
+import * as utils from '../../../../theme/utils';
 import Group from '../Group';
 import { getCarouselStyle } from '../util';
 import BackgroundImage from './BackgroundImage';
 import ColorPicker from './ColorPicker';
+import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil';
 import MobileCarousel from './MobileCarousel';
 import RadiusPicker from './RadiusPicker';
 import type { THEME } from './ThemePicker';
 import ThemePicker from './ThemePicker';
-import { DEFAULT_COLOR, PINK_COLOR, getAvatarURL, getClosetColor } from './colorUtil';
-import Link from '../../../../theme/common/Link';
 
 const { Header, Content, Sider } = Layout;
 
@@ -355,6 +357,15 @@ export default function Theme() {
     form.setFieldsValue(mergedData);
   }, [themeType]);
 
+  const isRootDark = useDark();
+
+  React.useEffect(() => {
+    onThemeChange(null, {
+      ...themeData,
+      themeType: isRootDark ? 'dark' : 'default',
+    });
+  }, [isRootDark]);
+
   // ================================ Tokens ================================
   const closestColor = getClosetColor(colorPrimaryValue);
 

.dumi/pages/index/index.tsx

@@ -1,12 +1,14 @@
+import React from 'react';
+import { ConfigProvider, theme } from 'antd';
 import { createStyles, css } from 'antd-style';
-import React, { Suspense } from 'react';
-import { ConfigProvider } from 'antd';
+
+import useDark from '../../hooks/useDark';
 import useLocale from '../../hooks/useLocale';
-import Banner from './components/Banner';
-import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
+// import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends';
 import ComponentsList from './components/ComponentsList';
 import DesignFramework from './components/DesignFramework';
 import Group from './components/Group';
+import PreviewBanner from './components/PreviewBanner';
 import Theme from './components/Theme';
 
 const useStyle = createStyles(() => ({
@@ -36,43 +38,57 @@ const locales = {
 const Homepage: React.FC = () => {
   const [locale] = useLocale(locales);
   const { styles } = useStyle();
+  const { token } = theme.useToken();
+
+  const isRootDark = useDark();
 
   return (
-    <ConfigProvider theme={{ algorithm: undefined }}>
-      <section>
-        <Banner>
-          <Suspense fallback={<BannerRecommendsFallback />}>
-            <BannerRecommends />
-          </Suspense>
-        </Banner>
-        <div>
+    <section>
+      <PreviewBanner>
+        {/* 文档很久没更新了，先藏起来 */}
+        {/* <Suspense fallback={<BannerRecommendsFallback />}>
+          <BannerRecommends />
+        </Suspense> */}
+      </PreviewBanner>
+
+      <div>
+        {/* 定制主题 */}
+        <ConfigProvider
+          theme={{
+            algorithm: theme.defaultAlgorithm,
+          }}
+        >
           <Theme />
-          <Group
-            background="#fff"
-            collapse
-            title={locale.assetsTitle}
-            description={locale.assetsDesc}
-            id="design"
-          >
-            <ComponentsList />
-          </Group>
-          <Group
-            title={locale.designTitle}
-            description={locale.designDesc}
-            background="#F5F8FF"
-            decoration={
-              <img
-                className={styles.image}
-                src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
-                alt=""
-              />
-            }
-          >
-            <DesignFramework />
-          </Group>
-        </div>
-      </section>
-    </ConfigProvider>
+        </ConfigProvider>
+
+        {/* 组件列表 */}
+        <Group
+          background={token.colorBgElevated}
+          collapse
+          title={locale.assetsTitle}
+          description={locale.assetsDesc}
+          id="design"
+        >
+          <ComponentsList />
+        </Group>
+
+        {/* 设计语言 */}
+        <Group
+          title={locale.designTitle}
+          description={locale.designDesc}
+          background={isRootDark ? 'rgb(57, 63, 74)' : '#F5F8FF'}
+          decoration={
+            <img
+              className={styles.image}
+              src="https://gw.alipayobjects.com/zos/bmw-prod/ba37a413-28e6-4be4-b1c5-01be1a0ebb1c.svg"
+              alt=""
+            />
+          }
+        >
+          <DesignFramework />
+        </Group>
+      </div>
+    </section>
   );
 };
 

.dumi/theme/layouts/GlobalLayout.tsx

@@ -1,22 +1,24 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   createCache,
+  extractStyle,
   legacyNotSelectorLinter,
   logicalPropertiesLinter,
   parentSelectorLinter,
   StyleProvider,
-  extractStyle,
 } from '@ant-design/cssinjs';
 import { HappyProvider } from '@ant-design/happy-work-theme';
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
 import { getSandpackCssText } from '@codesandbox/sandpack-react';
-import { App, theme as antdTheme } from 'antd';
+import { theme as antdTheme, App } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
+import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
+
+import { DarkContext } from '../../hooks/useDark';
 import useLayoutState from '../../hooks/useLayoutState';
-import SiteThemeProvider from '../SiteThemeProvider';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
 import ThemeSwitch from '../common/ThemeSwitch';
+import SiteThemeProvider from '../SiteThemeProvider';
 import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';
 
@@ -144,23 +146,25 @@ const GlobalLayout: React.FC = () => {
   }
 
   return (
-    <StyleProvider
-      cache={styleCache}
-      linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
-    >
-      <SiteContext.Provider value={siteContextValue}>
-        <SiteThemeProvider
-          theme={{
-            algorithm: getAlgorithm(theme),
-            token: {
-              motion: !theme.includes('motion-off'),
-            },
-          }}
-        >
-          <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
-        </SiteThemeProvider>
-      </SiteContext.Provider>
-    </StyleProvider>
+    <DarkContext.Provider value={theme.includes('dark')}>
+      <StyleProvider
+        cache={styleCache}
+        linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
+      >
+        <SiteContext.Provider value={siteContextValue}>
+          <SiteThemeProvider
+            theme={{
+              algorithm: getAlgorithm(theme),
+              token: {
+                motion: !theme.includes('motion-off'),
+              },
+            }}
+          >
+            <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
+          </SiteThemeProvider>
+        </SiteContext.Provider>
+      </StyleProvider>
+    </DarkContext.Provider>
   );
 };
 

components/tour/style/index.ts

@@ -1,4 +1,5 @@
 import { TinyColor } from '@ctrl/tinycolor';
+
 import { resetComponent } from '../../style';
 import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
@@ -31,7 +32,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
     boxShadowTertiary,
     tourZIndexPopup,
     fontSize,
-    colorBgContainer,
+    colorBgElevated,
     fontWeightStrong,
     marginXS,
     colorTextLightSolid,
@@ -56,7 +57,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
         fontSize,
         lineHeight,
         width: 520,
-        '--antd-arrow-background-color': colorBgContainer,
+        '--antd-arrow-background-color': colorBgElevated,
 
         '&-pure': {
           maxWidth: '100%',
@@ -77,7 +78,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
           borderRadius: tourBorderRadius,
           boxShadow: boxShadowTertiary,
           position: 'relative',
-          backgroundColor: colorBgContainer,
+          backgroundColor: colorBgElevated,
           border: 'none',
           backgroundClip: 'padding-box',