# Theme/Style Configuration

{% tabs %}
{% tab title="VITE(TS)" %}
Customize Mantis with your theme. You can change the colors, the typography, and much more. Material-UI provides flexibility to change the style of the project in a single place, and on top of it, we made it more centralized and consistent with the proper file structure.

## Theme configuration

The whole theme can be configured from the folder.**`src/themes/index.tsx`** Theme initialization starts **`index.jsx`**where the palette, typography, and components' overridable style exist.

{% code title="src/themes/index.tsx" %}

```typescript
import { ReactNode, useMemo } from 'react';

// material-ui
import { createTheme, StyledEngineProvider, ThemeOptions, ThemeProvider, Theme, TypographyVariantsOptions } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// project imports
import { CSS_VAR_PREFIX, DEFAULT_THEME_MODE, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import CustomShadows from './custom-shadows';
import componentsOverride from './overrides';
import { buildPalette } from './palette';
import Typography from './typography';

// types
import type {} from './extend-theme-types';

type ThemeCustomizationProps = {
  children: ReactNode;
};

// ==============================|| DEFAULT THEME - MAIN ||============================== //

export default function ThemeCustomization({ children }: ThemeCustomizationProps) {
  const { state } = useConfig();

  const themeTypography: TypographyVariantsOptions = useMemo<TypographyVariantsOptions>(
    () => Typography(state.fontFamily!),
    [state.fontFamily]
  );

  const palette = useMemo(() => buildPalette(state.presetColor), [state.presetColor]);

  const themeOptions: ThemeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: state.themeDirection,
      mixins: {
        toolbar: {
          minHeight: 60,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      typography: themeTypography,
      colorSchemes: {
        light: {
          palette: palette.light,
          customShadows: CustomShadows(palette.light, ThemeMode.LIGHT)
        },
        dark: {
          palette: palette.dark,
          customShadows: CustomShadows(palette.dark, ThemeMode.DARK)
        }
      },
      cssVariables: {
        cssVarPrefix: CSS_VAR_PREFIX,
        colorSchemeSelector: 'data-color-scheme'
      }
    }),
    [state.themeDirection, themeTypography, palette]
  );

  const themes: Theme = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider disableTransitionOnChange theme={themes} modeStorageKey="theme-mode" defaultMode={DEFAULT_THEME_MODE}>
        <CssBaseline enableColorScheme />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

```

{% endcode %}

You can check other settings like theme typography, palette, and component style override in the same folder. **`src\themes`**

## How to customize it?

You might come across questions like how to change a theme's **primary** color. How do I change the textbox or other components that can apply to an entire theme?

### Customize Theme Colors

To change the color of the theme, you can apply color directly to `src\theme\palatte.ts`

For instance, if you want to change the color that `theme.var.palette.primary.light` is being used in a theme, then update the following in **`src\themes\palatte.ts`**

{% code title="src/themes/palette.ts" %}

```typescript
...

// ==============================|| DEFAULT THEME - PALETTE  ||============================== //

export function buildPalette(presetColor: PresetColor = 'default') {
  // light colors
  const lightColors: PalettesProps = { ...presetPalettes, grey: buildGrey(ThemeMode.LIGHT) };
  const lightPaletteColor: PaletteThemeProps = ThemeOption(lightColors, presetColor, ThemeMode.LIGHT);

  // dark colors
  const darkColors: PalettesProps = { ...presetDarkPalettes, grey: buildGrey(ThemeMode.DARK) };
  const darkPaletteColor: PaletteThemeProps = ThemeOption(darkColors, presetColor, ThemeMode.DARK);

  const commonColor = { common: { black: '#000', white: '#fff' } };

  const extendedLight = extendPaletteWithChannels(lightPaletteColor);
  const extendedDark = extendPaletteWithChannels(darkPaletteColor);
  const extendedCommon = extendPaletteWithChannels(commonColor);

  return {
    light: {
      mode: 'light' as PaletteMode,
      ...extendedCommon,
      ...extendedLight,
     ...
    },
    dark: {
      mode: 'dark' as PaletteMode,
      ...extendedCommon,
      ...extendedDark,
      ...
    }
  };
}

```

{% endcode %}

## Customize Theme Typography

You can customize the typography used in the theme as well from the central place.

For instance, If you want to change `font-weight` the typography `h5` to `600`. To do that, open **`src\themes\typography.ts`** and update as below:

{% code title="src/themes/typography.ts" %}

