Theming

The default theme#

import { ThemeProvider } from "@getsoren/design-system";
 
const App = () => (
  <ThemeProvider>
    {/* your app */}
  </ThemeProvider>
);

With no props, ThemeProvider applies the library's built-in default theme, based on MUI Core's theming system.

Overriding with a custom theme#

Pass your own theme through the theme prop when you need to override the defaults:

<ThemeProvider theme={YOUR_CUSTOM_THEME}>
  {/* your app */}
</ThemeProvider>

Because the library sits on top of MUI Core, YOUR_CUSTOM_THEME follows MUI's theme shape — the same mental model as theming any MUI Core application.

Where to go next#

If you only need color tokens rather than a full theme override, the colors package may be all you need — it ships Material Design colors independently of the theme system.

← Back: Quickstart · Next: Colors →