Implementation:FlowiseAI Flowise Typography

Knowledge Sources	FlowiseAI Flowise
Domains	Theming, Typography
Last Updated	2026-02-12 07:00 GMT

Overview

themeTypography is a theme configuration function that defines the complete typography scale and custom text-related style variants for the Flowise MUI theme.

Description

This function accepts a theme customization object and returns a typography configuration covering standard MUI variants (h1-h6, subtitle1, subtitle2, caption, body1, body2, button) as well as custom Flowise-specific variants (customInput, mainContent, menuCaption, subMenuCaption, commonAvatar, smallAvatar, mediumAvatar, largeAvatar). Font sizes range from 0.6875rem (subMenuCaption) to 2.125rem (h1), and the function uses the theme's customization.fontFamily for the base font family and customization.borderRadius for layout variants.

Usage

Call this function during MUI theme construction, passing the theme options object, and use the returned value as the typography property of createTheme. The custom variants (mainContent, commonAvatar, etc.) can be referenced via theme.typography.mainContent in styled components or the sx prop.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/themes/typography.js
• Lines: 1-133

Signature

export default function themeTypography(theme) {
    return {
        fontFamily: theme?.customization?.fontFamily,
        h1: { ... },
        h2: { ... },
        h3: { ... },
        h4: { ... },
        h5: { ... },
        h6: { ... },
        subtitle1: { ... },
        subtitle2: { ... },
        caption: { ... },
        body1: { ... },
        body2: { ... },
        button: { ... },
        customInput: { ... },
        mainContent: { ... },
        menuCaption: { ... },
        subMenuCaption: { ... },
        commonAvatar: { ... },
        smallAvatar: { ... },
        mediumAvatar: { ... },
        largeAvatar: { ... }
    }
}

Import

import themeTypography from '@/themes/typography'

I/O Contract

Inputs

Name	Type	Required	Description
theme	object	Yes	Theme customization object containing customization (fontFamily, borderRadius), heading, textDark, darkTextPrimary, darkTextSecondary, grey500, and background properties

Outputs

Name	Type	Description
(return value)	object	A typography configuration object containing standard MUI variants (h1-h6, body1, body2, subtitle1, subtitle2, caption, button) and custom variants (customInput, mainContent, menuCaption, subMenuCaption, commonAvatar, smallAvatar, mediumAvatar, largeAvatar)

Usage Examples

Basic Usage

import { createTheme } from '@mui/material/styles'
import themeTypography from '@/themes/typography'

const themeOptions = {
    customization: { fontFamily: `'Roboto', sans-serif`, borderRadius: 12 },
    heading: '#333',
    textDark: '#111',
    // ...other options
}

const theme = createTheme({
    typography: themeTypography(themeOptions),
    // ...other theme config
})

Related Pages

• Principle:FlowiseAI_Flowise_Theme_Configuration