diff --git a/packages/logos-docusaurus-theme/src/client/lib/themes.ts b/packages/logos-docusaurus-theme/src/client/lib/themes.ts index a262cb3..31ded1a 100644 --- a/packages/logos-docusaurus-theme/src/client/lib/themes.ts +++ b/packages/logos-docusaurus-theme/src/client/lib/themes.ts @@ -8,6 +8,7 @@ import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/inde import { useColorMode } from '@docusaurus/theme-common' import { css } from '@emotion/react' import { useMemo } from 'react' +import { useThemeOptions } from './useThemeOptions' const typography: CreateThemeProps['typography'] = { h1: { @@ -99,8 +100,26 @@ const useThemeCssVars = (theme: Theme, colorMode: string) => export const useTheme = () => { const colorMode = useColorMode() const activePlugin = useActivePlugin() + const { typography } = useThemeOptions() + const genericFontFamily = typography?.genericFontFamily ?? 'sans-serif' - const themes = activePlugin ? docThemes : defaultThemes + const baseThemes = activePlugin ? docThemes : defaultThemes + + const themes = useMemo(() => { + const options = { + breakpoints: {}, + palette: {}, + typography: {}, + typographyGlobal: { + genericFontFamily, + }, + } + + return { + light: createTheme(options, baseThemes.light), + dark: createTheme(options, baseThemes.dark), + } + }, [baseThemes, genericFontFamily]) return { dark: themes.dark, diff --git a/packages/logos-docusaurus-theme/src/client/types/theme.types.ts b/packages/logos-docusaurus-theme/src/client/types/theme.types.ts index 5251ccb..9558761 100644 --- a/packages/logos-docusaurus-theme/src/client/types/theme.types.ts +++ b/packages/logos-docusaurus-theme/src/client/types/theme.types.ts @@ -1,3 +1,4 @@ +import { GlobalTypographyStyles } from '@acid-info/lsd-react' import type { PluginOptions as DefaultPluginOptions } from '@docusaurus/theme-classic' export type Author = { @@ -28,4 +29,5 @@ export type DocConfig = { export type ThemeOptions = DefaultPluginOptions & { docs?: Record + typography?: GlobalTypographyStyles }