🎭Theme/Style Configuration

Defines core of theme. How theme is being set using Material-UI.

Customize Able Pro 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 . Theme initialization starts, where the palette, typography, and component's overridable style exist.

NEXT (TS)

src/theme/index.tsx

import { ReactNode, useMemo } from 'react';

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

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

import { HEADER_HEIGHT, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import getWindowScheme from 'utils/getWindowScheme';

// types
import { CustomShadowProps } from 'types/theme';

type ThemeCustomizationProps = {
  children: ReactNode;
};

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

export default function ThemeCustomization({ children }: ThemeCustomizationProps) {
  const { themeDirection, mode, presetColor, fontFamily, themeContrast } = useConfig();
  let themeMode: any = mode;
  if (themeMode === ThemeMode.AUTO) {
    const autoMode = getWindowScheme();
    if (autoMode) {
      themeMode = ThemeMode.DARK;
    } else {
      themeMode = ThemeMode.LIGHT;
    }
  }

  const theme: Theme = useMemo<Theme>(() => Palette(themeMode, presetColor, themeContrast), [themeMode, presetColor, themeContrast]);

  const themeTypography: TypographyVariantsOptions = useMemo<TypographyVariantsOptions>(
    () => Typography(themeMode, fontFamily, theme),
    [themeMode, fontFamily, theme]
  );
  const themeCustomShadows: CustomShadowProps = useMemo<CustomShadowProps>(() => CustomShadows(theme), [theme]);

  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
        }
      },
      palette: theme.palette,
      shape: {
        borderRadius: 8
      },
      customShadows: themeCustomShadows,
      typography: themeTypography
    }),
    [themeDirection, theme, themeTypography, themeCustomShadows]
  );

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

  return (
    <StyledEngineProvider injectFirst>
      <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
        <ThemeProvider theme={themes}>
          <CssBaseline enableColorScheme />
          <GlobalStyles />
          {children}
        </ThemeProvider>
      </NextAppDirEmotionCacheProvider>
    </StyledEngineProvider>
  );
}

NEXT (JS)

src/theme/index.tsx

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

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

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

import { HEADER_HEIGHT, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import getWindowScheme from 'utils/getWindowScheme';

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

export default function ThemeCustomization({ children }) {
  const { themeDirection, mode, presetColor, fontFamily, themeContrast } = useConfig();
  let themeMode = mode;
  if (themeMode === ThemeMode.AUTO) {
    const autoMode = getWindowScheme();
    if (autoMode) {
      themeMode = ThemeMode.DARK;
    } else {
      themeMode = ThemeMode.LIGHT;
    }
  }

  const theme = useMemo(() => Palette(themeMode, presetColor, themeContrast), [themeMode, presetColor, themeContrast]);

  const themeTypography = useMemo(() => Typography(themeMode, fontFamily, theme), [themeMode, fontFamily, theme]);
  const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);

  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
        }
      },
      palette: theme.palette,
      shape: {
        borderRadius: 8
      },
      customShadows: themeCustomShadows,
      typography: themeTypography
    }),
    [themeDirection, theme, themeTypography, themeCustomShadows]
  );

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

  return (
    <StyledEngineProvider injectFirst>
      <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
        <ThemeProvider theme={themes}>
          <CssBaseline enableColorScheme />
          <GlobalStyles />
          {children}
        </ThemeProvider>
      </NextAppDirEmotionCacheProvider>
    </StyledEngineProvider>
  );
}

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

You can check other settings like theme typography, palette, and components 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 to 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

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

NEXT (TS)

src/themes /palette.ts

// material-ui
import { alpha, createTheme } from '@mui/material/styles';
import { PaletteMode } from '@mui/material';

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

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

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

export default function Palette(mode: ThemeMode, presetColor: PresetColor, themeContrast: boolean) {
  const paletteColor: PaletteThemeProps = ThemeOption(presetColor, mode);

  return createTheme({
    palette: {
      mode: mode as PaletteMode,
      common: {
        black: '#000',
        white: '#fff'
      },
      ...paletteColor,
      text: {
        primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800],
        secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main,
        disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400]
      },
      action: {
        disabled: paletteColor.secondary.light
      },
      divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.05) : alpha(paletteColor.secondary.light!, 0.65),
      background: {
        paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff',
        default: themeContrast && mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary.lighter
      }
    }
  });
}

NEXT (JS)

src/themes /palette.js

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

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

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

export default function Palette(mode, presetColor, themeContrast) {
  const paletteColor = ThemeOption(presetColor, mode);

  return createTheme({
    palette: {
      mode: mode,
      common: {
        black: '#000',
        white: '#fff'
      },
      ...paletteColor,
      text: {
        primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.87) : paletteColor.secondary[800],
        secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.45) : paletteColor.secondary.main,
        disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.1) : paletteColor.secondary[400]
      },
      action: {
        disabled: paletteColor.secondary.light
      },
      divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.05) : alpha(paletteColor.secondary.light, 0.65),
      background: {
        paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff',
        default: themeContrast && mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary.lighter
      }
    }
  });
}

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 900. To do that, open src\themes\typography and update as below:

NEXT (TS)

src/themes /typography.ts

// 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
    },
  ...
  }
}

NEXT (JS)

src/themes /typography.js

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

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

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 overrides styles exist in src\themes\overrides

NEXT (TS)

src/themes/overrides /Accordion.ts

// 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.palette.divider}`,
          '&:not(:last-child)': {
            borderBottom: 0
          },
          '&:before': {
            display: 'none'
          },
          '&.Mui-disabled': {
            backgroundColor: theme.palette.secondary.lighter
          }
        }
      }
    }
  };
}

NEXT (JS)

src/themes/overrides /Accordion.js

// ==============================|| 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
          }
        }
      }
    }
  };
}

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.