最小限のCSSで驚くほど簡単にダークモードを実現
2025-04-04
Feep!ウェブサイトは、驚くほど少ないCSSで洗練されたダークモードを実現しました。著者は3つのアプローチを詳述しています。``タグを使用してブラウザの組み込みダークモードを活用する方法、`color-scheme`プロパティを使用してCSSを制御する方法、`prefers-color-scheme`メディアクエリを使用して明暗モードのスタイルを個別に設定する方法です。ヒントとしては、`light-dark()`関数と`color-mix()`関数を使用して色を最適化する方法、CSSフィルタを使用して画像とコードブロックを巧みに処理する方法などがあります。結果は？ほんの一握りのCSSを追加するだけで、エレガントなダークモードへの切り替えが実現し、開発プロセスが大幅に簡素化されます。
開発
ブラウザ標準