React Material UI 다크 모드 적용하기

Posted by on

Material UI의 useMediaQuery를 활용 하여 OS 테마 설정에 따라 다크 모드를 적용 할 수 있다. 

import React from "react";
import "./App.css";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import blue from "@material-ui/core/colors/blue";
import useMediaQuery from "@material-ui/core/useMediaQuery";

export default () => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

const theme = React.useMemo(
() =>
createMuiTheme({
palette: {
primary: blue,
// 다크/라이트 모드 결정
type: prefersDarkMode ? "dark" : "light",
},
}),
[prefersDarkMode]
);

return (
<ThemeProvider theme={theme}>
<React.Fragment>
다크 모드 적용이 이렇게 쉽다니?!
</React.Fragment>
</ThemeProvider>
);
};


사용 버전

"react": "^16.13.1",
"@material-ui/core": "^4.11.0",