mosir のカラーテーブルは、テーマ内の theme.json を編集することで、追加・変更ができます。
- 新規追加をしたい場合は、JSONの編集以外にも作業が必要となることがあります。ページの後半で解説します。
- バージョン1.1.1の時点では、
theme.jsonでの完全な色の反転（黒背景、ダークモード）は想定していません。CSS変数の上書きとなるため、別記事で解説します。
0. すぐに色を変えたい場合
非推薦ですが、子テーマを作る時間がない…色の変更をとりあえず確認したい…という場合は「外観 > カスタマイズ」画面の「追加CSS」でCSS変数を直接上書きすることもできます。この変更は公開ページのみに反映され、編集画面の色は変わりません。
:root {
--wp--preset--color--primary-dark: #004400;
--wp--preset--color--primary: #337711;
--wp--preset--color--primary-light: #559922;
--wp--preset--color--primary-lighter: #AACC99;
--wp--preset--color--primary-fade: #EEFFDD;
}
1. 各色の意味
ナビゲーションの色変更のみを行いたい場合は primary, primary-dark, primary-light, primary-lighter, primary-fade の5色を編集してください。
色のサンプルはデモサイトの下記ページをご覧ください。
カラーパレットの詳細はドキュメントの下記ページをご覧ください。
| slug | 意味 |
|---|---|
*** | 基本色 |
***-dark | 基本色よりも暗い色 |
***-light | 基本色よりもわずかに明るい色 |
***-lighter | 基本色よりも明度が高い色 |
***-fade | 基本色の色相のまま、ひじょうに地の背景色に近似している色 |
default-*** | 文字に使用する色グループ |
primary-*** | ブランドカラーにあたる色グループ |
secondary-*** | 注目色に使用する色グループ[1] |
important-*** | 強い注意、エラーに使用する色グループ[1] |
2. 既存の色を変更する
子テーマを作成し、 mosir の theme.json を複製してください。
作成したJSONファイルを開き、「”palette”」で検索をすると、カラーパレットを定義している箇所が見つかります。バージョン1.1.1 時点では以下のように定義しています。
"palette": [
{
"color": "#262623",
"name": "default-dark",
"slug": "default-dark"
},
・・・中略
{
"color": "#000000",
"name": "black",
"slug": "black"
}
]
各色の定義
color, name, slug の3つで1つの色を定義しています。以下の通り編集してください。
color
CSSで解釈できるカラーコードを入力してください。mosir では6桁のRGBコードで指定しています。 oklch() 関数によるOklch 色空間指定もできます。
name
パレットにカーソルを置いたときに表示される色名です。mosir は国際化をしている関係上、英語としています。英語で問題なければ、「slug」と同じで構いません。
slug
パレットのシステム上の色名です。変更はテーマ全体に影響し、CSS変数や、文字色を変えたときのクラス名に反映されます。この変更はしないことをおすすめします。
表示を確認する
変更は即時反映されます。ブラウザのキャッシュを削除して公開ページを更新し、表示を確認してください。管理画面の「外観 > デザイン」内のスタイル画面でも、カラーパレットをプレビューできます。
3. 新規追加をした場合
追加した色を、WordPressのブロックエディタのみで使用する場合は、作業はありません。CSS、SCSSで使用したい場合は以下の通り作業してください[2]。
子テーマ用のCSSを追加する
子テーマ内に、上書き用のCSSを新規追加してください。
CSS変数を追加する
WordPressは theme.json で定義された色を --wp--preset--color--(色のスラッグ) というCSS変数に変換しています。
mosirのCSSでは、ファイルの冒頭でこれらの変数を wp--preset-- を外して簡略化した変数に代入しなおしています。
:root {
--color-default-dark: var(--wp--preset--color--default-dark);
--color-default: var(--wp--preset--color--default);
--color-default-light: var(--wp--preset--color--default-light);
・・・
追加した変数が accent であれば、以下のCSSを子テーマ用のCSSに追加してください。CSS変数 --color-accent が使用できるようになります。
:root {
--color-accent: var(--wp--preset--color--accent);
}
[1]: この色グループはテーマCSSでは使用していません。ブロックエディタのみ選択できます。
[2]: WordPressの変数をそのまま使用することもできます…が、避けるべきです。機械的に生成された変数名なので長くて覚えにくく、かつ、WordPressに依存しているため、改修の際に困ることになります