GeneratePressのデフォルトカラーパレットは、以下の7色です。
| 色 | 名前 | カラーコード |
|---|---|---|
| Contrast | #222222 | |
| Contrast 2 | #575760 | |
| Contrast 3 | #b2b2be | |
| Base | #f0f0f0 | |
| Base 2 | #f7f8f9 | |
| Base 3 | #ffffff | |
| Accent | #1e73be |
なお、上記の名前はCSS変数名としては、すべて小文字でスペースはハイフンでつながれます。
これがデフォルトですが、ここではアクセント色を3色に拡張してみましょう。
あまり知られていないかもしれませんが、GeneratePressでは好きな名称を使って自由にカラーパレットを拡張でき、それをGutenbergのブロック編集画面から活用できます。
アクセントカラーバリエーション
| 色 | 名前 | カラーコード |
|---|---|---|
| Accent | #0171d5 | |
| Accent Alt(ホバー用) | #1f81d6 | |
| Accent Dark(背景用) | #0b3a6f |