Semantic UIのテーマを変える

css

CSSフレームワークとして人気のSemantic UIですが、
ガンガンバージョンアップ中なのかテーマを変える機構はあるのですが、自分でbuildしないといけません。(2015/02/05 現在)
多分、しばらくするともっと簡単にテーマを変えられるようになると思いますが。。

まず最初にインストールの仕方。

$ npm install semantic-ui
$ cd node_modules/semantic-ui
$ npm install
$ gulp install #なんか色々聞かれるけどデフォルトで大丈夫

で、テーマですが、src/themesディレクトリ内にテーマのディレクトリがあってそのディレクトリ名から選択します。

$ ls src/themes
amazon      bookish     chubby      default     fixed-width github      material    raised      round       striped     twitter
basic       bootstrap3  classic     duo         flat        gmail       pulsar      resetcss    rtl         timeline

今回materialのテーマを選ぶとします。
次にsrc/theme.configを編集します。
theme.configをみると以下のようになっていて、

####上省略####

/*******************************
        Theme Selection
*******************************/

/* To override a theme for an individual element
   specify theme name below

   Be sure to update the user folder name (see README)
*/

/* Global */
@site       : 'default';
@reset      : 'default';

/* Elements */
@button     : 'default';
@divider    : 'default';
@flag       : 'default';
@header     : 'default';

####下省略####

最初は'default'テーマが指定されている状態です。
このdefaultの文字をテーマ名に変えます。
しかし全部のdefaultを変えてしまうと次のgulp buildでエラーになるので、
以下のようにsrc/themes/テーマ名の下のディレクトリ/ファイルを調べます。

$ tree src/themes/material
src/themes/material
├── elements
│   ├── button.overrides
│   ├── button.variables
│   ├── header.overrides
│   └── header.variables
├── globals
│   ├── site.overrides
│   └── site.variables
└── modules
    ├── modal.overrides
    └── modal.variables

materialテーマだと、"button"と"header"と"site"と”modal”はmaterial用のデザインが用意されていることがわかったので、
src/theme.configの"@button"と"@header"と"@site"と”@modal”の'default'を'material'に変更します。
結果、下のようになります。

$ grep material src/theme.config
@site       : 'material';
@button     : 'material';
@header     : 'material';
@modal      : 'material';

theme.configを変更し終わったら、

$ gulp build

を実行して下さい。
distディレクトリ以下にcssが再生成されます。