Skip to content

Commit 08d1764

Browse files
ismarbesicmeta-codesync[bot]
authored andcommitted
fix: color scheme in appearance state after setting it to unspecified (#54993)
Summary: Fixed the value of the color scheme in the appearance state after setting it to unspecified when state updates. The issue is described here #54959. This is a regression from #53397 and should be reproducible from 0.82 and higher. The `useColorScheme()` hook will return "unspecified" when you change the appearance from system color (dark or light) to system which breaks many apps using the value to determine whether to use dark/light mode colors. ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [GENERAL] [FIXED] - Fix color scheme in appearance state after setting it to unspecified Pull Request resolved: #54993 Test Plan: 1. Run the reproducer app in the issue - use dark mode when launching the app, press "change to dark" and then "change to system". The hook will return "unspecified" although the correct behavior should be dark. 2. Apply the changes in this PR. 3. The correct behavior should be seen. Reviewed By: cipolleschi Differential Revision: D92391594 Pulled By: cortinico fbshipit-source-id: 3c0c471069f2eb4681bd53abf67957bcaa04e7b4
1 parent d494510 commit 08d1764

File tree

1 file changed

+6
-1
lines changed

1 file changed

+6
-1
lines changed

packages/react-native/Libraries/Utilities/Appearance.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,12 @@ export function setColorScheme(colorScheme: ColorSchemeName): void {
9999
if (NativeAppearance != null) {
100100
NativeAppearance.setColorScheme(colorScheme);
101101
state.appearance = {
102-
colorScheme,
102+
// When setting to 'unspecified', get the actual system color scheme.
103+
// Fall back to the passed value if getColorScheme() returns null.
104+
colorScheme:
105+
colorScheme === 'unspecified'
106+
? (NativeAppearance.getColorScheme() ?? colorScheme)
107+
: colorScheme,
103108
};
104109
}
105110
}

0 commit comments

Comments
 (0)