@multisystemsuite/studio-theme

Theming for Studio apps — colors, fonts, light/dark mode, and MUI integration.

What is it?

studio-theme wraps Material UI with a config-driven theme so your builder and rendered apps look consistent. Users can customize colors and typography in the builder’s Design panel; those settings are stored in the schema’s theme field.

When to use it

• Wrapping any Studio UI (StudioBuilder, PageRenderer, your own pages)
• Applying schema-level theme from saved JSON
• Switching between light and dark mode

Install

pnpm add @multisystemsuite/studio-theme @multisystemsuite/studio-core
# Peer deps: react, react-dom, @mui/material, @emotion/react, @emotion/styled

Quick example

import { ThemeProvider } from '@multisystemsuite/studio-theme';

function App() {
  return (
    <ThemeProvider
      config={{
        mode: 'light',
        preset: 'mui',
        colors: {
          primary: '#6366f1',
          secondary: '#0ea5e9',
          background: '#eef2f6',
          paper: '#ffffff',
        },
        radius: { default: 10 },
      }}
    >
      {/* Your Studio components */}
    </ThemeProvider>
  );
}

Use theme from a saved schema:

<ThemeProvider config={schema.theme ?? { mode: 'light', preset: 'mui' }}>
  <PageRenderer schema={schema} />
</ThemeProvider>

Exports

| Export | Purpose | |--------|---------| | ThemeProvider | React context + CssBaseline | | createStudioTheme | Build a MUI Theme object from config | | ThemeConfig | TypeScript type for theme settings |

Related packages

• studio-builder — Design panel edits schema.theme
• studio-renderer — Live preview respects theme config

License

MIT