【theme.json】テキストカラーの設定方法

カラーパレットの設定

カラーパレットはデフォルトで12種類設定されています。それ以外のカラーを設定したい場合は以下のように記述します。

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Orange",
                    "slug": "orange",
                    "color": "#FFA500"
                },
                {
                    "name": "Gray",
                    "slug": "gray",
                    "color": "#808080"
                }
            ]
        }
    }
}

JSON

エディタとサイト全体にデフォルトのカラーを設定

サイト全体で使用するテキストのカラーが黒以外の場合は、以下のように記述することで全体に適用されます。

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Orange",
                    "slug": "orange",
                    "color": "#FFA500"
                },
                {
                    "name": "Gray",
                    "slug": "gray",
                    "color": "#808080"
                }
            ]
        }
    },
    "styles": {
        "color": {
            "text": "var(--wp--preset--color--gray)"
        }
    }
}

JSON