```typescript
/**
 * Typography used in theme
 */
export default function Typography(fontFamily: FontFamily): TypographyVariantsOptions {
  return {
        ...
        h5: {
            ...
            fontWeight: 600 // changed this to make it 900 from 500
        },
        ...
    };
}
```

{% endcode %}

This will apply to all places where you used Typography variants as **`h5`**

**`<Typography variant="h5"...>`**

## Customize MUI Component style

We have provided a central location to override any default style of any component. All the override styles exist in **`src\themes\overrides`**

{% code title="src/themes/overrides/Accordion.ts" %}

```typescript
// material-ui
import { Theme } from '@mui/material/styles';

// ==============================|| OVERRIDES - ALERT TITLE ||============================== //

export default function Accordion(theme: Theme) {
  return {
    MuiAccordion: {
      defaultProps: {
        disableGutters: true,
        square: true,
        elevation: 0
      },
      styleOverrides: {
        root: {
          border: '1px solid',
          borderColor: theme.vars.palette.secondary.light,
          '&:not(:last-child)': {
            borderBottom: 0
          },
          '&:before': {
            display: 'none'
          },
          '&.Mui-disabled': {
            backgroundColor: theme.vars.palette.secondary.lighter
          }
        }
      }
    }
  };
}

```

{% endcode %}

You can add a default property for any MUI component and it will be applied everywhere. We emitted lines to view it better in the above code block but you can see many controls' styles overridden in the same file. Feel free to change it as per your need.
{% endtab %}

{% tab title="VITE(JS)" %}
Customize Mantis with your theme. You can change the colors, the typography, and much more. Material-UI provides flexibility to change the style of the project in a single place and on top of it, we made it more centralized and consistent with the proper file structure.

## Theme configuration

The whole theme can be configured from the folder.**`src/themes/index.jsx`** Theme initialization starts **`index.jsx`**&#x77;here the palette, typography, and component's overridable style exist.

{% code title="src/themes/index.jsx" %}

```javascript
import PropTypes from 'prop-types';
import { useMemo } from 'react';

// material-ui
import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// project imports
import { CSS_VAR_PREFIX, DEFAULT_THEME_MODE, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import CustomShadows from './custom-shadows';
import componentsOverride from './overrides';
import { buildPalette } from './palette';
import Typography from './typography';

// ==============================|| DEFAULT THEME - MAIN ||============================== //

export default function ThemeCustomization({ children }) {
  const { state } = useConfig();

  const themeTypography = useMemo(() => Typography(state.fontFamily), [state.fontFamily]);

  const palette = useMemo(() => buildPalette(state.presetColor), [state.presetColor]);

  const themeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: state.themeDirection,
      mixins: {
        toolbar: {
          minHeight: 60,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      typography: themeTypography,
      colorSchemes: {
        light: {
          palette: palette.light,
          customShadows: CustomShadows(palette.light, ThemeMode.LIGHT)
        },
        dark: {
          palette: palette.dark,
          customShadows: CustomShadows(palette.dark, ThemeMode.DARK)
        }
      },
      cssVariables: {
        cssVarPrefix: CSS_VAR_PREFIX,
        colorSchemeSelector: 'data-color-scheme'
      }
    }),
    [state.themeDirection, themeTypography, palette]
  );

  const themes = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider disableTransitionOnChange theme={themes} modeStorageKey="theme-mode" defaultMode={DEFAULT_THEME_MODE}>
        <CssBaseline enableColorScheme />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

ThemeCustomization.propTypes = { children: PropTypes.node };

```

{% endcode %}

You can check other settings like theme typography, palette, and component style override in the same folder. **`src\themes`**

## How to customise it?

You might come across questions like how to change a theme's **primary** colour. How do I change the textbox or other components that can apply to an entire theme?

### Customize Theme Colors

To change the colour of the theme, you can apply colour directly to `src\theme\palatte.js`

For instance, if you want to change the colour that `theme.var.palette.primary.light` is being used in a theme, then update the following in **`src\themes\palatte.js`**

{% code title="src/themes/palette.js" %}

