この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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
を指定するだけです。
SampleTemplate.tsx
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はブラウザに依存するため、デバイスやブラウザを変えると状態を引き継ぐことが出来ません。ユースケースに応じてデータベースの利用も検討してみてください。
SampleTemplate.tsx
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;
テンプレートに組み込む
前回の記事で作成したテンプレートにダークモードの切り替えを組み込んでみます。
GenericTemplate.tsx
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サイトにおいて、ダークモードは必須の機能ではありませんが、簡単に実装できるのであれば機能を用意しておくことで、ユーザー(利用者)に喜ばれるかもしれません。