Saltar al contenido

🎉 Material UI v5 is out now! Check out the announcement blog post

Paleta

La paleta le permite modificar el color de los componentes para adaptarse a su marca.

Palette colors

A color intention is a mapping of a palette color to a given intention within your application. The theme exposes the following palette colors (accessible under theme.palette.):

  • primary - used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components.
  • secondary - used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.
  • error - used to represent interface elements that the user should be made aware of.
  • warning - used to represent potentially dangerous actions or important messages.
  • info - used to present information to the user that is neutral and not necessarily important.
  • success - used to indicate the successful completion of an action that user triggered.

Si quieres aprender más sobre el color, puedes echar un vistazo a la sección de color.

Default values

You can explore the default values of the palette using the theme explorer or by opening the dev tools console on this page (window.theme.palette).

Primary

palette.primary.light

#4791db

palette.primary.main

#1976d2

palette.primary.dark

#115293

Secondary

palette.secondary.light

#e33371

palette.secondary.main

#dc004e

palette.secondary.dark

#9a0036

Error

palette.error.light

#e57373

palette.error.main

#f44336

palette.error.dark

#d32f2f

Warning

palette.warning.light

#ffb74d

palette.warning.main

#ff9800

palette.warning.dark

#f57c00

Info

palette.info.light

#64b5f6

palette.info.main

#2196f3

palette.info.dark

#1976d2

Success

palette.success.light

#81c784

palette.success.main

#4caf50

palette.success.dark

#388e3c

La paleta predeterminada utiliza los tonos con prefijo A (A200, etc.) para los propósitos secundarios, y los tonos sin prefijo para las otras intenciones.

Personalización

Puede anular los valores de la paleta por defecto incluyendo un objeto de paleta como parte de su tema. If any of the:

palette color objects are provided, they will replace the defaults.

The palette color value can either be a color object, or an object with one or more of the keys specified by the following TypeScript interface:

interface PaletteColor {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

Utilizando un objeto de color

La forma más sencilla de personalizar un propósito de color es importar uno o más de los colores proporcionados y aplicarlos a una intención de paleta:

import { createTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

const theme = createTheme({
  palette: {
    primary: blue,
  },
});

Proporcionando los colores directamente

Si desea proporcionar colores más personalizados, puede crear su propio objeto de color, o directamente proporciona colores a algunas o todas las claves del propósito de color:

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#ffcc00',
    },
    // Used by `getContrastText()` to maximize the contrast between
    // the background and the text.
    tonalOffset: 0.2,
  },
});
    contrastThreshold: 3,
    // Used by the functions below to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    tonalOffset: 0.2,
  },
});
    contrastThreshold: 3,
    // Used by the functions below to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    // E.g., shift from Red 500 to Red 300 or Red 700.

Como en el ejemplo anterior, si el objeto de propósito de color contiene colores personalizados usando cualquiera de las claves "main", "light", "dark" o "contrastText", se mapean de la siguiente manera:

  • Si las claves "dark" y / o "light" son omitidas, su valor/es serán calculados desde "main", de acuerdo al valor de "tonalOffset".
  • Si "contrastText" es omitido, su valor será calculado para contrastar con "main", de acuerdo al valor de "contrastThreshold".

Tanto el valor de "tonalOffset" como el de "contrastThreshold" pueden ser personalizados según sea necesario. The "tonalOffset" value can either be a number between 0 and 1, which will apply to both light and dark variants, or an object with light and dark variants specified by the following TypeScript type:

type PaletteTonalOffset = number | {
  light: number;
  dark: number;
};

A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker. A higher value for "contrastThreshold" increases the point at which a background color is considered light, and given a dark "contrastText".

Note that "contrastThreshold" follows a non-linear curve.

Ejemplo

import React from 'react';
import { createTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { purple } from '@material-ui/core/colors';
import Button from '@material-ui/core/Button';

const theme = createTheme({
  palette: {
    primary: {
      // Purple and green play nicely together.
      main: purple[500],
    },
    secondary: {
      // This is green.A700 as hex.
      main: '#11cb5f',
    },
  },
});

export default function Palette() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </ThemeProvider>
  );
}

Adding new colors

You can add new colors inside and outside the palette of the theme as follow:

import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  status: {
    danger: '#e53e3e',
  },
  palette: {
    neutral: {
      main: '#5c6ac4',
    },
  },
});

If you are using TypeScript, you would also need to use module augmentation for the theme to accept the above values.

declare module '@material-ui/core/styles/createTheme' {
  interface Theme {
    status: {
      danger: React.CSSProperties['color'],
    }
  }
  interface ThemeOptions {
    status: {
      danger: React.CSSProperties['color']
    }
  }
}

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {
    neutral: Palette['primary'];
  }
  interface PaletteOptions {
    neutral: PaletteOptions['primary'];
  }
}

Picking colors

Need inspiration? The Material Design team has built an palette configuration tool to help you.

Dark mode

Material-UI comes with two palette types, light (the default) and dark. You can make the theme dark by setting type: 'dark'. While it's only a single property value change, internally it modifies several palette values.

const darkTheme = createTheme({
  palette: {
    type: 'dark',
  },
});

The colors modified by the palette type are the following:

Typography

palette.text.primary

#fff

palette.text.secondary

rgba(255, 255, 255, 0.7)

palette.text.disabled

rgba(255, 255, 255, 0.5)

Buttons

palette.action.active

#fff

palette.action.hover

rgba(255, 255, 255, 0.08)

palette.action.selected

rgba(255, 255, 255, 0.16)

palette.action.disabled

rgba(255, 255, 255, 0.3)

palette.action.disabledBackground

rgba(255, 255, 255, 0.12)

Background

palette.background.default

#303030

palette.background.paper

#424242

Divider

palette.divider

rgba(255, 255, 255, 0.12)

Typography

palette.text.primary

rgba(0, 0, 0, 0.87)

palette.text.secondary

rgba(0, 0, 0, 0.54)

palette.text.disabled

rgba(0, 0, 0, 0.38)

Buttons

palette.action.active

rgba(0, 0, 0, 0.54)

palette.action.hover

rgba(0, 0, 0, 0.04)

palette.action.selected

rgba(0, 0, 0, 0.08)

palette.action.disabled

rgba(0, 0, 0, 0.26)

palette.action.disabledBackground

rgba(0, 0, 0, 0.12)

Background

palette.background.default

#fafafa

palette.background.paper

#fff

Divider

palette.divider

rgba(0, 0, 0, 0.12)

User preference

Users might have specified a preference for a light or dark theme. The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the User Agent.

You can leverage this preference dynamically with the useMediaQuery hook and the prefers-color-scheme media query.

For instance, you can enable the dark mode automatically:

import React from 'react';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

function App() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline/>
      <Routes />
    </ThemeProvider>
  );
}