fix:types for appearence

packages/react-native/Libraries/Utilities/Appearance.d.ts

@@ -9,7 +9,7 @@
 
 import {NativeEventSubscription} from '../EventEmitter/RCTNativeAppEventEmitter';
 
-type ColorSchemeName = 'light' | 'dark' | 'unspecified';
+type ColorSchemeName = 'light' | 'dark' | null;
 
 export namespace Appearance {
   type AppearancePreferences = {

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

@@ -93,7 +93,7 @@ export function getColorScheme(): ?ColorSchemeName {
 /**
  * Updates the current color scheme to the supplied value.
  */
-export function setColorScheme(colorScheme: ColorSchemeName): void {
+export function setColorScheme(colorScheme: ?ColorSchemeName): void {
   const state = getState();
   const {NativeAppearance} = state;
   if (NativeAppearance != null) {

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<bffba0612c645ddb6166e1f5bb1187f2>>
+ * @generated SignedSource<<e1d8bafd4d8fad8be7d3fed268de55b8>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -1865,7 +1865,7 @@ declare namespace CodegenTypes {
   }
 }
 declare type ColorListenerCallback = (value: ColorValue) => unknown
-declare type ColorSchemeName = "dark" | "light" | "unspecified"
+declare type ColorSchemeName = "dark" | "light"
 declare type ColorValue = ____ColorValue_Internal
 declare type ComponentProvider = () => React.ComponentType<any>
 declare type ComponentProviderInstrumentationHook = (
@@ -4638,7 +4638,9 @@ declare type Separators = {
   updateProps: (select: "leading" | "trailing", newProps: Object) => void
 }
 declare type sequence = typeof sequence
-declare function setColorScheme(colorScheme: ColorSchemeName): void
+declare function setColorScheme(
+  colorScheme: ColorSchemeName | null | undefined,
+): void
 declare function setComponentProviderInstrumentationHook(
   hook: ComponentProviderInstrumentationHook,
 ): void
@@ -5975,7 +5977,7 @@ export {
   AppState, // 12012be5
   AppStateEvent, // 80f034c3
   AppStateStatus, // 447e5ef2
-  Appearance, // 00cbaa0a
+  Appearance, // bec62fb7
   AutoCapitalize, // c0e857a0
   BackHandler, // 0b13c289
   BackPressEventName, // 4620fb76
@@ -5985,7 +5987,7 @@ export {
   ButtonProps, // 3c081e75
   Clipboard, // 41addb89
   CodegenTypes, // 030a94b8
-  ColorSchemeName, // 31a4350e
+  ColorSchemeName, // 6615edd6
   ColorValue, // 98989a8f
   ComponentProvider, // b5c60ddd
   ComponentProviderInstrumentationHook, // 9f640048
@@ -6237,7 +6239,7 @@ export {
   registerCallableModule, // 839c8cfe
   requireNativeComponent, // 72c09c3d
   useAnimatedValue, // b18adb63
-  useColorScheme, // c216d6f7
+  useColorScheme, // 29a517d5
   usePressability, // fe1f27d8
   useWindowDimensions, // bb4b683f
 }

packages/react-native/src/private/specs_DEPRECATED/modules/NativeAppearance.js

@@ -12,15 +12,15 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
-export type ColorSchemeName = 'light' | 'dark' | 'unspecified';
+export type ColorSchemeName = 'light' | 'dark';
 
 export type AppearancePreferences = {
   colorScheme?: ?ColorSchemeName,
 };
 
 export interface Spec extends TurboModule {
   +getColorScheme: () => ?ColorSchemeName;
-  +setColorScheme: (colorScheme: ColorSchemeName) => void;
+  +setColorScheme: (colorScheme: ?ColorSchemeName) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

packages/rn-tester/js/examples/Appearance/AppearanceExample.js

@@ -136,7 +136,7 @@ const ColorShowcase = (props: {themeName: string}) => (
 
 const ToggleNativeAppearance = () => {
   const [nativeColorScheme, setNativeColorScheme] =
-    useState<ColorSchemeName>('unspecified');
+    useState<?ColorSchemeName>(null);
   const colorScheme = useColorScheme();
 
   useEffect(() => {
@@ -155,10 +155,7 @@ const ToggleNativeAppearance = () => {
         title="Set to dark"
         onPress={() => setNativeColorScheme('dark')}
       />
-      <Button
-        title="Unset"
-        onPress={() => setNativeColorScheme('unspecified')}
-      />
+      <Button title="Unset" onPress={() => setNativeColorScheme(null)} />
     </View>
   );
 };