```javascript
...

// ==============================|| DEFAULT THEME - PALETTE  ||============================== //

export function buildPalette(presetColor = 'default') {
  // light colors
  const lightColors = { ...presetPalettes, grey: buildGrey(ThemeMode.LIGHT) };
  const lightPaletteColor = ThemeOption(lightColors, presetColor, ThemeMode.LIGHT);

  // dark colors
  const darkColors = { ...presetDarkPalettes, grey: buildGrey(ThemeMode.DARK) };
  const darkPaletteColor = ThemeOption(darkColors, presetColor, ThemeMode.DARK);

  const commonColor = { common: { black: '#000', white: '#fff' } };

 ...

  return {
    light: {
      mode: 'light',
      ...extendedCommon,
      ...extendedLight,
      ...
    },
    dark: {
      mode: 'dark',
      ...extendedCommon,
      ...extendedDark,
      ...
    }
  };
}

```

{% endcode %}

## Customize Theme Typography

You can customize the typography used in the theme as well from the central place.

For instance, If you want to change `font-weight` the typography `h5` to `600`. To do that, open **`src\themes\typography.js`** and update as below:

{% code title="src/themes/typography.js" %}

```javascript
/**
 * Typography used in theme
 */
export default function Typography(fontFamily){
  return {
        ...
        h5: {
            ...
            fontWeight: 600 // changed this to make it 900 from 500
        },
        ...
    };
}
```

{% endcode %}

This will apply to all places where you used Typography variants as **`h5`**

**`<Typography variant="h5"...>`**

## Customize MUI Component style

We have provided a central location to override any default style of any component. All the override styles exist in **`src\themes\overrides`**

{% code title="src/themes/overrides/Accordion.js" %}

```javascript
// ==============================|| OVERRIDES - ALERT TITLE ||============================== //

export default function Accordion(theme) {
  return {
    MuiAccordion: {
      defaultProps: {
        disableGutters: true,
        square: true,
        elevation: 0
      },
      styleOverrides: {
        root: {
          border: '1px solid',
          borderColor: theme.vars.palette.secondary.light,
          '&:not(:last-child)': {
            borderBottom: 0
          },
          '&:before': {
            display: 'none'
          },
          '&.Mui-disabled': {
            backgroundColor: theme.vars.palette.secondary.lighter
          }
        }
      }
    }
  };
}
```

{% endcode %}

You can add a default property for any MUI component and it will be applied everywhere. We emitted lines to view it better in the above code block but you can see many controls' styles overridden in the same file. Feel free to change it as per your need.
{% endtab %}

{% tab title="NEXT(TS)" %}
Customize Mantis with your theme. You can change the colors, the typography, and much more. Material-UI provides flexibility to change the style of the project in a single place and on top of it, we made it more centralized and consistent with the proper file structure.

## Theme configuration

The whole theme can be configured from the folder.**`src/themes/index.tsx`** Theme initialization starts **`index.jsx`**&#x77;here the palette, typography, and component's overridable style exist.

{% code title="src/themes/index.tsx" %}

```typescript
import { ReactNode, useMemo } from 'react';

// material-ui
import { createTheme, ThemeOptions, ThemeProvider, Theme, TypographyVariantsOptions } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// project imports
import { CSS_VAR_PREFIX, DEFAULT_THEME_MODE, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import CustomShadows from './custom-shadows';
import componentsOverride from './overrides';
import { buildPalette } from './palette';
import Typography from './typography';
import { NextAppDirEmotionCacheProvider } from './emotionCache';

// types
import type {} from './extend-theme-types';

// types
type ThemeCustomizationProps = {
  children: ReactNode;
};

// ==============================|| DEFAULT THEME - MAIN ||============================== //

export default function ThemeCustomization({ children }: ThemeCustomizationProps) {
  const { state } = useConfig();

  const themeTypography: TypographyVariantsOptions = useMemo<TypographyVariantsOptions>(
    () => Typography(state.fontFamily!),
    [state.fontFamily]
  );

  const palette = useMemo(() => buildPalette(state.presetColor), [state.presetColor]);

  const themeOptions: ThemeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: state.themeDirection,
      mixins: {
        toolbar: {
          minHeight: 60,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      typography: themeTypography,
      colorSchemes: {
        light: {
          palette: palette.light,
          customShadows: CustomShadows(palette.light, ThemeMode.LIGHT)
        },
        dark: {
          palette: palette.dark,
          customShadows: CustomShadows(palette.dark, ThemeMode.DARK)
        }
      },
      cssVariables: {
        cssVarPrefix: CSS_VAR_PREFIX,
        colorSchemeSelector: 'data-color-scheme'
      }
    }),
    [state.themeDirection, themeTypography, palette]
  );

  const themes: Theme = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
      <ThemeProvider disableTransitionOnChange theme={themes} modeStorageKey="theme-mode" defaultMode={DEFAULT_THEME_MODE}>
        <CssBaseline enableColorScheme />
        {children}
      </ThemeProvider>
    </NextAppDirEmotionCacheProvider>
  );
}
```

