React Material UIでDark Modeを使う

const theme = createTheme({
    palette: {
        mode: 'dark',
    },
});
function App() {
  return (
      <ThemeProvider theme={theme}>
            ...

にて可能。

コンポーネントでダークモードの色を指定したい場合はカラーパレットがいくつか用意されているのでそれを利用する。

例:

<Typography variant="h6" component="div" color={theme.palette.text.primary} >...</Typography>

カラーパレットは以下に記載されている

Dark mode - Material UI
Material UI comes with two palette modes: light (the default) and dark.

コメント

タイトルとURLをコピーしました