docs: theme picker

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

@@ -0,0 +1,59 @@
+import { css } from '@emotion/react';
+import { Space } from 'antd';
+import * as React from 'react';
+import useSiteToken from '../../../../hooks/useSiteToken';
+
+export const THEMES: Record<string, string> = {
+  default: 'https://gw.alipayobjects.com/zos/bmw-prod/ae669a89-0c65-46db-b14b-72d1c7dd46d6.svg',
+  dark: 'https://gw.alipayobjects.com/zos/bmw-prod/0f93c777-5320-446b-9bb7-4d4b499f346d.svg',
+  lark: 'https://gw.alipayobjects.com/zos/bmw-prod/3e899b2b-4eb4-4771-a7fc-14c7ff078aed.svg',
+  comic: 'https://gw.alipayobjects.com/zos/bmw-prod/ed9b04e8-9b8d-4945-8f8a-c8fc025e846f.svg',
+};
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    themeCard: css`
+      border-radius: ${token.radiusBase}px;
+      cursor: pointer;
+      outline-offset: 1px;
+      transition: all ${token.motionDurationSlow};
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+        0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    `,
+
+    themeCardActive: css`
+      outline: ${token.controlOutlineWidth * 2}px solid ${token.colorPrimary};
+    `,
+  };
+};
+
+export interface ThemePickerProps {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export default function ThemePicker({ value, onChange }: ThemePickerProps) {
+  const { token } = useSiteToken();
+  const style = useStyle();
+
+  return (
+    <Space size={token.paddingLG}>
+      {Object.keys(THEMES).map(theme => {
+        const url = THEMES[theme];
+
+        return (
+          <img
+            key={theme}
+            src={url}
+            css={[style.themeCard, value === theme && style.themeCardActive]}
+            onClick={() => {
+              onChange?.(theme);
+            }}
+          />
+        );
+      })}
+    </Space>
+  );
+}

.dumi/pages/index/index/Theme.tsx → .dumi/pages/index/index/Theme/index.tsx

@@ -6,8 +6,8 @@ import {
   BellOutlined,
   QuestionCircleOutlined,
 } from '@ant-design/icons';
-import useLocale from '../../../hooks/useLocale';
-import useSiteToken from '../../../hooks/useSiteToken';
+import useLocale from '../../../../hooks/useLocale';
+import useSiteToken from '../../../../hooks/useSiteToken';
 import {
   Typography,
   Layout,
@@ -24,6 +24,7 @@ import {
   Segmented,
   theme,
 } from 'antd';
+import ThemePicker, { THEMES } from './ThemePicker';
 
 const { Header, Content, Sider } = Layout;
 
@@ -87,7 +88,7 @@ const useStyle = () => {
     side: css``,
 
     form: css`
-      width: 500px;
+      width: 800px;
       margin: 0 auto;
     `,
   };
@@ -131,6 +132,7 @@ const sideMenuItems: MenuProps['items'] = [
 ];
 
 interface ThemeData {
+  themeType: keyof typeof THEMES;
   colorPrimary: string;
   radiusBase: number;
   compact: 'default' | 'compact';
@@ -142,6 +144,7 @@ export default function Theme() {
   const [locale] = useLocale(locales);
 
   const [themeData, setThemeData] = React.useState<ThemeData>({
+    themeType: 'default',
     colorPrimary: '#1677FF',
     radiusBase: 6,
     compact: 'default',
@@ -152,9 +155,13 @@ export default function Theme() {
     setThemeData(nextThemeData);
   };
 
-  const { algorithm, compact, ...token } = themeData;
+  const { algorithm, compact, themeType, ...token } = themeData;
   const isLight = algorithm === 'light';
-  const algorithmFn = isLight ? theme.defaultAlgorithm : theme.darkAlgorithm;
+
+  const algorithmFn = themeType !== 'dark' ? theme.defaultAlgorithm : theme.darkAlgorithm;
+
+  // ================================ Themes ================================
+  React.useEffect(() => {}, [themeType]);
 
   // ================================ Render ================================
   return (
@@ -221,9 +228,14 @@ export default function Theme() {
                   <Form
                     initialValues={themeData}
                     onValuesChange={onThemeChange}
-                    labelCol={{ span: 8 }}
+                    labelCol={{ span: 4 }}
+                    wrapperCol={{ span: 20 }}
                     css={style.form}
                   >
+                    <Form.Item label={locale.titleTheme} name="themeType">
+                      <ThemePicker />
+                    </Form.Item>
+
                     <Form.Item label={locale.titlePrimaryColor} name="colorPrimary">
                       <Input style={{ width: 120 }} />
                     </Form.Item>
@@ -236,7 +248,7 @@ export default function Theme() {
                         <Radio value="compact">{locale.compact}</Radio>
                       </Radio.Group>
                     </Form.Item>
-                    <Form.Item label={locale.titleTheme} name="algorithm">
+                    {/* <Form.Item label={locale.titleTheme} name="algorithm">
                       <Segmented
                         options={[
                           {
@@ -249,7 +261,7 @@ export default function Theme() {
                           },
                         ]}
                       />
-                    </Form.Item>
+                    </Form.Item> */}
                   </Form>
                 </Card>
               </Content>