How to customize theme outside next.config.mjs

[mtr1990]

Summary

In the default example the variables are set in next.config.mjs

How can we createTheme and import into next.config.mjs like

// /theme/palette.ts
export const palette = {
  primary: {
    light: '#C684FF',
    main: '#8E33FF',
    dark: '#5119B7',
    contrastText: '#FFFFFF',
  },
};

/theme/base-theme.ts
import { createTheme } from '@mui/material';
import { palette } from './palette';

export const baseTheme = createTheme({
  cssVariables: true,
  colorSchemes: {
    light: {
      palette,
    },
    dark: {
      palette,
    },
  },
  typography: {
    fontFamily: 'var(--font-roboto)',
  },
});

// and next.config.mjs
import { withPigment } from '@pigment-css/nextjs-plugin';
import {baseTheme} from './src/theme/base-theme';

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withPigment(nextConfig, {
  theme:baseTheme,
  transformLibraries: ['@mui/material'],
});

https://stackblitz.com/edit/github-xzdksv?file=next.config.mjs,src%2Fapp%2Fpage.tsx,src%2Ftheme%2Fbase-theme.mjs,src%2Ftheme%2Fpalette.ts

Examples

No response

Motivation

No response

Search keywords: Customize theme

[astrodomas]

Another thing to note, people who are using a monorepo setup, for example - to store a design system as a separate library/package. They will have the theme styled there, thus making it impossible to import it to next.config.(js|ts|mjs) at all. Any suggestions from the maintainers on how to approach this? Consider the following setup as using nrwl/nx monorepo as an example:

apps/next-app-1/next.config.js libs/design-system/src/theme.js

If the import inside next.config.js will be made as @monorepo/design-system/theme, during build time you will get an error, meaning that theme.js cannot be reused.

[brijeshb42]

If this about importing files that have not been transpiled yet into the next.config file ? I am not sure I fully understand the question. In a monorepo setup, you can import theme from another package into your app package's next.config. If you aren't able to, I'd appreciate a repro in a github repo that I can debug.

[astrodomas]

If this about importing files that have not been transpiled yet into the next.config file ?

If this about importing files that have not been transpiled yet into the next.config file ? exactly

[brijeshb42]

With latest version of next.js (v15), you can declare your config in next.config.ts and also import from ts files. For older versions, you'll need a transpilation step in-between and we don't have a solution for that. For older versions, it is really an issue with Next.js and we don't have much control over it.