Theming

Prime SaaS uses MUI (Material UI) v7 for the UI layer across the main app and client landing. Each has its own theme file that controls the color palette, typography, component overrides, and dark/light mode behavior.

Frontend theme

File: demo-client/src/app/themeContext.jsx

This file sets up:

• A React context that provides the current theme mode (light | dark)
• localStorage persistence under the key themeMode
• A custom MUI theme with the Prime SaaS color palette

Color palette

// Primary — Indigo
primary: {
  main: '#6366F1',
}

// Secondary — Violet
secondary: {
  main: '#8B5CF6',
}

// Light mode backgrounds
background: {
  default: '#FAFBFF',
  paper: '#FFFFFF',
}

// Dark mode backgrounds
background: {
  default: '#0B1120',
  paper: '#111827',
}

Changing colors

Open demo-client/src/app/themeContext.jsx and update the palette values inside the createTheme() call. MUI will propagate the changes to all components automatically.

Toggling dark/light mode

The ThemeContext exposes a toggleTheme function. Any component can call it:

import { useThemeContext } from '../app/themeContext';

function MyComponent() {
  const { mode, toggleTheme } = useThemeContext();
  return <button onClick={toggleTheme}>Switch to {mode === 'light' ? 'dark' : 'light'}</button>;
}

Client landing theme

File: demo-client-landing/src/app/ (MUI theme config)

The demo-client-landing/ Next.js site has a standalone MUI theme, independent from the main app.

Component overrides

Both themes support MUI components overrides for fine-grained control:

components: {
  MuiButton: {
    styleOverrides: {
      root: {
        borderRadius: 8,
        textTransform: 'none',
        fontWeight: 600,
      },
    },
  },
  MuiTextField: { ... },
  MuiCard: { ... },
}

Typography

Default font is the system font stack. To use a custom font, add it to public/index.html (Google Fonts or self-hosted) and set it in the theme:

typography: {
  fontFamily: '"Inter", system-ui, sans-serif',
}