site: fix homepage features in dark mode (#1168)

ant-design · Sep 19, 2024 · f482f58 · f482f58
1 parent 5875695
commit f482f58
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/.dumi/theme/builtins/HomePage/components/Features/index.module.less b/.dumi/theme/builtins/HomePage/components/Features/index.module.less
@@ -51,11 +51,18 @@
 
 // 移动端预览时采用垂直布局展示每个 item
 @media screen and (max-width: 767px) {
+  html[data-prefers-color='light'] {
+    .container {
+      background: #fff;
+      .item {
+        background: #fbfafc;
+      }
+    }
+  }
   .container {
     flex-direction: column;
     align-items: center;
     width: 100%;
-    background: #fff;
     box-sizing: border-box;
     .item {
       box-sizing: border-box;
@@ -64,7 +71,6 @@
       flex: none;
       padding: 12px;
       width: 100%;
-      background: #fbfafc;
       .title {
         white-space: normal;
         font-size: 24px;

diff --git a/.dumi/theme/builtins/HomePage/components/Features/index.tsx b/.dumi/theme/builtins/HomePage/components/Features/index.tsx
@@ -13,31 +13,37 @@ type FeatureType = {
 
 export const Features: React.FC = () => {
   const intl = useIntl();
+  const { curTheme } = useContext(ThemeContext);
+  const token = useTheme();
 
   const features: FeatureType[] = [
     {
       preview:
-        'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*BGOrT7hmCK0AAAAAAAAAAAAADlrGAQ/original',
+        curTheme.name === 'Dark'
+          ? 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*q8CHTZn_t9cAAAAAAAAAAAAADlrGAQ/original'
+          : 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*BGOrT7hmCK0AAAAAAAAAAAAADlrGAQ/original',
       title: intl.formatMessage({ id: 'app.docs.site.features.0.title' }),
       description: intl.formatMessage({ id: 'app.docs.site.features.0.description' }),
     },
     {
       preview:
-        'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*lg4mQrmwvQMAAAAAAAAAAAAADlrGAQ/original',
+        curTheme.name === 'Dark'
+          ? 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*c7xpS7iRaO0AAAAAAAAAAAAADlrGAQ/original'
+          : 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*lg4mQrmwvQMAAAAAAAAAAAAADlrGAQ/original',
       title: intl.formatMessage({ id: 'app.docs.site.features.1.title' }),
       description: intl.formatMessage({ id: 'app.docs.site.features.1.description' }),
     },
     {
       preview:
-        'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*QIPWQJicUxYAAAAAAAAAAAAADlrGAQ/original',
+        curTheme.name === 'Dark'
+          ? 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*0XwWSZPgjiYAAAAAAAAAAAAADlrGAQ/original'
+          : 'https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*QIPWQJicUxYAAAAAAAAAAAAADlrGAQ/original',
       title: intl.formatMessage({ id: 'app.docs.site.features.2.title' }),
       description: intl.formatMessage({ id: 'app.docs.site.features.2.description' }),
     },
   ];
 
-  const { curTheme } = useContext(ThemeContext);
-  const token = useTheme();
-  const themeStyle: React.CSSProperties = {
+  const themeStyle = {
     '--theme-text-color': curTheme.name === 'Dark' ? token.colorWhite : token.colorTextBase,
     '--theme-container-bg': curTheme.name === 'Dark' ? '#222' : '#fff',
     '--theme-item-bg': curTheme.name === 'Dark' ? '#303030' : '#fbfafc',