<commit_before># Themes

Themes let you apply a consistent tone to an app.
It allows you to **customize all the design aspects** in order to meet the needs of UI diversity from business and brand.

The theme specifies the darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
To promote greater consistency between apps, light and dark themes are available to choose from.
We are using [jss-theme-reactor](https://github.com/nathanmarks/jss-theme-reactor) under the hood.

## Configuration variables

Changing the configurations variables is the most effective way to match Material-UI to your needs. By default, your Material-UI application will use the default theme.

### Palette

#### Intentions

A color intention is a mapping of a palette for a given intention within your application.

We expose the following color intentions:

- primary - used to represent primary interface elements for a user
- accent - used to represent secondary interface elements for a user
- error - used to represent interface elements that the user should be careful of

#### Example

{{demo='pages/customization/Palette.js'}}

The palette is using the hues prefixed with `A` (`A200`, etc.) for the accent color and the hues unprefixed for the other intentions.
If you want to learn more about color, you can check out [this section](/style/color).

### Dark/light theme

You can make a theme dark by setting `type` to `dark`.

{{demo='pages/customization/DarkTheme.js'}}

### The other variables

We have tried to normalize the implementation by adding many more variables: the typography, the breakpoints, the transitions, etc. You can see below what the theme object looks like with the default values.
If you want to learn more about it, we suggesting having a look at [`material-ui/style/theme.js`](https://github.com/callemall/material-ui/blob/next/src/styles/theme.js).

{{demo='pages/customization/ThemeDefault.js'}}

### Business variables

When using our [styling solution](/customization/css-in-js) with your own components,
you can also take advantage of the theme.
It can be convenient to add additional variables to the theme so you can use them everywhere.
For instance:

{{demo='pages/customization/BusinessVariables.js'}}

## Customizing all instances of a component type

When the configuration variables aren't powerful enough, you can take advantage of the
`overrides` key to potentially change every single style injected by Material-UI into the DOM.
That's a really powerful feature.

{{demo='pages/customization/OverridesTheme.js'}}

The list of those customization points are documented under the *Component API* section.
For instance, you can have a look at the [Button](/component-api/button#classes).
Alternatively you can have a look at the [implementation](https://github.com/callemall/material-ui/tree/next/src).
<commit_msg>Some grammar/text edits (#6976)<commit_after># Themes

Themes let you apply a consistent tone to your app.
It allows you to **customize all design aspects** of your project in order to meet the specific needs of your business or brand.

The theme specifies the darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
To promote greater consistency between apps, light and dark themes are available to choose from.
We are using [jss-theme-reactor](https://github.com/nathanmarks/jss-theme-reactor) under the hood.

## Configuration variables

Changing the configurations variables is the most effective way to match Material-UI to your needs. By default, your Material-UI application will use the default theme.

### Palette

#### Intentions

A color intention is a mapping of a palette to a given intention within your application.

We expose the following color intentions:

- primary - used to represent primary interface elements for a user
- accent - used to represent secondary interface elements for a user
- error - used to represent interface elements that the user should be careful of

#### Example

{{demo='pages/customization/Palette.js'}}

The palette is using the hues prefixed with `A` (`A200`, etc.) for the accent color and the hues unprefixed for the other intentions.
If you want to learn more about color, you can check out [this section](/style/color).

### Dark/light theme

You can make a theme dark by setting `type` to `dark`.

{{demo='pages/customization/DarkTheme.js'}}

### The other variables

We have tried to normalize the implementation by adding many more variables: the typography, the breakpoints, the transitions, etc. You can see below what the theme object looks like with the default values.
If you want to learn more, we suggesting having a look at [`material-ui/style/theme.js`](https://github.com/callemall/material-ui/blob/next/src/styles/theme.js).

{{demo='pages/customization/ThemeDefault.js'}}

### Business variables

When using our [styling solution](/customization/css-in-js) with your own components,
you can also take advantage of the theme.
It can be convenient to add additional variables to the theme so you can use them everywhere.
For instance:

{{demo='pages/customization/BusinessVariables.js'}}

## Customizing all instances of a component type

When the configuration variables aren't powerful enough, you can take advantage of the
`overrides` key to potentially change every single style injected by Material-UI into the DOM.
That's a really powerful feature.

{{demo='pages/customization/OverridesTheme.js'}}

The list of those customization points are documented under the *Component API* section.
For instance, you can have a look at the [Button](/component-api/button#classes).
Alternatively you can have a look at the [implementation](https://github.com/callemall/material-ui/tree/next/src).

{'fraction_non_alphanumeric': 0.07709671818023962, 'fraction_numerical': 0.0017364125716270186, 'mean_word_length': 4.714285714285714, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5885191', 'n_tokens_mistral': 1473, 'n_tokens_neox': 1445, 'n_words': 748}