From f482f586be7e950c69ac50e9087799225f3404ae Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Thu, 19 Sep 2024 10:03:52 +0800
Subject: [PATCH] site: fix homepage features in dark mode (#1168)

---
 .../components/Features/index.module.less      | 10 ++++++++--
 .../HomePage/components/Features/index.tsx     | 18 ++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/.dumi/theme/builtins/HomePage/components/Features/index.module.less b/.dumi/theme/builtins/HomePage/components/Features/index.module.less
index 5e818b6b8..ff884b389 100644
--- 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
index c77c148f6..b262359de 100644
--- 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',