Repository: expo/expo
File: packages/expo-router/src/color/index.ts (TypeScript)

Code before:
    get dynamic() {
      return androidDynamicColor;
    },
  } as ColorType['android'],
  {
    get(target, prop: string) {
      if (prop in target) {
        return target[prop];
      }
      return PlatformColor('@android:color/' + prop);
    },
  }
);

/**
 * Color utility to access platform-specific colors easily.
 *
 * On **Android**, it provides access to:
 * - System colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.background`.
 * - Attribute colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.attr.colorPrimary`.
 * - [Material Design 3 static colors](https://m3.material.io/styles/color/static/baseline). For example, `Color.android.material.primary`.
 * - [Material Design 3 dynamic colors](https://m3.material.io/styles/color/dynamic/user-generated-source). For example, `Color.android.dynamic.primary`.
 *
 * On **iOS**, it is a type-safe wrapper over `PlatformColor`, providing access to system colors. For example, `Color.ios.label`.
 *
 * **Note**: To ensure the colors align with the system theme on Android, make sure they are used within a component that responds to theme changes, such as by using the `useColorScheme` hook from React Native.
 *
 * @example
 * ```tsx
 * import { Color } from 'expo-router';
 *
 * Color.ios.label; // Access iOS system color
 * Color.android.background; // Access Android system color
 * Color.android.attr.colorPrimary; // Access Android attribute color
 * Color.android.material.primary; // Access Android Material Design 3 static color
 * Color.android.dynamic.primary; // Access Android Material Design 3 dynamic color
 * ```
 *
 * @example
 * ```tsx
 * import { Color } from 'expo-router';
 * import { View, Text, useColorScheme } from 'react-native';
 *
 * export default function MyComponent() {
 *   useColorScheme(); // Ensure the app responds to system theme changes
 *   return (
 *     <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
 *       <Text style={{ color: Color.android.dynamic.onPrimary }}>
 *         Hello, World!
 *       </Text>
 *     </View>

Review comment (suggestion):
```suggestion
 * > **Note**: To ensure the colors align with the system theme on Android, make sure they are used within a component that responds to theme changes, such as by using the `useColorScheme` hook from React Native.
```

Let's use a callout here.

Code after:
    get dynamic() {
      return androidDynamicColor;
    },
  } as ColorType['android'],
  {
    get(target, prop: string) {
      if (prop in target) {
        return target[prop];
      }
      return PlatformColor('@android:color/' + prop);
    },
  }
);

/**
 * Color utility to access platform-specific colors easily.
 *
 * On **Android**, it provides access to:
 * - System colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.background`.
 * - Attribute colors, as a type-safe wrapper over `PlatformColor`. For example, `Color.android.attr.colorPrimary`.
 * - [Material Design 3 static colors](https://m3.material.io/styles/color/static/baseline). For example, `Color.android.material.primary`.
 * - [Material Design 3 dynamic colors](https://m3.material.io/styles/color/dynamic/user-generated-source). For example, `Color.android.dynamic.primary`.
 *
 * On **iOS**, it is a type-safe wrapper over `PlatformColor`, providing access to system colors. For example, `Color.ios.label`.
 *
 * > **Note**: To ensure the colors align with the system theme on Android, make sure they are used within a component that responds to theme changes, such as by using the `useColorScheme` hook from React Native.
 *
 * @example
 * ```tsx
 * import { Color } from 'expo-router';
 *
 * Color.ios.label; // Access iOS system color
 * Color.android.background; // Access Android system color
 * Color.android.attr.colorPrimary; // Access Android attribute color
 * Color.android.material.primary; // Access Android Material Design 3 static color
 * Color.android.dynamic.primary; // Access Android Material Design 3 dynamic color
 * ```
 *
 * @example
 * ```tsx
 * import { Color } from 'expo-router';
 * import { View, Text, useColorScheme } from 'react-native';
 *
 * export default function MyComponent() {
 *   useColorScheme(); // Ensure the app responds to system theme changes
 *   return (
 *     <View style={{ flex: 1, backgroundColor: Color.android.dynamic.primary }}>
 *       <Text style={{ color: Color.android.dynamic.onPrimary }}>
 *         Hello, World!
 *       </Text>
 *     </View>