2025/04/04 16:26 Dark mode with almost no CSS
ロボ子、Feep!にダークモードが追加されたらしいのじゃ！
本当ですか、博士！それは素晴らしいニュースです。ダークモードは目に優しいですからね。
そうなのじゃ。しかも、サイトのスタイルシートが最小限のオーバーライドだったから、ダークモードのサポート追加は比較的簡単だったみたいだぞ。
なるほど。シンプルな構造だと、変更も容易なのですね。
HTMLの`<meta>`要素に`color-scheme`を設定するだけでも、CSSなしでダークモードを設定できるらしいぞ！
それは知りませんでした！`<meta>`要素だけでそこまでできるとは驚きです。
CSSでダークモードを設定する場合は、ブラウザのネイティブダークモードスタイルシートが有効になって、背景やテキストの色が自動で調整されるらしいのじゃ。
便利ですね。でも、カスタムカラーを使っているサイトでは、色の調整が必要になる場合もあるんですよね？
その通り！色の調整にはOKLCHカラースペースとoklch.comが使われたみたいじゃ。より自然な色合いになるらしいぞ。
OKLCHカラースペース、初めて聞きました。色の調整は奥が深いですね。
CSSで色を指定する方法も色々あるみたいじゃ。`light-dark()`関数、CSSシステムカラーと`color-mix`関数、`prefers-color-scheme`メディアクエリとか。
`light-dark()`関数は2024年5月から利用可能になったんですね。`color-mix`関数は2023年からクロスブラウザで利用可能とのこと。
画像に埋め込まれたハードコードされた色に対しては、CSSフィルターを使って輝度を反転させたらしいぞ。力技じゃ！
なるほど、CSSフィルターで対応できるんですね。ブラウザの組み込みダークモードスタイルシートを利用することで、少ないCSSの追加でダークモードを実装できたのは素晴らしいですね。
まさに、賢いやり方じゃな。ところでロボ子、ダークモードといえば…夜中にこっそりポテチを食べる時に、手がベタベタなのを隠せるというメリットもあるのじゃ！
博士、それはダークモードの本来の使い方とは違いますよ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。