# Look and Feel

[View on Github](https://github.com/CartoDB/carto-react-template)

{% hint style="warning" %}
**Note:** We are reducing our investment in CARTO for React and currently we discourage users from starting new projects with it.

CARTO for React is an opinionated framework with pre-built components and templates. This greatly speeds up the process to create React-based applications, but customization options are limited.

If you need further customization in React, or you want to build geospatial applications using **Vue, Angular, or any other Javascript-based framework**, we recommend going directly to the main CARTO for Developers documentation, including [CARTO + deck.gl](https://github.com/CartoDB/gitbook-documentation/blob/master/carto-for-developers/key-concepts/carto-for-deck.gl), which allows for maximum flexibility and scalability.
{% endhint %}

This guides shows how you can adapt your application look and feel.

When you are building your own application, you usually want to adapt the look & feel to use a different typography or define your own primary and secondary colors.

The user interface components are based on [Material-UI](https://material-ui.com/). We have created a default CARTO theme that you can further customize by changing the theme configuration variables. You can find the variables defined for the CARTO theme in the `carto-theme.js` file in the @carto/react-ui package.

There are lots of properties that you can adapt to your needs. Some of the main configuration properties are:

* [`palette`](https://material-ui.com/customization/palette/). Definition of colors (primary, secondary, error, warning…)
* [`typography`](https://material-ui.com/customization/typography/). Default font family, heading styles, body styles…
* [`breakpoints`](https://material-ui.com/customization/breakpoints/). Support for different screen sizes.

For instance, if you want to change the main color (used for the navigation bar background), you can edit the `App.js` file and add the following instruction before the theme creation:

```javascript
...

import { createTheme } from '@mui/material/styles';
import { cartoThemeOptions } from '@carto/react-ui';
...
cartoThemeOptions.palette.primary.main = "#800000";
let theme = createTheme(cartoThemeOptions);
...
```

If you want to change the font family for the application title (`subtitle-1`), you can add the following instruction before the theme creation:

```javascript
...
import { createTheme } from '@mui/material/styles';
import { cartoThemeOptions } from '@carto/react-ui';
...
cartoThemeOptions.typography.subtitle1.fontFamily = "'Times New Roman'";
let theme = createMuiTheme(cartoThemeOptions);
...
```

For more advanced options on theming, check the [MUI documentation](https://mui.com/material-ui/customization/theming/)