Windows11でダークモードにした際にChromeでCSSが変更されて見えづらくなってしまう問題を解決した

2022年2月24日(木) 12時49分57秒 | 37 view

Windows11で色設定からダークモードを選択した際に、ブラウザ側でもその情報を読み取りダークモード表示してくれる仕様があります。
TwitterなどでもWebアプリ側に設定はなく、OSでのカラーモードが継承されています。

ただ、Webサイトによっては以下のようにダークモードで背景色や文字色が勝手に書き換えられ、たいへん見づらくなる現象があります

左:ダークモードでCSSが書き換えられ黒背景になっている 右:通常の表示



選択すると正しく表示されるため、テキストが消えたわけではない事がわかります。

Chromeで別アカウントであれば起きない問題なのに、特定のアカウントだけ起きる原因は、Adobe Acrobatのchrome拡張が原因でした。
https://chrome.google.com/webstore/detail/adobe-acrobat-pdf-edit-co/efaidnbmnnnibpcajpcglclefindmkaj

おそらくPDFビューワーとして機能する際にstyleが書き換えられるのが原因かと思います。
拡張機能を無効にすることで普通の表示に戻すことができます。

avatar Ryotaro Tsuda @utautattaro

3D系Webデベロッパー。
エンジニアリングよりもデベロップメントやアートに興味があります。技術の根幹やコアも重要ですが、それで何を実現/表現するか?を考えていることの方が多いです。