React + Material-UIでダークモードを実装してみた
2019年から主要なOSやアプリがダークモード(ダークテーマ)に対応してきました。それに伴い、ダークモードに対応するWEBアプリやWEBサイトも増えてきています。私自身も文字を読みやすく感じるためか、普段からダークモードを利用しています。
Material-UIでは、ダークモードを簡単に実装することが出来ます。本記事ではReactとMaterial-UIでダークモードを実装する方法を紹介したいと思います。
そういえば、AWSの公式ドキュメントもダークモードに対応していましたね。
成果物
React + Material-UIで作成したWEBアプリをダークモードに対応させます。
環境
項目 | 内容 |
---|---|
OS | macOS Catalina 10.15.5(19F101) |
Node.js | 12.13.1 |
TypeScript | 3.7.2 |
React | 16.13.1 |
Material-UI | 4.11.0 |
Material-UIでダークモードを設定
React Material-UIではThemeProvider
にテーマオブジェクトを渡すことでフォントやテーマの色を変更することが出来ます。テーマオブジェクトはcreateMuiTheme
で作成します。
テーマをダークモードに変更する場合は、テーマオブジェクトのpalette.type
プロパティでdark
を指定するだけです。
import React from "react"; import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; import * as colors from "@material-ui/core/colors"; import CssBaseline from "@material-ui/core/CssBaseline"; const SampleTemplate: React.FC = ({ children }) => { const theme = createMuiTheme({ palette: { primary: { main: colors.blue[800], }, type: "dark", }, }); return ( <ThemeProvider theme={theme}> <CssBaseline /> {children} </ThemeProvider> ); }; export default SampleTemplate;
ライトモード/ダークモード切り替え
ライトモードとダークモードを切り替えるボタンを実装してみます。darkMode
の状態により、テーマオブジェクトのpalette.type
を切り替えます。また、darkMode
の状態をローカルストレージに保存しておくことで、画面を再読込してもダークモードを維持するようにします。
ダークモードの状態はローカルストレージやCookie、またはデータベースに保存する方法が考えられます。ローカルストレージやCookieはブラウザに依存するため、デバイスやブラウザを変えると状態を引き継ぐことが出来ません。ユースケースに応じてデータベースの利用も検討してみてください。
import React from "react"; import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; import * as colors from "@material-ui/core/colors"; import CssBaseline from "@material-ui/core/CssBaseline"; import IconButton from "@material-ui/core/IconButton"; import Brightness7Icon from "@material-ui/icons/Brightness7"; import Brightness4Icon from "@material-ui/icons/Brightness4"; const SampleTemplate: React.FC = ({ children }) => { const [darkMode, setDarkMode] = React.useState( localStorage.getItem("darkMode") === "on" ? true : false ); const handleDarkModeOn = () => { localStorage.setItem("darkMode", "on"); setDarkMode(true); }; const handleDarkModeOff = () => { localStorage.setItem("darkMode", "off"); setDarkMode(false); }; const theme = createMuiTheme({ palette: { primary: { main: colors.blue[800], }, type: darkMode ? "dark" : "light", }, }); return ( <ThemeProvider theme={theme}> <CssBaseline /> {darkMode ? ( <IconButton color="inherit" onClick={handleDarkModeOff}> <Brightness7Icon /> </IconButton> ) : ( <IconButton color="inherit" onClick={handleDarkModeOn}> <Brightness4Icon /> </IconButton> )} {children} </ThemeProvider> ); }; export default SampleTemplate;
テンプレートに組み込む
前回の記事で作成したテンプレートにダークモードの切り替えを組み込んでみます。
import React from "react"; import clsx from "clsx"; import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; import * as colors from "@material-ui/core/colors"; import { makeStyles, createStyles, Theme } from "@material-ui/core/styles"; import CssBaseline from "@material-ui/core/CssBaseline"; import Drawer from "@material-ui/core/Drawer"; import Box from "@material-ui/core/Box"; import AppBar from "@material-ui/core/AppBar"; import Toolbar from "@material-ui/core/Toolbar"; import List from "@material-ui/core/List"; import Typography from "@material-ui/core/Typography"; import Divider from "@material-ui/core/Divider"; import Container from "@material-ui/core/Container"; import { Link } from "react-router-dom"; import MenuIcon from "@material-ui/icons/Menu"; import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; import IconButton from "@material-ui/core/IconButton"; import HomeIcon from "@material-ui/icons/Home"; import ShoppingCartIcon from "@material-ui/icons/ShoppingCart"; import Brightness7Icon from "@material-ui/icons/Brightness7"; import Brightness4Icon from "@material-ui/icons/Brightness4"; import ListItem from "@material-ui/core/ListItem"; import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemText from "@material-ui/core/ListItemText"; const drawerWidth = 240; const fontFamily = [ "Noto Sans JP", "Lato", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", "sans-serif", ].join(","); const useStyles = makeStyles((theme: Theme) => createStyles({ root: { display: "flex", }, toolbar: { paddingRight: 24, }, toolbarIcon: { display: "flex", alignItems: "center", justifyContent: "flex-end", padding: "0 8px", ...theme.mixins.toolbar, }, appBar: { zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(["width", "margin"], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), }, appBarShift: { marginLeft: drawerWidth, width: `calc(100% - ${drawerWidth}px)`, transition: theme.transitions.create(["width", "margin"], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), }, menuButton: { marginRight: 36, }, menuButtonHidden: { display: "none", }, title: { flexGrow: 1, }, pageTitle: { marginBottom: theme.spacing(1), }, drawerPaper: { position: "relative", whiteSpace: "nowrap", width: drawerWidth, transition: theme.transitions.create("width", { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), }, drawerPaperClose: { overflowX: "hidden", transition: theme.transitions.create("width", { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), width: theme.spacing(7), [theme.breakpoints.up("sm")]: { width: theme.spacing(9), }, }, appBarSpacer: theme.mixins.toolbar, content: { flexGrow: 1, height: "100vh", overflow: "auto", }, container: { paddingTop: theme.spacing(4), paddingBottom: theme.spacing(4), }, paper: { padding: theme.spacing(2), display: "flex", overflow: "auto", flexDirection: "column", }, link: { textDecoration: "none", color: "inherit", }, }) ); const Copyright = () => { return ( <Typography variant="body2" color="textSecondary" align="center"> {"Copyright © "} 管理画面 {new Date().getFullYear()} {"."} </Typography> ); }; export interface GenericTemplateProps { children: React.ReactNode; title: string; } const GenericTemplate: React.FC<GenericTemplateProps> = ({ children, title, }) => { const classes = useStyles(); const [open, setOpen] = React.useState(true); const handleDrawerOpen = () => { setOpen(true); }; const handleDrawerClose = () => { setOpen(false); }; const [darkMode, setDarkMode] = React.useState( localStorage.getItem("darkMode") === "on" ? true : false ); const handleDarkModeOn = () => { localStorage.setItem("darkMode", "on"); setDarkMode(true); }; const handleDarkModeOff = () => { localStorage.setItem("darkMode", "off"); setDarkMode(false); }; const theme = createMuiTheme({ typography: { fontFamily: fontFamily, }, palette: { primary: { main: colors.blue[800] }, type: darkMode ? "dark" : "light", }, }); return ( <ThemeProvider theme={theme}> <div className={classes.root}> <CssBaseline /> <AppBar position="absolute" className={clsx(classes.appBar, open && classes.appBarShift)} > <Toolbar className={classes.toolbar}> <IconButton edge="start" color="inherit" aria-label="open drawer" onClick={handleDrawerOpen} className={clsx( classes.menuButton, open && classes.menuButtonHidden )} > <MenuIcon /> </IconButton> <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title} > 管理画面 </Typography> {darkMode ? ( <IconButton color="inherit" onClick={handleDarkModeOff}> <Brightness7Icon /> </IconButton> ) : ( <IconButton color="inherit" onClick={handleDarkModeOn}> <Brightness4Icon /> </IconButton> )} </Toolbar> </AppBar> <Drawer variant="permanent" classes={{ paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose), }} open={open} > <div className={classes.toolbarIcon}> <IconButton onClick={handleDrawerClose}> <ChevronLeftIcon /> </IconButton> </div> <Divider /> <List> <Link to="/" className={classes.link}> <ListItem button> <ListItemIcon> <HomeIcon /> </ListItemIcon> <ListItemText primary="トップページ" /> </ListItem> </Link> <Link to="/products" className={classes.link}> <ListItem button> <ListItemIcon> <ShoppingCartIcon /> </ListItemIcon> <ListItemText primary="商品ページ" /> </ListItem> </Link> </List> </Drawer> <main className={classes.content}> <div className={classes.appBarSpacer} /> <Container maxWidth="lg" className={classes.container}> <Typography component="h2" variant="h5" color="inherit" noWrap className={classes.pageTitle} > {title} </Typography> {children} <Box pt={4}> <Copyright /> </Box> </Container> </main> </div> </ThemeProvider> ); }; export default GenericTemplate;
画面右上のアイコンをクリックするとダークモードに切り替わります。
まとめ
WEBアプリやWEBサイトにおいて、ダークモードは必須の機能ではありませんが、簡単に実装できるのであれば機能を用意しておくことで、ユーザー(利用者)に喜ばれるかもしれません。