ちょっと良いUIおれおれAdvent Calendar 2024 – 14日目

知ってはいたものの自分は使ってなかったので完全に意識の外でした。最近作ったやつのフィードバックで教えてもらって気付いた。ブラウザー規定の初期色に知らない間に部分的に依存してるとやばい配色になりがち。

デモ：

確認は簡単

デバイスでダークモードを設定してみるだけなんで簡単です。だいたいアクセスしやすい場所に設定ありますよね。いやそれは個人設定次第か。

DevTools からも一時的にエミュレートすることができます。DevTools の “…” のボタンから More tools > Rendering 、チェックボックス群の先までスクロールして “Emulate CSS media feature prefers-color-scheme” で選択します。

対応は簡単だけど

@media (prefers-color-scheme: dark) { … } で括るだけなので簡単は簡単です。近年はセレクターの入れ子ができるようになったので、こういう書き方もできます。

.foo {
  color: black;

  @media (prefers-color-scheme: dark) {
    color: white;
  }
}

あと light-dark() という関数もできました。

.foo {
  color: light-dark(black, white);
}

わあ簡単。

というわけで書くこと自体は難しくはないんですが、問題はどれだけの量を書けば良いかって話ですね。色の指定なんて大量に書くわけで……。

うまいことデザイントークンとか使って管理できてると良いですね。

おしまい

逆に全部指定しちゃえば壊れはしないんですがダークにならないのでアレですね。まあウチのことですけどね。切り捨てる意思決定もありだとは思いますが、崩れないようせめて確認はしておきたいと思いました。

参考