CSS light-dark()関数ジェネレーターとは
CSSのlight-dark()関数は2つのカラー値を受け取り、color-schemeプロパティに基づいて自動的に1つ目をライトモード、2つ目をダークモードに選択します。これにより、基本的なダークモードサポートのために重複したCSSカスタムプロパティブロックやJavaScriptのテーマ切り替えが不要になります。
クイックアンサー
CSSのlight-dark()関数は、現在のカラースキームに基づいて2つのカラー値のいずれかを返すため、CSSルールを複製せずにライトモードとダークモードを簡単にサポートできます。
Last updated: 2026-05-25
制限事項
- light-dark()は、color-schemeプロパティがドキュメントまたは要素に設定されている場合にのみ機能します。設定されていないと、関数は最初の色をデフォルトとして使用します。
- この関数は正確に2つのカラー値（ライト用とダーク用）を受け入れます。複雑なテーマ切り替えには、引き続きカスタムプロパティまたはメディアクエリが必要です。
- 古いブラウザはlight-dark()をサポートしません。プロパティ宣言でlight-dark()関数の前にフォールバックカラーを提供してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- テキストカラーや背景など、テーマ設定するカラープロパティを選択します。
- 各プロパティにライトカラーとダークカラーを入力します。
- ツールがcolor-scheme宣言とlight-dark()関数呼び出しを生成します。
- CSSをコピーし、color-schemeのmetaタグをページのheadに追加します。
主な用途
- JavaScriptなしで静的サイトに基本的なダークモードを追加する。
- テキスト、背景、ボーダーにライトとダークのカラーペアを作成する。
- テーマの一貫性のためにlight-dark()を使用した小さなデザイントークンシステムを構築する。