# 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="/pages/ptr7LKpmI7gFzvAib1y5" %}
[Color](/berry/theme/theme-config/color.md)
{% endcontent-ref %}

{% content-ref url="/pages/GD5IcMxpt0dzb8B5siwd" %}
[Typography](/berry/theme/theme-config/typography.md)
{% endcontent-ref %}

{% content-ref url="/pages/NNCOYL9Ii55VW0bQIt2C" %}
[Overrides](/berry/theme/theme-config/overrides.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codedthemes.gitbook.io/berry/theme/theme-config.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.