plasmasphere.net -プラズマスフィア ドットネット-
Diary
ユーザスクリプトを使ってダークモード未対応ページをダークモードにする
2022/10/20(Thu) 23:10
WebブラウザにOSのダークモードが反映されるようになって久しいですが、漏れなく全てのWebサイトはダークモードの対応をするべきというのが私の持論でございます。
かくいう当サイトも対応しております。やったのつい最近だけどな!
とはいえ、ダークモード未対応のサイトもまだ多くあります。そんな時にOSのダークモードに合わせてページの色合いを変更できるスタイルを紹介します。
Violentmonkey(Greacemonkey)をインストールして、以下の内容を貼り付けるだけです。
Chrome版(Edge版) Violentmonkey
Firefox版 Violentmonkey
window.addEventListener("load", (event) => { let style = `<style> html { filter: invert(1) hue-rotate(180deg); } iframe, img, object * { filter: invert(1) hue-rotate(180deg); } <style>`; document.querySelector("head").insertAdjacentHTML("beforeend", style); });
Violentmonkey の使い方が分からない人はこの辺とか読んでみてください。
https://gigazine.net/news/20210211-violentmonkey/
CSSで色を反転させるだけなので、白は黒くなって黒は白くなります。そもそもダークモードに対応していないページだけで対応すればいいので、その辺りは適宜やってください。
反転させたくないエレメントがある場合は、iframe, img, object * の後ろに追加するといいです。