高度な配色可変テーマ
より高度な配色可変テーマを作ることもできます。ただ少々難しくなってくるので挫折しないように注意してください。
通常は、基本の配色可変設定だけで十分ですし、使うとしても自動連動を活用するとよいでしょう。
色が多すぎる問題
テーマを作成していると「同じ色だけど別の場所に使う」とか「似たような色だけど少し違う」というものが非常に多く出てきます。それらにすべて別の色名を付けると、下記の画像のようになってしまいます。
HSVバーで一括で色を変える分には構いませんが、その後、微調整で各部の色を変えたいというときには無理がある色数です……。*1
色の関係性を定義する
例えばこんな色設定があったとします。
article .body h3 {
background-color: #ccf; /* $c=main */
}
div.hatena-moduletitle {
background-color: #ccf; /* $c=modulebg */
}
button {
background-color: #bbe; /* $c=btnbg0 */
}
button:hover {
background-color: #ddf; /* $c=btnbg1 */
}
モジュールタイトルは同じ色ですが設定できるように分けたい、ボタンの色はちょっとだけ違う。かといってユーザーに4色設定させるのも難儀なものです。
そこで色の関係性を定義してあげます。
article .body h3 {
background-color: #ccf; /* $c=main */
}
div.hatena-moduletitle {
background-color: #ccf; /* $c=modulebg = main */
}
button {
background-color: #bbe; /* $c=btnbg0 = auto:main */
}
button:hover {
background-color: #ddf; /* $c=btnbg1 = auto:main */
}
右辺になにやら増えましたね。「=main」はそのまま同色を示しますが、「auto:main」はmainに関連する色なので、mainを変更したら自動的に連動して変化させてねという設定です。
- HSVバーを操作したときの色変化は、関係性よりも優先します。
- 関係色（左辺の色）は「詳細」ボタンを押さない限り表示されなくなります。
- main色を変化させたとき連動するのは、詳細ボタンを押してない状態に限ります。
関係性のルール
- 1色に対して何色も使うことはできますが、1度関係性を定義した色を、再び式の右側に使うことはできません。
- CSSファイル上の色の登場順に関わらず右辺に使うことができます。
- 同じ色が再度登場しても、関係性定義は1度だけすれば良い。
- 色名と色式の間の「=」には空白を書くことができる。
$c=A OK $c=B = C OK $c=C OK $c=E = B NG。関係性を定義した色は右辺に書けない。 $c=B OK。一度定義してあるので「B=C」と書く必要はない。 $c=B = auto:C NG。以前の定義と異なる定義はできない。
まとめ
結構高度なことができますが、ここまでやる人が本当にいるのかどうか。
そもそも同じ色を使う場合に色名を分ける必要があるかよく考えた方が良いと肝に銘じてテーマ作成しましょう。