Theme of Material-UI

Material-UIのThemeの使い方を紹介.

  1. Material-UI
  2. Theme
  3. See Also

Material-UI

Material-UIとMaterial Designについては前回の記事を参照.

Theme

Material Designでは色をPrimary color paletteとSecondary color (Accent color) paletteに限定することにより、 直感的で統一感のあるDesignを作り出している.

Material-UIではこれをThemeとして管理する.

Color

前回の記事のExampleにThemeを適用し、Colorを変更する.

Colorの指定はColor paletteとMaterial-UIのcustomization/colorsを参照.

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import ThemeDecorator from 'material-ui/lib/styles/theme-decorator';
import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';

export default ThemeManager.modifyRawThemePalette(
  ThemeManager.getMuiTheme(LightRawTheme),
  {
    primary1Color: Colors.cyan500,
    primary2Color: Colors.cyan700,
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.green400,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.blueGrey800,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
    pickerHeaderColor: Colors.cyan500
  }
)

theme.js に書き込み、

 import { render } from 'react-dom';
 import React, { Component, PropTypes } from 'react';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
 import {
   Avatar, Card, CardActions,
   CardHeader, CardMedia, CardTitle,
-  RaisedButton, FlatButton, CardText
+  RaisedButton, FlatButton, CardText,
+  ThemeWrapper
 } from 'material-ui';
+import ThemeDecorator from 'material-ui/lib/styles/theme-decorator';

+import Theme from './theme';
 
+@ThemeDecorator(Theme)
 class App extends Component {
 ...
}

@ThemeDecorator で適用する.

/20160111/theme-applied.png

簡単にColorなどを変更できるが、Themeとして管理することにより、統一感が崩れない.

Font Family

Material-UIのdefaultの font-family'Roboto', sans-serif だが、日本語などの Roboto でカバーされていない言語の場合 Noto を使用したい.
(Material DesignのTypography参考.)

今回は Noto Sans JP を使用するため、あらかじめHTMLに

<link href='http://fonts.googleapis.com/earlyaccess/notosansjp.css' rel='stylesheet' type='text/css'>

を差し込む.

あとは上記の theme.js

 export default ThemeManager.modifyRawThemePalette(
-  ThemeManager.getMuiTheme(LightRawTheme),
+  ThemeManager.modifyRawThemeFontFamily(
+    ThemeManager.getMuiTheme(LightRawTheme),
+    "'Roboto', 'Noto Sans JP', sans-serif"
+  ),
   {
     primary1Color: Colors.cyan500,
     primary2Color: Colors.cyan700,

のように ThemeManager.modifyRawThemeFontFamilyfont-family を変更する.

/20160111/font-family-not-changed.png /20160111/font-family-changed.png

See Also