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

* docs: update home page * docs: home support dark mode * docs: fix mobile * docs: fix rtl * docs: update locale
ammar-knowledge · Aug 25, 2023 · 4e9ac02 · 4e9ac02
1 parent 94339be
commit 4e9ac02
Show file tree

Hide file tree

Showing 9 changed files with 569 additions and 124 deletions.
diff --git a/.dumi/hooks/useDark.tsx b/.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);
+}
diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.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 { createStyles, css, useTheme } from 'antd-style';
-import classNames from 'classnames';
 import {
-  Space,
-  Typography,
-  Tour,
-  Tag,
-  DatePicker,
   Alert,
-  Modal,
+  Carousel,
+  DatePicker,
   FloatButton,
+  Modal,
   Progress,
-  Carousel,
+  Space,
+  Tag,
+  Tour,
+  Typography,
 } from 'antd';
+import { createStyles, css, useTheme } from 'antd-style';
+import classNames from 'classnames';
+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';

diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.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);