Bootstrap3 のカラースキームを変更する 1pxdeep

(1) http://rriepe.github.io/1pxdeep/

にアクセスする。
「Download」ボタンをクリックしてファイルをダウンロードして展開する。
Seed colorを指定し、「Scheme now」ボタンをクリックして色を確認する。
気に入った色になったら、RGB値をコピーする。

(2) http://getbootstrap.com/getting-started/#download

でSource Codeをダウンロードして展開し、less フォルダに (1) で取得したファイル

scheme.less
1pxdeep.less

を配置する。

1pxdeep.less

を編集し、先頭部分に

@import "bootstrap.less";
@import "scheme.less";

を追記する。

scheme.less

を編集し、先頭部分の

@seed-color:

に (1) でコピーしたRGB値を指定する。

(3) Crunch (http://crunchapp.net/) 等のツールを入手して、(2) の

1pxdeep.less

を .css ファイルにコンパイルし、適宜配置する。

(4) 対象のHTMLファイルを編集し

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/1pxdeep.css" rel="stylesheet" />

のように Bootstrap の後に (3) で作成したCSSファイルを指定する。

以上。