Implementation:FlowiseAI Flowise Palette

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

Overview

themePalette is a theme configuration function that generates the complete color palette object for the Flowise MUI theme, supporting both light and dark mode variants.

Description

This function accepts a theme customization object and returns a palette definition covering standard MUI color groups (primary, secondary, error, warning, success, grey, text, background) as well as custom Flowise-specific groups (orange, teal, dark, card, asyncSelect, timeMessage, canvasHeader, codeEditor, nodeToolTip, textBackground). Each color group uses theme.customization.isDarkMode to select between light and dark color tokens, ensuring consistent theming across the application.

Usage

Call this function during MUI theme construction, passing the theme options object, and use the returned value as the palette property of createTheme. This is typically invoked once when the theme is built or when the user toggles between light and dark mode.

Code Reference

Source Location

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

Signature

export default function themePalette(theme) {
    return {
        mode: theme?.customization?.navType,
        primary: { ... },
        secondary: { ... },
        error: { ... },
        orange: { ... },
        teal: { ... },
        warning: { ... },
        success: { ... },
        grey: { ... },
        dark: { ... },
        text: { ... },
        background: { ... },
        textBackground: { ... },
        card: { ... },
        asyncSelect: { ... },
        timeMessage: { ... },
        canvasHeader: { ... },
        codeEditor: { ... },
        nodeToolTip: { ... }
    }
}

Import

import themePalette from '@/themes/palette'

I/O Contract

Inputs

Name	Type	Required	Description
theme	object	Yes	Theme customization object containing colors (color tokens), customization (navType, isDarkMode), darkTextPrimary, darkTextSecondary, heading, textDark, paper, and backgroundDefault properties

Outputs

Name	Type	Description
(return value)	object	A palette configuration object with standard MUI color groups and custom Flowise-specific groups (card, canvasHeader, codeEditor, nodeToolTip, etc.)

Usage Examples

Basic Usage

import { createTheme } from '@mui/material/styles'
import themePalette from '@/themes/palette'

const themeOptions = {
    colors: colorTokens,
    customization: { navType: 'dark', isDarkMode: true },
    darkTextPrimary: '#fff',
    // ...other options
}

const theme = createTheme({
    palette: themePalette(themeOptions),
    // ...other theme config
})

Related Pages

• Principle:FlowiseAI_Flowise_Theme_Configuration