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 摘要。