Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Hand colorScheme.set() to Appearance, so every reader of the scheme moves with it

未关闭
  • 哪里不对？
#510 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 3 天内回复

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
25/100
Issue 类型
功能
描述清晰度
需要澄清
活跃度
活跃
技术栈
react-native, typescript
领域
frontend

调研方向

Start by reading issue #415 and tracing colorScheme.set(), useColorScheme(), and the stores built on Appearance.addChangeListener; the issue names no files or tests. The open question is whether set() should delegate to Appearance or remain local, so the direction needs a maintainer decision before implementation. Done means all scheme readers behave consistently with the chosen direction, including the described platform and Jest cases.

由索引模型根据 Issue 内容生成。

描述

On main, colorScheme.set() moves this library's observable and nothing else. useColorScheme() and every store built on Appearance.addChangeListener keep the old scheme, so an app that calls the setter renders its dark: classes on one scheme and its prop-valued colours on the other.

On a device the split is on screen. In the before frame of #415's evidence, taken on 3.1.0-rc.0 on an Android 16 emulator after colorScheme.set("dark"), the class layer reads dark and paints the dark: swatch while Appearance.getColorScheme() and an Appearance.addChangeListener subscriber still read light:

It reproduces on main at 2421ea7 (Windows 11, Node 26.12.1) with this branch, main with one test added:

git clone --branch repro/510-color-scheme-set-skips-appearance https://github.com/YevheniiKotyrlo/react-native-css
cd react-native-css
yarn install
yarn jest src/__tests__/native/color-scheme-set-reaches-appearance.test.tsx

src/__tests__/native/color-scheme-set-reaches-appearance.test.tsx:

// colorScheme.set() is a request every reader of the scheme hears, so it reaches Appearance, which useColorScheme() reads
import { Appearance } from "react-native";

import { colorScheme } from "react-native-css/native";

afterEach(() => {
  jest.restoreAllMocks();
});

test("colorScheme.set() hands the scheme to Appearance", () => {
  const setColorScheme = jest.spyOn(Appearance, "setColorScheme");

  colorScheme.set("dark");

  expect(colorScheme.get()).toBe("dark");
  expect(setColorScheme).toHaveBeenCalledWith("dark");
});

Expected: colorScheme.set("dark") reaches Appearance.setColorScheme("dark"), so useColorScheme() and every Appearance listener move with the class layer.

Actual: colorScheme.get() answers "dark", and Appearance.setColorScheme is never called.

The run's output 
FAIL src/__tests__/native/color-scheme-set-reaches-appearance.test.tsx (9.454 s)
  × colorScheme.set() hands the scheme to Appearance (2 ms)
  ● colorScheme.set() hands the scheme to Appearance
    expect(jest.fn()).toHaveBeenCalledWith(...expected)
    Expected: "dark"
    Number of calls: 0
      14 |
      15 |   expect(colorScheme.get()).toBe("dark");
    > 16 |   expect(setColorScheme).toHaveBeenCalledWith("dark");
         |                          ^
      17 | });
      18 |
      at Object.toHaveBeenCalledWith (src/__tests__/native/color-scheme-set-reaches-appearance.test.tsx:16:26)
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        10.51 s
Ran all test suites matching /src\\__tests__\\native\\color-scheme-set-reaches-appearance.test.tsx/i.

#415 hands the request to Appearance.setColorScheme(), which holds it on the platform, and the class layer follows the scheme Appearance then reports:

import { colorScheme } from "react-native-css";

colorScheme.set("dark"); // asks Appearance; every reader moves when the platform applies it
colorScheme.set(null); // follows the system again
colorScheme.get(); // the scheme the platform reports

Two things change for an app that calls set():

  • colorScheme.get() and prefers-color-scheme keep the scheme the platform last reported until it applies the request, instead of answering the request at once.
  • Where React Native reports no scheme it applies, as for an Android activity that does not handle uiMode itself, the class layer keeps the previous scheme, as useColorScheme() does.

Without an Appearance native module, as in a jest suite, set() keeps the scheme in this library, as on main.

Is handing the scheme to Appearance the direction you want, or would you rather keep set() local?

主要语言
TypeScript
星标
166
派生
45
平均合并
13 天 14 小时
30 天内合并 PR
1

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

nativewind/react-native-css 的其他 Issue

查看 nativewind/react-native-css 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。