{% endcode %}

You can check other settings like theme typography, palette, and component style override in the same folder. **`src\themes`**

## How to customize it?

You might come across questions like how to change a theme's **primary** color. How do I modify the text box or other components that can be applied to an entire theme?

### Customize Theme Colors

To change the color of the theme, you can apply color directly to `src\theme\palatte.ts`

For instance, if you want to change color that `theme.palette.primary.light` is being used in a theme, then update the following in **`src\themes\palatte.ts`**

<pre class="language-typescript" data-title="src/themes/palette.ts"><code class="lang-typescript">...

export function buildPalette(presetColor: PresetColor = 'default') {
  // light colors
  const lightColors: PalettesProps = { ...presetPalettes, grey: buildGrey(ThemeMode.LIGHT) };
  const lightPaletteColor: PaletteThemeProps = ThemeOption(lightColors, presetColor, ThemeMode.LIGHT);

  // dark colors
  const darkColors: PalettesProps = { ...presetDarkPalettes, grey: buildGrey(ThemeMode.DARK) };
  const darkPaletteColor: PaletteThemeProps = ThemeOption(darkColors, presetColor, ThemeMode.DARK);
 
<strong>  ...
</strong>
  return {
    light: {
      mode: 'light' as PaletteMode,
      ...extendedCommon,
      ...extendedLight,
      ...
    },
    dark: {
      mode: 'dark' as PaletteMode,
      ...extendedCommon,
      ...extendedDark,
     ...
    }
  };
}
</code></pre>

## Customize Theme Typography

You can customize the typography used in the theme as well from the central place.

For instance, If you want to change `font-weight` the typography `h5` to `600`. To do that, open **`src\themes\typography.ts`** and update as below:

{% code title="src/themes/typography.ts" %}

```typescript
/**
 * Typography used in theme
 */
export default function Typography(fontFamily: FontFamily): TypographyVariantsOptions {
  return {
        ...
        h5: {
            ...
            fontWeight: 600 // changed this to make it 900 from 500
        },
        ...
    };
}
```

{% endcode %}

This will apply to all places where you used Typography variants as **`h5`**

**`<Typography variant="h5"...>`**

## Customize MUI Component style

We have provided a central location to override any default style of any component. All the override styles exist in **`src\themes\overrides`**

{% code title="src/themes/overrides/Accordion.ts" %}

```typescript
// material-ui
import { Theme } from '@mui/material/styles';

// ==============================|| OVERRIDES - ALERT TITLE ||============================== //

export default function Accordion(theme: Theme) {
  return {
    MuiAccordion: {
      defaultProps: {
        disableGutters: true,
        square: true,
        elevation: 0
      },
      styleOverrides: {
        root: {
          border: '1px solid',
          borderColor: theme.vars.palette.secondary.light,
          '&:not(:last-child)': {
            borderBottom: 0
          },
          '&:before': {
            display: 'none'
          },
          '&.Mui-disabled': {
            backgroundColor: theme.vars.palette.secondary.lighter
          }
        }
      }
    }
  };
}
```

{% endcode %}

You can add a default property for any MUI component and it will be applied everywhere. We emitted lines to view it better in the above code block but you can see many controls' styles overridden in the same file. Feel free to change it as per your need.
{% endtab %}

{% tab title="NEXT(JS)" %}
Customize Mantis with your theme. You can change the colors, the typography, and much more. Material-UI provides flexibility to change the style of the project in a single place and on top of it, we made it more centralized and consistent with the proper file structure.

## Theme configuration

The whole theme can be configured from the folder.**`src/themes/index.jsx`** Theme initialization starts **`index.jsx`**&#x77;here the palette, typography, and component's overridable style exist.

{% code title="src/themes/index.jsx" %}

