Skip to main content

buildTheme() / buildThemePair()

The theme builder functions convert a ThemeBuildConfig object into a fully configured MUI Theme.

Import​

import { buildTheme, buildThemePair } from "@xocialive/ui-components/themes";
import type { ThemeBuildConfig } from "@xocialive/ui-components/themes";

buildThemePair(config)​

Generates both the light and dark theme from a single config. This is what ThemeContext calls internally.

function buildThemePair(config: ThemeBuildConfig): {
  light: Theme;
  dark: Theme;
};

Example:

const { light, dark } = buildThemePair({
  colorTheme: "ocean",
  fontFamily: "Cairo",
  borderRadius: "rounded",
  scrollbarStyle: "thin",
  shadowIntensity: "medium",
});

buildTheme(config, mode)​

Generates a single theme for the specified mode.

function buildTheme(config: ThemeBuildConfig, mode: "light" | "dark"): Theme;

Example:

const myTheme = buildTheme({ colorTheme: "forest", borderRadius: "sharp" }, "light");

Using outside of AppProvider​

If you are integrating the library into an existing app that already has a MUI ThemeProvider, you can build the theme manually:

import { ThemeProvider } from "@mui/material/styles";
import { buildTheme } from "@xocialive/ui-components/themes";

const theme = buildTheme({ colorTheme: "aurora" }, "light");

function App() {
  return <ThemeProvider theme={theme}>{/* library components work here */}</ThemeProvider>;
}

Known gotcha: components must be explicit​

If you merge a built theme with additional palette overrides via createTheme, you must explicitly carry forward the components key or MUI component overrides from the library will be lost:

const finalTheme = createTheme({
  ...baseTheme,
  components: baseTheme.components, // ← REQUIRED
  palette: {
    ...baseTheme.palette,
    primary: { main: "#custom" },
  },
});