# Style

Customize Berry 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 by proper file structure.

{% hint style="warning" %}
You might not need to update anything **`..\src\themes`** unless you want to separate theming.
{% endhint %}

## Theme configuration

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

{% tabs %}
{% tab title="JavaScript" %}
{% code title="palette.jsx" %}

```javascript
// project import
import useConfig from 'hooks/useConfig';
import Palette from './palette';
import Typography from './typography';
....

export default function ThemeCustomization({ children }) {
  const { borderRadius, fontFamily, mode, outlinedFilled, presetColor, themeDirection } = useConfig();
...
const themeOptions = useMemo(
        () => ({
            direction: themeDirection,
            palette: theme.palette,
            mixins: {
                toolbar: {
                    minHeight: '48px',
                    padding: '16px',
                    '@media (min-width: 600px)': {
                        minHeight: '48px'
                    }
                }
            },
            typography: themeTypography,
            customShadows: themeCustomShadows
        }),
        [themeDirection, theme, themeCustomShadows, themeTypography]
    );
....
}
```

{% endcode %}
{% endtab %}

{% tab title="Typescript" %}
{% code title="palette.tsx" %}

```typescript
// project import
import useConfig from 'hooks/useConfig';
import Palette from './palette';
import Typography from './typography';
....

export default function ThemeCustomization({ children }: Props) {
...
  const themeCustomShadows: CustomShadowProps = useMemo<CustomShadowProps>(() => customShadows(mode, theme), [mode, theme]);
  
const themeOptions: ThemeOptions = useMemo(
        () => ({
            direction: themeDirection,
            palette: theme.palette,
            mixins: {
                toolbar: {
                    minHeight: '48px',
                    padding: '16px',
                    '@media (min-width: 600px)': {
                        minHeight: '48px'
                    }
                }
            },
            typography: themeTypography,
            customShadows: themeCustomShadows
        }),
        [themeDirection, theme, themeCustomShadows, themeTypography]
    );
....
}

```

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

As you can see colors for the theme came from the central location **`import value from 'src/themes/theme/default.ts';`**

{% tabs %}
{% tab title="src/themes/theme/default.ts" %}

```css
import { ColorProps } from 'types';

// ==============================|| DEFAULT THEME COLORS ||============================== //

const defaultColor: ColorProps = {
  // paper & background
  paper: '#ffffff',

  // primary
  primaryLight: '#e3f2fd',
  primary200: '#90caf9',
  primaryMain: '#2196f3',
  primaryDark: '#1e88e5',
  primary800: '#1565c0',

  // secondary
  secondaryLight: '#ede7f6',
  secondary200: '#b39ddb',
  secondaryMain: '#673ab7',
  secondaryDark: '#5e35b1',
  secondary800: '#4527a0',

  // success
  successLight: '#b9f6ca',
  success200: '#69f0ae',
  successMain: '#00e676',
  successDark: '#00c853',

  // error
  errorLight: '#ef9a9a',
  errorMain: '#f44336',
  errorDark: '#c62828',

  // orange
  orangeLight: '#fbe9e7',
  orangeMain: '#ffab91',
  orangeDark: '#d84315',

  // warning
  warningLight: '#fff8e1',
  warningMain: '#ffe57f',
  warningDark: '#ffc107',

  // grey
  grey50: '#f8fafc',
  grey100: '#eef2f6',
  grey200: '#e3e8ef',
  grey300: '#cdd5df',
  grey500: '#697586',
  grey600: '#4b5565',
  grey700: '#364152',
  grey900: '#121926',

  // ==============================|| DARK THEME VARIANTS ||============================== //

  // paper & background
  darkPaper: '#111936',
  darkBackground: '#1a223f',

  // dark 800 & 900
  darkLevel1: '#29314f',
  darkLevel2: '#212946',

  // text variants
  darkTextTitle: '#d7dcec',
  darkTextPrimary: '#bdc8f0',
  darkTextSecondary: '#8492c4',

  // primary dark
  darkPrimaryLight: '#e3f2fd',
  darkPrimaryMain: '#2196f3',
  darkPrimaryDark: '#1e88e5',
  darkPrimary200: '#90caf9',
  darkPrimary800: '#1565c0',

  // secondary dark
  darkSecondaryLight: '#d1c4e9',
  darkSecondaryMain: '#7c4dff',
  darkSecondaryDark: '#651fff',
  darkSecondary200: '#b39ddb',
  darkSecondary800: '#6200ea'
};

export default defaultColor;

```

{% endtab %}
{% endtabs %}

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 to change the textbox or other components that can apply to an entire theme? Check below for each of your needs:

{% content-ref url="theme-config/color" %}
[color](https://codedthemes.gitbook.io/berry/theme/theme-config/color)
{% endcontent-ref %}

{% content-ref url="theme-config/typography" %}
[typography](https://codedthemes.gitbook.io/berry/theme/theme-config/typography)
{% endcontent-ref %}

{% content-ref url="theme-config/overrides" %}
[overrides](https://codedthemes.gitbook.io/berry/theme/theme-config/overrides)
{% endcontent-ref %}