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

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.

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?