跳转到内容

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

Palette 调色板

使用调色板,您可以修改组件的颜色以迎合您的品牌形象。

调色板的颜色

一个颜色图谱是在您的应用程序中,将一个调色板的颜色映射给一个特定意向。 主题提供了以下这些调色板的颜色(在 theme.palette. 中获取):

  • primary - 用于展示一个给用户的主要界面元素。 它是在您的应用屏幕和组件中显示最频繁的一个颜色。
  • secondary - 用于展示一个给用户的次要界面元素。 它给予了更多的方法来强调和区分您的产品。 此颜色是可选的。
  • error - 用于表示用户应该注意到的界面元素。
  • warning - 用于呈现潜在的一些危险的操作或者重要的信息。
  • info - 用于向用户呈现一些中立的且不一定重要的信息。
  • success - 用于暗示一个用户触发的操作的成功完成。

如果想要了解更多关于色彩的知识,您可以查看 色彩章节

默认值

通过主题资源管理器或通过打开此页面上的开发工具控制台(dev tools console)(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

调色板的默认值是表现次要的图谱时,使用带有前缀 AA200 等等)的阴影,而对于其他图谱则使用无前缀的阴影。

Customization 个性化

您可以通过将一个调色板对象(palette object)作为主题的一部分来覆盖默认的调色板值。 如果存在以下任何情况:

若您提供了这些调色板颜色对象,它们将取代默认值。

调色板颜色值可以是颜色(color)对象,也可以是具有以下 TypeScript 接口指定的一个或多个键(key)的对象:

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

使用一个颜色对象

定制一个颜色图谱的最简单方法是导入其提供的一种或多种颜色,并将它们应用于调色板上:

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

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

直接提供颜色

如果您希望提供更多的定制颜色,您也可以创建自己的颜色对象,或者直接为部分或全部的图谱使用的键(key)提供颜色。

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

const theme = createTheme({
  palette: {
    primary: {
      // light: 这将从 palette.primary.main 中进行计算,
      main: '#ff4400',
      // dark: 这将从 palette.primary.main 中进行计算,
      // contrastText: 这将计算与 palette.primary.main 的对比度
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: 这将从 palette.secondary.main 中进行计算,
      contrastText: '#ffcc00',
    },
    // 使用 `getContrastText()` 来最大化
    // 背景和文本的对比度
    contrastThreshold: 3,
    // 使用下面的函数用于将颜色的亮度在其调色板中
    // 移动大约两个指数。
    // 例如,从红色 500(Red 500)切换到 红色 300(Red 300)或 红色 700(Red 700)。
    tonalOffset: 0.2,
  },
});

如上面的例子一样,如果想要设置对象为使用包含"main", “light”, “dark” 或 “contrastText” 这些键的定制颜色,则这些映射如下所示:

  • 如果没有设置 “dark” 和 / 或 “light” 键,那么这将从 "main" 中根据 “色调偏移(tonalOffset)” 值来进行计算。
  • 如果没有设置 “对比度文本(contrastText)”,那么这将根据 “对比度阈值(contrastThreshold)” 来计算出与 "main" 的对比度。

“色调偏移(tonalOffset)” 和 “对比度阈值(contrastThreshold)” 这两个值都可以根据需要进行定制。 “色调偏移(tonalOffset)” 值可以是一个 0 和 1 之间的数字,它将适用于亮色变量和暗色变量,或者是由以下 TypeScript 类型(type)指定的具有明暗变量的对象:

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

“色调偏移(tonalOffset)” 的值越高,那么计算后的“light” 值就会变得更浅,“dark” 的值会变得更暗。 “对比度阈值(contrastThreshold)” 的值越高,那么背景色越会被认为是浅色的,这就会赋予一个深色的 “对比度文本(contrastText)”。

请注意,“对比度阈值(contrastThreshold)” 遵循的是一条非线性曲线。

示例

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>
  );
}

添加新的颜色

您可以在主题的调色板内外添加新的颜色,如下所示:

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

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

如果您正在使用 TypeScript,您也需要使用module augmentation 来接受上述值。

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'];
  }
}

选取颜色

需要灵感吗? Material Design 团队已经建立了一个调色板配置工具来帮助您选择颜色。

暗色模式

材质界面有两种调色板的类型,亮色(light)(默认值)和 暗色(dark)模式。 您可以通过设置 type: 'dark' 来运用暗色主题。 虽然它只是一个单一属性值的变化,但是在内部修改了些许调色板值。

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

调色板的类型的调整,修改了如下的颜色:

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)

用户偏好

用户可能已经指定了一个亮色或者暗色主题的偏好。 用户表达其偏好的方法可以有所不同。 它可能是操作系统曝光的覆盖整个系统的设置,或由用户代理控制的设置。

您可以通过 useMediaQuery hook 和 prefers-color-scheme 的媒体查询来动态地利用此偏好设置。

例如,您可以自动启用暗色模式:

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>
  );
}