```javascript
import PropTypes from 'prop-types';
import { useMemo } from 'react';

// material-ui
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// project imports
import { CSS_VAR_PREFIX, DEFAULT_THEME_MODE, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import CustomShadows from './custom-shadows';
import componentsOverride from './overrides';
import { buildPalette } from './palette';
import Typography from './typography';
import { NextAppDirEmotionCacheProvider } from './emotionCache';

// ==============================|| DEFAULT THEME - MAIN ||============================== //

export default function ThemeCustomization({ children }) {
  const { state } = useConfig();

  const themeTypography = useMemo(() => Typography(state.fontFamily), [state.fontFamily]);

  const palette = useMemo(() => buildPalette(state.presetColor), [state.presetColor]);

  const themeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: state.themeDirection,
      mixins: {
        toolbar: {
          minHeight: 60,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      typography: themeTypography,
      colorSchemes: {
        light: {
          palette: palette.light,
          customShadows: CustomShadows(palette.light, ThemeMode.LIGHT)
        },
        dark: {
          palette: palette.dark,
          customShadows: CustomShadows(palette.dark, ThemeMode.DARK)
        }
      },
      cssVariables: {
        cssVarPrefix: CSS_VAR_PREFIX,
        colorSchemeSelector: 'data-color-scheme'
      }
    }),
    [state.themeDirection, themeTypography, palette]
  );

  const themes = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
      <ThemeProvider disableTransitionOnChange theme={themes} modeStorageKey="theme-mode" defaultMode={DEFAULT_THEME_MODE}>
        <CssBaseline enableColorScheme />
        {children}
      </ThemeProvider>
    </NextAppDirEmotionCacheProvider>
  );
}

ThemeCustomization.propTypes = { children: PropTypes.node };
```

{% endcode %}

You can check other settings like theme typography, palette, and component style override in the same folder. **`src\themes`**

## How to customize it?

You might come across questions like how to change a theme's **primary** color. How do I change the textbox or other components that can apply to an entire theme?

### Customize Theme Colors

To change the color of the theme, you can apply color directly to `src\theme\palatte.js`

For instance, if you want to change color that `theme.palette.primary.light` is being used in a theme, then update the following in **`src\themes\palatte.js`**

{% code title="src/themes/palette.js" %}

```javascript
...

// ==============================|| DEFAULT THEME - PALETTE  ||============================== //

export function buildPalette(presetColor = 'default') {
  // light colors
  const lightColors = { ...presetPalettes, grey: buildGrey(ThemeMode.LIGHT) };
  const lightPaletteColor = ThemeOption(lightColors, presetColor, ThemeMode.LIGHT);

  // dark colors
  const darkColors = { ...presetDarkPalettes, grey: buildGrey(ThemeMode.DARK) };
  const darkPaletteColor = ThemeOption(darkColors, presetColor, ThemeMode.DARK);

  ...

  return {
    light: {
      mode: 'light',
      ...extendedCommon,
      ...extendedLight,
      ...
    },
    dark: {
      mode: 'dark',
      ...extendedCommon,
      ...extendedDark,
      ...
    }
  };
}

```

{% endcode %}

## Customize Theme Typography

You can customize the typography used in the theme as well from the central place.

For instance, If you want to change `font-weight` the typography `h5` to `600`. To do that, open **`src\themes\typography.js`** and update as below:

{% code title="src/themes/typography.js" %}

```javascript
/**
 * Typography used in theme
 */
export default function Typography(fontFamily){
  return {
        ...
        h5: {
            ...
            fontWeight: 600 // changed this to make it 900 from 500
        },
        ...
    };
}
```

{% endcode %}

This will apply to all places where you used Typography variants as **`h5`**

**`<Typography variant="h5"...>`**

## Customize MUI Component style

We have provided a central location to override any default style of any component. All the override styles exist in **`src\themes\overrides`**

{% code title="src/themes/overrides/Accordion.js" %}

```javascript
// ==============================|| OVERRIDES - ALERT TITLE ||============================== //

export default function Accordion(theme) {
  return {
    MuiAccordion: {
      defaultProps: {
        disableGutters: true,
        square: true,
        elevation: 0
      },
      styleOverrides: {
        root: {
          border: '1px solid',
          borderColor: theme.vars.palette.secondary.light,
          '&:not(:last-child)': {
            borderBottom: 0
          },
          '&:before': {
            display: 'none'
          },
          '&.Mui-disabled': {
            backgroundColor: theme.vars.palette.secondary.lighter
          }
        }
      }
    }
  };
}
```

{% endcode %}

You can add a default property for any MUI component and it will be applied everywhere. We emitted lines to view it better in the above code block but you can see many controls' styles overridden in the same file. Feel free to change it as per your need.
{% endtab %}
{% endtabs %}