CSS light-dark()関数ジェネレーターとは
CSS light-dark()関数ジェネレーターは、変数の重複なしでダークモード用のcolor-schemeとlight-dark()ルールを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
The light-dark() CSS function returns one of two color values based on the current color scheme, making it easy to support light and dark modes without duplicating CSS rules.
Limitations
- light-dark() only works when the color-scheme property is set on the document or element. Without it the function defaults to the first color.
- The function accepts exactly two color values -- one for light and one for dark. Complex theme switching still requires custom properties or media queries.
- Older browsers do not support light-dark(). Provide a fallback color before the light-dark() function in the property declaration.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。