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'