Look and Feel

View on Github

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, which allows for maximum flexibility and scalability.

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. 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. Definition of colors (primary, secondary, error, warning…)

• typography. Default font family, heading styles, body styles…

• 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:

...

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:

...
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