パレット
パレットを使用すると、ブランドに合わせてコンポーネントの色を変更できます。
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.
色の詳細については、色セクションをご覧ください。
デフォルト値
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
既定のパレットでは、副次的な意図を表すために、先頭にA
(A200
など。) が付いたシェーディングが使用されます。 他の目的のために省略されたシェードがあります。
カスタマイズ
You may override the default palette values by including a palette object as part of your theme. 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;
}
カラーオブジェクトを使用する
意図をカスタマイズする最も簡単な方法は、提供されている1つまたは複数のカラーをインポートすることです。 次のようにパレット意図に適用します。
import { createTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
const theme = createTheme({
palette: {
primary: blue,
},
});
色を直接提供する
よりカスタマイズされた色を提供する場合は、独自の色オブジェクト 作成するか、意図のキーの一部またはすべてに直接色を指定できます。
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.
// E.g., shift from Red 500 to Red 300 or Red 700.
contrastThreshold: 3,
// Used by the functions below to shift a color's luminance by approximately
// two indexes within its tonal palette.
tonalOffset: 0.2,
},
});
As in the example above, if the intention object contains custom colors using any of the "main", "light", "dark" or "contrastText" keys, these map as follows:
- If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main", according to the "tonalOffset" value.
- If "contrastText" is omitted, its value will be calculated to contrast with "main", according to the "contrastThreshold" value.
Both the "tonalOffset" and "contrastThreshold" values may be customized as needed. 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.
例
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
インスピレーションが必要ですか? インスピレーションが必要ですか? インスピレーションが必要ですか? インスピレーションが必要ですか? インスピレーションが必要ですか? 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>
);
}