> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/materially-react-material-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/materially-react-material-documentation/default-theme.md).

# Default Theme

Customize Material-UI with your theme. You can change the colors, the typography, and much more.

### Theme configuration variables

Changing the theme configuration variables is the most effective way to match Material-UI to your needs. The following sections cover the most important theme variables:

* [Palette](https://mui.com/material-ui/customization/palette/)
* [Typography](https://mui.com/material-ui/customization/typography/)
* [Spacing](https://mui.com/material-ui/customization/spacing/)
* [Breakpoints](https://mui.com/material-ui/customization/breakpoints/)
* [z-index](https://mui.com/material-ui/customization/z-index/)
* [Globals](https://mui.com/material-ui/customization/theme-components/)

You can check out the [default theme section](https://mui.com/material-ui/customization/theme-components/) to view the default theme in full.

**Examples**

{% hint style="info" %}
You can edit this file at **`[src/themes/index]`**
{% endhint %}

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

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

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

// project imports
import palette from './palette';
import componentsOverride from './overrides';
import Shadows from './shadow';
import typography from './typography';
import RTLLayout from 'components/RTLLayout';

import useConfig from 'hooks/useConfig';

// types
import { ChildrenProps } from 'types/root';

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

export default function ThemeCustomization({ children }: ChildrenProps) {
  const { mode, themeDirection } = useConfig();

  const themePalette = useMemo<PaletteOptions>(() => palette(mode), [mode]);

  const themeDefault = createTheme({
    direction: themeDirection,
    palette: themePalette,
    customShadows: {}
  });

  // create duplicate theme due to responsive typography and fontFamily
  const theme = createTheme({
    ...themeDefault,
    typography: typography() as TypographyVariantsOptions,
    customShadows: Shadows(themeDefault)
  });

  theme.components = componentsOverride(theme);

  return (
    <ThemeProvider {...{ theme }}>
      <CssBaseline enableColorScheme />
      <RTLLayout>{children}</RTLLayout>
    </ThemeProvider>
  );
}

```

{% endcode %}
{% endtab %}

{% tab title="Javascript" %}
{% 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 palette from './palette';
import componentsOverride from './overrides';
import Shadows from './shadow';
import typography from './typography';
import RTLLayout from 'components/RTLLayout';

import useConfig from 'hooks/useConfig';

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

export default function ThemeCustomization({ children }) {
  const { mode, themeDirection } = useConfig();

  const themePalette = useMemo(() => palette(mode), [mode]);

  const themeDefault = createTheme({
    direction: themeDirection,
    palette: themePalette,
    customShadows: {}
  });

  // create duplicate theme due to responsive typography and fontFamily
  const theme = createTheme({
    ...themeDefault,
    typography: typography(),
    customShadows: Shadows(themeDefault)
  });

  theme.components = componentsOverride(theme);

  return (
    <ThemeProvider {...{ theme }}>
      <CssBaseline enableColorScheme />
      <RTLLayout>{children}</RTLLayout>
    </ThemeProvider>
  );
}

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

```

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