[CSS] ダークモード有効しない方法

2 min read

Adobe Acrobat の Chrome 拡張のバグによって、端末がダークモードの設定をしている場合にウェブサイトのダークモード指定を強制する不具合が発生していた(既に修正済み)。具体的にはbackground-colorが指定されていない要素の背景色が本来は白であることが期待されるところをダークモードの強制によって黒色になってしまうというもの。

この意図しない表示結果を正しくするための検証をした。

方法

カラースキームの指定には、HTML もしくは CSS を利用する方法がある。

指定できる値

  • normal - デフォルト値
  • dark - ダークモードのみのサポート
  • light - ライトモードのみのサポート
  • dark light - ダークモードとライトモードをサポートしており、ダークモードが優先される
  • light dark - ライトモードとダークモードをサポートしており、ライトモードが優先される

HTML で指定する方法

<meta name="color-scheme" content="light" />

CSS で指定する方法

:root {
  color-scheme: light;
}

検証時、拡張機能がcolor-scheme: light dark !importantを挿入してきていたため、color-scheme: light !important;を指定して上書きし直した。

参考

Related Articles

[Vite] CSSだけをビルドする方法

背景 / Vite をインストール / 仕様

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考