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

「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。
Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。

すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。

One line - Dark Mode using CSS
by Akhil Arjun

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 制作済みのサイト・アプリをダークモードに対応させる方法
• CSSの解説

制作済みのサイト・アプリをダークモードに対応させる方法

ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。
前置きはここまでにして、さっそく始めましょう！👾

まずは、ニュースアプリの通常時（ライトモード）をご覧ください。

ニュースアプリの通常時

魔法のCSSを追加します。

これだけでダークモード対応の完成です✌

【訳者注】
prefers-color-scheme: dark;で使用してももちろんOKです。
参考: CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点

ダークモードにして表示してみます。

ニュースアプリのダークモード

CSSの解説

このたった一行のCSSで何が起こったのか解説します。

CSSのfilterプロパティは、ぼかしやカラーシフトなどのグラフィカルな効果を要素に適用します。フィルターは通常、画像・背景・境界線のレンダリングを調整するために使用されます（参考: MDN）。

このダークモードのCSSでは、invertとhue-rotateの2つを使用しています。

invertフィルター

配色を反転させるのに役立ちます。つまり、ブラックはホワイトになり、ホワイトはブラックになり、すべてのカラーで同様の効果が得られます。

hue-rotateフィルター

ブラックとホワイト以外のすべてのカラーで役立ちます。色相を180度回転させることで、アプリのカラーテーマは変化されず、単にそのカラーが減衰されるようになります。

invertとhue-rotateの効果

この方法の唯一の注意点は、画像のカラーも反転させてしまうことです。それを避けたい場合は、下記のCSSを加えて、img要素の画像への効果を元に戻します。

【訳者注】
他に除外したい要素がある場合、iframeは上記のCSSをimg, iframeにします。また、背景画像はそれを適用しているdivを除外する方法がありますが、そのdivに含まれているものも除外されるので注意が必要です。

また、html要素にtransitionを追加して、トランジションが派手にならないようにするのもよいでしょう。

これで、下記のようになります！

ライトモードとダークモードの切り替え

制作済みのWebサイト・スマホアプリにダークモードが実装されました！

【訳者注】
当ブログに適用するとこんな感じです。

当ブログをダークモード対応に

通常時はコンテンツ・サイドバー・両サイドの順に暗くデザインしていますが、カラーを反転させると明暗の順番も逆になってしまうので、残念ながら当ブログでの採用は見送りました。