usePreferredColorScheme

prefers-color-scheme 媒體查詢

Usage

Live Editor

function Demo() {
  const color = usePreferredColorScheme();

  return <div>首選色彩方案：{color}</div>;
};
Result

API

usePreferredColorScheme

Returns

ColorScheme: prefers-color-scheme的媒體查詢值

Arguments

參數名描述類型預設值
defaultState默认值ColorScheme | undefinedno-preference

ColorScheme

Type

export type ColorScheme = 'dark' | 'light' | 'no-preference'