# 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/)


---

# 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://docs.carto.com/carto-for-developers/carto-for-react/guides/look-and-feel.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.