使用偏好- 颜色- 方案

反应 用户颜色方案首选项的订阅钩 .

开始

QQ 跳出开始

npm install @anatoliygatt/use-prefers-color-scheme

import { usePrefersColorScheme } from '@anatoliygatt/use-prefers-color-scheme';

function Example() {
  const preferredColorScheme = usePrefersColorScheme();
  const isDarkColorSchemePreferred = preferredColorScheme === 'dark';
  return (
    <div>
      Preferred Color Scheme:{' '}
      {isDarkColorSchemePreferred ? '🌚 Dark' : '🌞 Light'}
    </div>
  );
}

现场直播

使用服务器侧渲染( SSR)

像"Next.js"和"Gatsby"这样的框架利用了服务器侧渲染,这意味着HTML在发送到浏览器之前的某个时候是被预发的. 当我们第一次制作反应元件树时,我们不知道用户是否更喜欢浅色或暗色方案.

它可能导致水合过程中加分不匹配. 为了防止这种情况,我们需要制定 ssr 选项 usePrefersColorScheme() 钩入 true,像这样:

usePrefersColorScheme({ ssr: true });

这将保证在原始服务器渲染和第一个客户端渲染之间不会出现标记不匹配,但是,我们必须作出妥协:强制一种暗色方案用于 所有用户 在第一个渲染.

许可证

麻省理工学院