Theme synced with system colors (Material you - MD3)

Is your feature request related to a problem? Please describe. Since v5 is aiming at implementing material design 3, it would be cool if the theme would follow the system’s colors (or at least have it be an option).

I’m sure that this has been thought about, but haven’t seen any discussion in the repo.

Describe the solution you’d like For android, have an option in the theming or in the provider to have the colors match the system colors.

Describe alternatives you’ve considered I’ve tried in my emulator and it’s working with the PlatformColor (https://reactnative.dev/docs/platformcolor) and by providing the corresponding strings, such as @android:color/system_accent2_600, they’re documented here https://developer.android.com/reference/android/R.color#system_accent1_0 and it seems like MD3 also document the platform color strings here https://m3.material.io/libraries/mdc-android/color-theming

Just as a note, this is what is returned from the PlatformColor API function call, for example with PlatformColor("@android:color/system_accent1_300")

{
  "resource_paths": [
    "@android:color/system_accent1_300"
  ]
}

Additional context Here’s an example of it being semi hooked into the system’s colors (let me know if you’d like to see some code, but basically what I’ve done is use PlatformColor for the backgroundColor and color style keys within the components):

https://user-images.githubusercontent.com/22248828/184519843-537df8b6-03ac-4edc-987d-943d2071f89f.mov

One of the problem I can see with this is that PlatformColor does not return the color itself, but rather just converts it to an object, meaning that it does not seem currently possible with that API to get the HEX or the color itself from the JS side.

Version

react-native: 0.69.3
react-native-paper: 5.0.0-rc.4
react-native-vector-icons: 9.2.0

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.69.3, latest: 0.69.4)
• react-native-paper (found: 5.0.0-rc.4, latest: 4.12.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Couldn’t find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.