【Wordpress】SWELLテーマのCSS色変数を解析してみました。

タイトルの通りなんですが、最近、Wordpressの「SWELL」というテーマを使用することが多く、色々とCSSでサイトをカスタマイズする際に・・・
「管理画面で設定した色はどういう風にして取得しようか」
と考えるようになりました。
Google先生に聞いてみようと検索もしてみたんですが、どうもSWELLのCSSの色変数を紹介している記事に巡り合えず・・・

で、SWELLをちょっと自身で解析してみたんですが・・・
でるわでるわ、けっこういろんなCSSの色変数がありましたので、ご紹介いたします。

• color: var(--color_main);

• color: var(--color_text);

• color: var(--color_link);

• color: var(--color_htag);

• color: var(--color_bg);

• color: var(--color_gradient1);

• color: var(--color_gradient2);

• color: var(--color_main_thin);

• color: var(--color_main_dark);

• color: var(--color_list_check);

• color: var(--color_list_num);

• color: var(--color_list_good);

• color: var(--color_list_triangle);

• color: var(--color_list_bad);

• color: var(--color_faq_q);

• color: var(--color_faq_a);

• color: var(--color_header_bg);

• color: var(--color_header_text);

• color: var(--color_footer_bg);

• color: var(--color_footer_text);

これだけありました(笑)。

「var(--color_main)」はメインカラーですね。
ほぼほぼ、名称から想像できると思います。
その他、管理画面のどこで設定しているか謎な変数もあります(笑)

var(--color_main_thin) はメインカラーの明るい色（明るすぎですが）、
var(--color_main_dark) はメインカラーの暗い色、
というふうになっているようです。

とりあえず、色変数の早見表が必要だろうと思い、
テーブルで作ってみました。
管理画面の固定ページや新規投稿で「テーブルブロック」を作成し、「HTMLとして編集」に切り替えて、以下のHTMLソースをコピペしてください。

<figure class="wp-block-table"><table><tbody>
<tr><th>color: var(--color_main);</th><td><span style="color: var(--color_main);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_main);">&emsp;</div></td></tr>
<tr><th>color: var(--color_text);</th><td><span style="color: var(--color_text);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_text);">&emsp;</div></td></tr>
<tr><th>color: var(--color_link);</th><td><span style="color: var(--color_link);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_link);">&emsp;</div></td></tr>
<tr><th>color: var(--color_htag);</th><td><span style="color: var(--color_htag);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_htag);">&emsp;</div></td></tr>
<tr><th>color: var(--color_bg);</th><td><span style="color: var(--color_bg);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_bg);">&emsp;</div></td></tr>
<tr><th>color: var(--color_gradient1);</th><td><span style="color: var(--color_gradient1);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_gradient1);">&emsp;</div></td></tr>
<tr><th>color: var(--color_gradient2);</th><td><span style="color: var(--color_gradient2);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_gradient2);">&emsp;</div></td></tr>
<tr><th>color: var(--color_main_thin);</th><td><span style="color: var(--color_main_thin);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_main_thin);">&emsp;</div></td></tr>
<tr><th>color: var(--color_main_dark);</th><td><span style="color: var(--color_main_dark);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_main_dark);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_check);</th><td><span style="color: var(--color_list_check);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_check);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_num);</th><td><span style="color: var(--color_list_num);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_num);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_good);</th><td><span style="color: var(--color_list_good);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_good);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_triangle);</th><td><span style="color: var(--color_list_triangle);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_triangle);">&emsp;</div></td></tr>
<tr><th>color: var(--color_list_bad);</th><td><span style="color: var(--color_list_bad);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_list_bad);">&emsp;</div></td></tr>
<tr><th>color: var(--color_faq_q);</th><td><span style="color: var(--color_faq_q);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_faq_q);">&emsp;</div></td></tr>
<tr><th>color: var(--color_faq_a);</th><td><span style="color: var(--color_faq_a);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_faq_a);">&emsp;</div></td></tr>
<tr><th>color: var(--color_header_bg);</th><td><span style="color: var(--color_header_bg);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_header_bg);">&emsp;</div></td></tr>
<tr><th>color: var(--color_header_text);</th><td><span style="color: var(--color_header_text);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_header_text);">&emsp;</div></td></tr>
<tr><th>color: var(--color_footer_bg);</th><td><span style="color: var(--color_footer_bg);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_footer_bg);">&emsp;</div></td></tr>
<tr><th>color: var(--color_footer_text);</th><td><span style="color: var(--color_footer_text);">あいうえおかきくけこ</span></td><td><div style="background: var(--color_footer_text);">&emsp;</div></td></tr>
</tbody></table></figure>

文字と背景色で指定してみております。
たぶん、けっこうわかりやすいんではないかなあと思います。

メインカラーを背景色に、
背景色で文字色にしたいという場合は、

color: var(--color_bg);
background-color: var(--color_main);

というふうにデザインもできますよね。

管理画面を見ていると、まだまだ色が拾えそうですが…
とりあえずこれくらいあれば充分かなあ、と思います。
それよりも、var(--color_main_thin) の 明るさを管理画面で調整することはできないものだろうかと、ちょっと悩み中です。
wp-content/themes/swell/classes/Style/Color.php
内の

Style::add_root( '--color_main_thin', SWELL::get_rgba( $color_main, 0.05, 0.25 ) );

の数値をいじればできるんでしょうけれど…SWELL親テーマ本体に修正を加えるのはちょっと気が引けます(;^_^A