docs: Adjust home Theme demo (#38491)

* docs: theme tmp opacity

* docs: adjust home theme style

* docs: rm tmp file

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

@@ -187,7 +187,7 @@ export default function ComponentsList() {
           const tagText = type === 'new' ? 'New' : 'Update';
 
           return (
-            <div key={index} css={styles.card}>
+            <div key={index} css={styles.card} style={{ pointerEvents: 'none' }}>
               {/* Decorator */}
               <div
                 css={styles.cardCircle}

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

@@ -36,7 +36,7 @@ const locales = {
 
     // Secondary
     mobile: 'Ant Design Mobile',
-    mobileDesc: '基于 Preact / React / React Native 的 UI 组件库',
+    mobileDesc: 'Ant Design 移动端 UI 组件库',
     antv: 'AntV',
     antvDesc: '全新一代数据可视化解决方案',
     kitchen: 'Kitchen',

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

@@ -18,13 +18,13 @@ const locales = {
     default: '默认',
     dark: '暗黑',
     lark: '知识协作',
-    comic: '二次元',
+    comic: '桃花缘',
   },
   en: {
     default: 'Default',
     dark: 'Dark',
     lark: 'Document',
-    comic: 'Comic',
+    comic: 'Blossom',
   },
 };
 

.dumi/pages/index/components/Theme/colorUtil.ts

@@ -1,6 +1,7 @@
 import { TinyColor } from '@ctrl/tinycolor';
 
 export const DEFAULT_COLOR = '#1677FF';
+export const PINK_COLOR = '#ED4192';
 
 export const COLOR_IMAGES = [
   {
@@ -17,8 +18,8 @@ export const COLOR_IMAGES = [
     url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*FMluR4vJhaQAAAAAAAAAAAAAARQnAQ',
   },
   {
-    color: '#FB7299',
-    url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*xJOWQZDpSjkAAAAAAAAAAAAAARQnAQ',
+    color: PINK_COLOR,
+    url: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*DGZXS4YOGp0AAAAAAAAAAAAAARQnAQ',
   },
   {
     color: '#E0282E',

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

@@ -19,22 +19,23 @@ import {
   ConfigProvider,
   Card,
   Form,
-  Input,
-  InputNumber,
   Radio,
   theme,
+  Button,
 } from 'antd';
 import ThemePicker, { THEME } from './ThemePicker';
 import ColorPicker from './ColorPicker';
 import RadiusPicker from './RadiusPicker';
 import Group from '../Group';
 import BackgroundImage from './BackgroundImage';
-import { PRESET_COLORS, getClosetColor, DEFAULT_COLOR, getAvatarURL } from './colorUtil';
+import { getClosetColor, DEFAULT_COLOR, getAvatarURL, PINK_COLOR } from './colorUtil';
 
 const { Header, Content, Sider } = Layout;
 
 const TokenChecker = () => {
-  console.log('Demo Token:', theme.useToken());
+  if (process.env.NODE_ENV !== 'production') {
+    console.log('Demo Token:', theme.useToken());
+  }
   return null;
 };
 
@@ -54,6 +55,8 @@ const locales = {
     titleTheme: '主题',
     light: '亮色',
     dark: '暗黑',
+    toDef: '深度定制',
+    toUse: '去使用',
   },
   en: {
     themeTitle: 'Flexible theme customization',
@@ -69,6 +72,8 @@ const locales = {
     compact: 'Compact',
     light: 'Light',
     dark: 'Dark',
+    toDef: 'More',
+    toUse: 'Apply',
   },
 };
 
@@ -91,7 +96,7 @@ const useStyle = () => {
     `,
 
     darkDemo: css`
-      // background: green;
+      background: #000;
     `,
 
     larkDemo: css`
@@ -107,6 +112,8 @@ const useStyle = () => {
       margin-left: auto;
     `,
 
+    darkSideMenu: css``,
+
     header: css`
       display: flex;
       align-items: center;
@@ -116,6 +123,10 @@ const useStyle = () => {
       line-height: ${token.controlHeightLG * 1.2}px;
     `,
 
+    headerDark: css`
+      border-bottom-color: rgba(255, 255, 255, 0.1);
+    `,
+
     avatar: css`
       width: ${token.controlHeight}px;
       height: ${token.controlHeight}px;
@@ -157,7 +168,9 @@ const useStyle = () => {
       }
     `,
 
-    side: css``,
+    transBg: css`
+      background: transparent !important;
+    `,
 
     form: css`
       width: 800px;
@@ -216,7 +229,7 @@ function getTitleColor(colorPrimary: string, isLight?: boolean) {
 
   switch (closestColor) {
     case DEFAULT_COLOR:
-    case '#FB7299':
+    case PINK_COLOR:
     case '#F2BD27':
       return undefined;
 
@@ -249,7 +262,7 @@ const ThemesInfo: Record<THEME, Partial<ThemeData>> = {
     borderRadius: 4,
   },
   comic: {
-    colorPrimary: '#fb7299',
+    colorPrimary: PINK_COLOR,
     borderRadius: 16,
   },
 };
@@ -327,10 +340,24 @@ export default function Theme() {
       theme={{
         token: {
           ...themeToken,
+          ...(isLight
+            ? {}
+            : {
+                // colorBgContainer: '#474C56',
+                // colorBorderSecondary: 'rgba(255,255,255,0.06)',
+              }),
         },
         hashed: true,
         algorithm: algorithmFn,
         components: {
+          Slider: {
+            // 1677FF
+          },
+          Card: isLight
+            ? {}
+            : {
+                // colorBgContainer: '#474C56',
+              },
           Layout: isLight
             ? {
                 colorBgHeader: 'transparent',
@@ -345,7 +372,12 @@ export default function Theme() {
                 colorSubItemBg: 'transparent',
                 colorActiveBarWidth: 0,
               }
-            : {},
+            : {
+                // colorItemBg: 'transparent',
+                // colorSubItemBg: 'transparent',
+                // colorItemBgActive: 'rgba(255,255,255,0.2)',
+                // colorItemBgSelected: 'rgba(255,255,255,0.2)',
+              },
         },
       }}
     >
@@ -358,8 +390,8 @@ export default function Theme() {
         ]}
         style={{ borderRadius: themeData.borderRadius }}
       >
-        <Layout>
-          <Header css={style.header}>
+        <Layout css={style.transBg}>
+          <Header css={[style.header, style.transBg, !isLight && style.headerDark]}>
             {/* Logo */}
             <div css={style.logo}>
               <div css={[style.logoImg, closestColor !== DEFAULT_COLOR && style.logoImgPureColor]}>
@@ -390,18 +422,18 @@ export default function Theme() {
               />
             </Space>
           </Header>
-          <Layout>
-            <Sider width={200} className="site-layout-background">
+          <Layout css={style.transBg}>
+            <Sider css={style.transBg} width={200} className="site-layout-background">
               <Menu
                 mode="inline"
-                css={style.side}
+                css={[style.transBg, !isLight && style.darkSideMenu]}
                 selectedKeys={['Themes']}
                 openKeys={['Design']}
                 style={{ height: '100%', borderRight: 0 }}
                 items={sideMenuItems}
               />
             </Sider>
-            <Layout style={{ padding: '0 24px 24px' }}>
+            <Layout css={style.transBg} style={{ padding: '0 24px 24px' }}>
               <Breadcrumb style={{ margin: '16px 0' }}>
                 <Breadcrumb.Item>
                   <HomeOutlined />
@@ -411,7 +443,15 @@ export default function Theme() {
               </Breadcrumb>
               <Content>
                 <Typography.Title level={2}>{locale.customizeTheme}</Typography.Title>
-                <Card title={locale.myTheme}>
+                <Card
+                  title={locale.myTheme}
+                  extra={
+                    <Space>
+                      <Button type="default">{locale.toDef}</Button>
+                      <Button type="primary">{locale.toUse}</Button>
+                    </Space>
+                  }
+                >
                   <Form
                     form={form}
                     initialValues={themeData}