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 * の後ろに追加するといいです。


似てるっぽいネタ


 
© 1999- plasmasphere.net All rights reserved.