React 与用户偏好：尊重用户已选择的操作系统设置

每个现代操作系统都会在某个时刻询问用户，他们想要什么样的用户界面。深色模式还是浅色模式。高对比度还是正常对比度。开启动画还是精简动画。从左到右还是从右到左。首选语言。用户在系统设置中选择一次，从那一刻起，机器上每一个构建良好的原生应用程序都会尊重这一选择。而你发布的 Web 应用程序通常不会这样做——它使用自己的深色模式切换开关、自己的动画库、自己默认为英文的文案，而操作系统偏好则变成了某人错误跟踪器中的一条五行备注。

修复方法很简单，且应用程序编程接口（API）表面很窄。浏览器通过 window.matchMedia 和 navigator.language 暴露操作系统偏好，每个现代 React 应用程序都可以在一个下午内将它们连接起来。问题不在于能力；而在于这些连接逻辑存在于每个 Web 功能都深陷的 useEffect/useState/服务端渲染（SSR）不匹配的泥潭中，因此被无限期推迟。ReactUse 为此提供了七个专注的钩子函数，它们共同涵盖了真正重要的四个用户偏好维度：主题、运动效果、对比度和区域设置。

本文将逐一介绍每一个钩子——它返回什么，隐藏了什么错误，以及 resulting 组件的结构是怎样的。最后，我们将它们组合成一个单一的 useAppearance() 钩子，一次性读取这四个信号。

1. usePreferredDark — 启动主题系统的布尔值

这是最简单的一个。usePreferredDark() 如果用户的操作系统设置为深色模式，则返回 true，否则返回 false。它是 window.matchMedia('(prefers-color-scheme: dark)').matches 的一层薄包装，处理了否则你需要自行处理的两件事：服务端渲染（SSR）（没有 window 对象）和实时更新（用户可以在你的标签页打开时切换操作系统开关，应用程序应做出反应）。

手动实现方式

import { useEffect, useState } from "react";

function ManualDark() {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    setDark(mq.matches);
    const onChange = (e: MediaQueryListEvent) => setDark(免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。