✨ feat: Support custom fonts in ThemeProvider (#216)

lobehub · Oct 28, 2024 · f80adf4 · f80adf4
1 parent 17575b1
commit f80adf4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/src/ThemeProvider/demos/CustomFonts.tsx b/src/ThemeProvider/demos/CustomFonts.tsx
@@ -0,0 +1,28 @@
+import { ThemeProvider } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  const theme = useTheme();
+  return (
+    <Flexbox>
+      <ThemeProvider>
+        <p>Default Fonts</p>
+        <h1>Hello World</h1>
+      </ThemeProvider>
+      <ThemeProvider
+        customFonts={[
+          'https://registry.npmmirror.com/@lobehub/webfont-mono/latest/files/css/index.css',
+        ]}
+        theme={{
+          token: {
+            fontFamily: `Hack, ${theme.fontFamily}`,
+          },
+        }}
+      >
+        <p>Custom Fonts</p>
+        <h1>Hello World</h1>
+      </ThemeProvider>
+    </Flexbox>
+  );
+};
diff --git a/src/ThemeProvider/index.md b/src/ThemeProvider/index.md
@@ -9,6 +9,10 @@ description: ThemeProvider is a component that provides a theme to all the child
 
 <code src="./demos/index.tsx" center></code>
 
+## Custom Fonts
+
+<code src="./demos/CustomFonts.tsx" center></code>
+
 ## APIs
 
 <API></API>
diff --git a/src/ThemeProvider/index.tsx b/src/ThemeProvider/index.tsx
@@ -9,6 +9,7 @@ import {
   GetAntdTheme,
   StyleProvider,
 } from 'antd-style';
+import { merge } from 'lodash-es';
 import { CSSProperties, memo, useCallback } from 'react';
 
 import { useCdnFn } from '@/ConfigProvider';
@@ -19,42 +20,43 @@ import { LobeCustomToken } from '@/types/customToken';
 
 import GlobalStyle from './GlobalStyle';
 
-export interface ThemeProviderProps extends Omit<AntdThemeProviderProps<any>, 'theme'> {
+export interface ThemeProviderProps extends AntdThemeProviderProps<any> {
   className?: string;
+  /**
+   * @description Webfont loader css strings
+   */
+  customFonts?: string[];
   customStylish?: (theme: CustomStylishParams) => { [key: string]: any };
+
   customTheme?: {
     neutralColor?: NeutralColors;
     primaryColor?: PrimaryColors;
   };
-
   /**
    * @description Custom extra token
    */
   customToken?: (theme: CustomTokenParams) => { [key: string]: any };
+  enableCustomFonts?: boolean;
   enableGlobalStyle?: boolean;
-  enableWebfonts?: boolean;
   style?: CSSProperties;
-  /**
-   * @description Webfont loader css strings
-   */
-  webfonts?: string[];
 }
 
 const ThemeProvider = memo<ThemeProviderProps>(
   ({
     children,
     customStylish,
     customToken,
-    enableWebfonts = true,
+    enableCustomFonts = true,
     enableGlobalStyle = true,
-    webfonts,
+    customFonts,
     customTheme = {},
     className,
     style,
+    theme: antdTheme,
     ...res
   }) => {
     const genCdnUrl = useCdnFn();
-    const webfontUrls = webfonts || [
+    const webfontUrls = customFonts || [
       genCdnUrl({ path: 'css/index.css', pkg: '@lobehub/webfont-mono', version: '1.0.0' }),
       genCdnUrl({
         path: 'css/index.css',
@@ -80,18 +82,20 @@ const ThemeProvider = memo<ThemeProviderProps>(
     );
 
     const theme = useCallback<GetAntdTheme>(
-      (appearance) =>
-        createLobeAntdTheme({
+      (appearance) => {
+        const lobeTheme = createLobeAntdTheme({
           appearance,
           neutralColor: customTheme.neutralColor,
           primaryColor: customTheme.primaryColor,
-        }),
-      [customTheme.primaryColor, customTheme.neutralColor],
+        });
+        return merge(lobeTheme, antdTheme);
+      },
+      [customTheme.primaryColor, customTheme.neutralColor, antdTheme],
     );
 
     return (
       <>
-        {enableWebfonts &&
+        {enableCustomFonts &&
           webfontUrls?.length > 0 &&
           webfontUrls.map((webfont) => <FontLoader key={webfont} url={webfont} />)}
         <StyleProvider speedy={process.env.NODE_ENV === 'production'}>