# Theme/Style Configuration

Customise Able Pro with your theme. You can change the colours, the typography, and much more. Material-UI offers the flexibility to change the project's style in a single place. Additionally, we have centralised and made it more consistent with a proper file structure.

## Theme configuration

The whole theme can be configured from the folder **`src\themes`** . Theme initialisation starts, where the palette, typography, and components' overridable style exist.

{% tabs %}
{% tab title="NEXT  (TS)" %}
{% code title="src/theme/index.tsx" %}

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

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

// project-imports
import { buildPalette } from './palette';
import Typography from './typography';
import CustomShadows from './custom-shadows';
import componentsOverride from './overrides';
import GlobalStyles from './GlobalStyles';
import { NextAppDirEmotionCacheProvider } from './emotionCache';

import { HEADER_HEIGHT, ThemeMode, CSS_VAR_PREFIX, DEFAULT_THEME_MODE } from 'config';
import useConfig from 'hooks/useConfig';

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

type ThemeCustomizationProps = {
  children: ReactNode;
};

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

export default function ThemeCustomization({ children }: ThemeCustomizationProps) {
  const {
    state: { themeDirection, presetColor, fontFamily, themeContrast }
  } = useConfig();

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

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

  const themeOptions: ThemeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: themeDirection,
      mixins: {
        toolbar: {
          minHeight: HEADER_HEIGHT,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      shape: {
        borderRadius: 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'
      }
    }),
    [palette, themeDirection, themeTypography]
  );

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

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

{% endcode %}
{% endtab %}

{% tab title="NEXT (JS)" %}
{% code title="src/theme/index.jsx" %}

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

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

// project-imports
import { buildPalette } from './palette';
import Typography from './typography';
import CustomShadows from './custom-shadows';
import componentsOverride from './overrides';
import GlobalStyles from './GlobalStyles';
import { NextAppDirEmotionCacheProvider } from './emotionCache';

import { HEADER_HEIGHT, ThemeMode, CSS_VAR_PREFIX, DEFAULT_THEME_MODE } from 'config';
import useConfig from 'hooks/useConfig';

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

export default function ThemeCustomization({ children }) {
  const {
    state: { themeDirection, presetColor, fontFamily, themeContrast }
  } = useConfig();

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

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

  const themeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: themeDirection,
      mixins: {
        toolbar: {
          minHeight: HEADER_HEIGHT,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      shape: {
        borderRadius: 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'
      }
    }),
    [palette, themeDirection, themeTypography]
  );

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

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

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

```

{% endcode %}
{% endtab %}
{% endtabs %}

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 to change the textbox or other components that can be applied to an entire theme?

#### Customize Theme Colors

To change the colour of the theme, you can apply colour directly to `src\theme\palette`

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

{% tabs %}
{% tab title="NEXT  (TS)" %}
{% code title="src/themes/palette.ts" %}

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

// project-imports
import ThemeOption from './theme';
import { ThemeMode } from 'config';
import { extendPaletteWithChannels, withAlpha } from 'utils/colorUtils';

// types
import { PresetColor } from 'types/config';
import { PaletteThemeProps } from 'types/theme';

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

export function buildPalette(presetColor: PresetColor, contrast: boolean = false) {
  const lightPaletteColor: PaletteThemeProps = ThemeOption(presetColor, ThemeMode.LIGHT);
  const darkPaletteColor: PaletteThemeProps = ThemeOption(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,
      text: {
        primary: extendedLight.secondary[800],
        secondary: extendedLight.secondary.main,
        disabled: extendedLight.secondary[400]
      },
      action: { disabled: extendedLight.secondary.light },
      divider: withAlpha(extendedLight.secondary.light!, 0.65),
      background: {
        paper: commonColor.common.white,
        default: contrast ? commonColor.common.white : extendedLight.secondary.lighter
      }
    },
    dark: {
      mode: 'dark' as PaletteMode,
      ...extendedCommon,
      ...extendedDark,
      text: {
        primary: withAlpha(extendedDark.secondary.darker!, 0.87),
        secondary: withAlpha(extendedDark.secondary.darker!, 0.45),
        disabled: withAlpha(extendedDark.secondary.darker!, 0.1)
      },
      action: { disabled: extendedDark.secondary.light },
      divider: withAlpha(extendedDark.secondary.darker!, 0.05),
      background: {
        paper: extendedDark.secondary[100],
        default: extendedDark.secondary.lighter
      }
    }
  };
}
  
```

{% endcode %}
{% endtab %}

{% tab title="NEXT (JS)" %}
{% code title="src/themes /palette.js" %}

```javascript
// project-imports
import ThemeOption from './theme';
import { ThemeMode } from 'config';
import { extendPaletteWithChannels, withAlpha } from 'utils/colorUtils';

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

export function buildPalette(presetColor, contrast = false) {
  const lightPaletteColor = ThemeOption(presetColor, ThemeMode.LIGHT);
  const darkPaletteColor = ThemeOption(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',
      ...extendedCommon,
      ...extendedLight,
      text: {
        primary: extendedLight.secondary[800],
        secondary: extendedLight.secondary.main,
        disabled: extendedLight.secondary[400]
      },
      action: { disabled: extendedLight.secondary.light },
      divider: withAlpha(extendedLight.secondary.light, 0.65),
      background: {
        paper: commonColor.common.white,
        default: contrast ? commonColor.common.white : extendedLight.secondary.lighter
      }
    },
    dark: {
      mode: 'dark',
      ...extendedCommon,
      ...extendedDark,
      text: {
        primary: withAlpha(extendedDark.secondary.darker, 0.87),
        secondary: withAlpha(extendedDark.secondary.darker, 0.45),
        disabled: withAlpha(extendedDark.secondary.darker, 0.1)
      },
      action: { disabled: extendedDark.secondary.light },
      divider: withAlpha(extendedDark.secondary.darker, 0.05),
      background: {
        paper: extendedDark.secondary[100],
        default: extendedDark.secondary.lighter
      }
    }
  };
}

```

{% endcode %}
{% endtab %}
{% endtabs %}

## Customise Theme Typography

You can customise the typography used in the theme from a central place.

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

{% tabs %}
{% tab title="NEXT (TS)" %}
{% code title="src/themes/typography.ts" %}

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

// project-imports
import { ThemeMode } from 'config';

// types
import { FontFamily } from 'types/config';


// ==============================|| DEFAULT THEME - TYPOGRAPHY  ||============================== //

export default function Typography(mode: ThemeMode, fontFamily: FontFamily, theme: Theme): TypographyVariantsOptions {
  return {
  ....
   h5: {
      fontWeight: 600,
      fontSize: '1rem',
      lineHeight: 1.5
    },
  ...
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="NEXT (JS)" %}
{% code title="src/themes /typography.js" %}

```typescript
// ==============================|| DEFAULT THEME - TYPOGRAPHY  ||============================== //

export default function Typography(mode, fontFamily, theme) {
  return {
  ....
   h5: {
      fontWeight: 600,
      fontSize: '1rem',
      lineHeight: 1.5
    },
  ...
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

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

#### Customise 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`**

{% tabs %}
{% tab title="NEXT (TS)" %}
{% code title="src/themes/overrides/Accordion.ts" %}

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

// ==============================|| OVERRIDES - ACCORDION ||============================== //

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

```

{% endcode %}
{% endtab %}

{% tab title="NEXT (JS)" %}
{% code title="src/themes/overrides /Accordion.js" %}

```javascript
// ==============================|| OVERRIDES - ACCORDION ||============================== //

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

{% endcode %}
{% endtab %}
{% endtabs %}

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 needs.