キタジマ タカシ この記事は Snow Monkey アドベントカレンダー 2020 11日目の記事である、mimi さんの「Snow Monkey の CSS変数 について知る（My Snow Monkey Starter成長記 vol.1）」へのアンサー記事です（なにか問われたわけではないけど言い訳を書きたくなりましたw）。
–_color-black、–_color-gray などの、色名の CSS カスタムプロパティ
なんでわざわざ black とか gray とか定義してるの？直接 #111 とか #ccc とか書けば良いやん？と思われる方もいると思うので解説を。これは別に黒やグレーをサイトの雰囲気にあわせて調整してねという用途で用意しているわけではなくて（まぁ結果それもできるようになってるけど）、ダークモードのために用意した変数になります。通常は黒だけどダークモードなら白に変更する、というのを一撃でできるようにするためですね。
@media (prefers-color-scheme: dark) {
:root {
--_color-black: #fff
}
}ただ、変数化してみたは良いものの、現実的には有彩色に重なった部分はどうするかとか、無彩色同士でも色の組み合わせによっては単純に反転させたら超見えにくいとか、いろいろ問題があるので、結局単純に一撃で変更することはできず、オフィシャルな機能としてはダークモード対応機能は持たせていません…。
個人的にはgrayのlighterをopacityいじる感じにしてくれると背景に馴染んでくれるから良いかもなあと思ったりしましたが
単純にそういう発想がなかったのですが、透過にすることで馴染んで良い感じになる部分もあれば馴染むことで灰色にしたいのに灰色に見えないということで問題になることもあると思うので、全体的にやるのはちょっと難しいのでは、という印象です。でもコード的にはスッキリしそうな予感はするので、もとからそういう発想をもっていたらそうしていたかもしれません。
見出しやウィジェット用の CSS カスタムプロパティ
これは全くもってつくりたくなかったのですが、互換性的な問題でつくらざるを得なかったものになります…。
Snow Monkey はデフォルトで記事中の見出しやウィジェットのタイトル部分に装飾があります。↑の見出しがまさにそうですね。左側にアクセントカラー、背景がグレーという。
で、これもほんと最初によく考えずに装飾をつけちゃったのですが、開発をずっと続けていると「あれ？これデフォルトは装飾なしでつけたい人だけがつけれるほうが良かったんじゃね？」と感じるようになりました。Snow Monkey は受託制作の現場でもよく使用されているようなのですが、そういう現場って Snow Monkey ありき、というよりはもうちょっとデザインありきだったりすると思うんです。そういうときに、見出しのデザインは○○で、みたいな指示があったときにデフォルトで装飾があたっているとわざわざ打ち消さないといけないので結構ジャマですよね。CSS は追加は良いけど打ち消しはメンテナンスや開発体験的にしんどいことが多いので。
ただ、後方互換性を考えるといきなり装飾を消すわけにもいかない。なので「装飾をなくす」オプションはつけるとしても、どうやってなくすかが問題になる。「装飾をなくす」を選んだらデフォルトであたっている装飾を「打ち消す」形にしちゃうと、デザインを変えたい人はそれをさらに打ち消す形になる。これはちょっと気持ちわるい。とかなんとか考えた末にたどり着いたのが、デフォルトの装飾は全部 CSS カスタムプロパティにしちゃって、「装飾をなくす」のときは CSS カスタムプロパティが未定義になるようにすれば上書き上書きよりもデザインを変えやすいのではない？ということでした。どうなの？
仕組み的には全然きれいではないので、僕自身全く納得はいっていないのですけれども、もっとこういう方法があるんじゃない？という CSS・WordPress マスターな方がいらっしゃいましたらぜひご助言いただきたいです…。
ということで Snow Monkey の CSS カスタムプロパティに関する言い訳記事でした！
