たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法

「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き

[coliss]

さまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSS。すぐにダークモードにしたい時に便利です。

[spark7]

雑だなあ... chromeだとbodyの背景がnoneやtransparntのとき反転しないのね。はてなで試したらダメだった

[mokemoke3841]

簡易的な案としてはありかも。

[klim0824]

“filter: invert(1) hue-rotate(180deg);”

[daruyanagi]

やっつけっぽいけど、うちにもしこんどくか

[ihok]

javascript:var f="invert(1) hue-rotate(180deg)";document.querySelectorAll("html").forEach((e)=>{e.style.filter=f});document.querySelectorAll("html img").forEach((e)=>{e.style.filter=f});

[yug1224]

基本これを入れておいて、部分的に変えたい場合は上書きできるのだろうか

[aox]

これではてブをダークモードにしてますね。画像を完全に元に戻すと眩しいので95%にしてます

[misshiki]

“このダークモードのCSSでは、invertとhue-rotateの2つを使用しています。”CSSのfilterプロパティ。こういうプロパティあるんだ。と思ってブコメを見たらうまくいかないパターンもあるみたい...

[pinkid77]

ダークモード

[kenzy_n]

イン・ダーク

[toaruR]

hue-rotate がもうちょいなのか

[Keisuke69]

フィルターのinvertで色を反転させて、hue-rotateで色相を180度回転させる、と。それだけでいい感じになるもんなのか。手元のChromeでユーザースタイルシートで試そうと思ったがなんかうまく行かなかった

[miki3k]

手間いらず

[mayumayu_nimolove]

あー、もうこれでいいや

[casm]

かしこい