Theme synced with system colors (Material you - MD3)

[BenJeau]

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]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[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.

[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?

[BenJeau]

Here's a snack, the only thing is that it needs to run Android 12 (SDK 32) or higher (and Expo's snack android emulator has SDK 31 and my personal device has SDK 30, so I can test it other than my emulator).

https://snack.expo.dev/@benjeau/react-native-paper-material-you-system-colors

[BenJeau]

Looking at how flutter handles this, they get all the colors from the native android side https://github.com/material-foundation/material-dynamic-color-flutter/blob/main/android/src/main/kotlin/io/material/plugins/dynamic_color/DynamicColorPlugin.kt

And looking deeper, it seems like they are getting the accent color from the other platform and creating a color palette accordingly https://github.com/material-foundation/material-dynamic-color-flutter/blob/20963478e27ad7d17df31462bdfb864747d7ecf6/lib/src/dynamic_color_plugin.dart#L33-L48

[gaodeng]

any news?

[lukewalczak]

Hey @BenJeau @gaodeng, I didn't investigate that area, but we are open for contributions and PRs are welcomed.

[BenJeau]

I'm unsure if I'll have time to work on this, but I remember two possible options for this implementation:

1. Use PlatformColor, but this does not return a color (Hex, RGB, or string), just something like the following:

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

2. Have some native code pulling the raw values and then using them to create a theme for react-native-paper

Which one sounds better to have? Option 1 is easier to implement, but users won't be able to use the theme's colors to get their Hex/RGB. Option 2 is harder to implement as it involves native code and either using turbo modules (which I have not experience with) or the Kotlin/Java bridge code (which I've played with before).

[ramarivera]

Following the idea of the flutter plugin, using a native module:

{"neutral_1": [-16777216, -14738666, -13357014, -11909568, -10265257, -8686226, -6909816, -5133661, -3291715, -1383975, -462617, -1032, -1], "neutral_2": [-16777216, -14607600, -13160668, -11712967, -10068656, -8489626, -6647936, -4871783, -3029580, -1187377, -200740, -1032, -1], "primary": [-16777216, -14214912, -12440320, -10599936, -8824564, -7048923, -5141699, -3168940, -1261459, -8545, -4140, -1032, -1], "secondary": [-16777216, -14345724, -12898539, -11320022, -9610177, -8031147, -6189458, -4347513, -2505568, -597829, -4140, -1032, -1], "tertiary": [-16777216, -14345724, -12898539, -11320022, -9610177, -8031147, -6189458, -4347513, -2505568, -597829, -4140, -1032, -1]}

~Altho I am not sure how to proceed with those values 😓 Any pointer?~

EDIT: Nevermind, I could get the colors, I got something like this

{
  "neutral_1": [
    "ff000000",
    "ff211a1b",
    "ff352f2f",
    "ff4c4545",
    "ff655c5d",
    "ff7d7474",
    "ff998e8f",
    "ffb3a9a9",
    "ffcfc4c4",
    "ffece0e0",
    "fffaeeee",
    "fffffbfa",
    "ffffffff"
  ],
  "neutral_2": [
    "ff000000",
    "ff24191a",
    "ff3a2d2f",
    "ff524345",
    "ff6b5a5c",
    "ff837273",
    "ff9f8c8e",
    "ffbaa6a8",
    "ffd6c2c3",
    "fff4dddf",
    "ffffecee",
    "fffffbfa",
    "ffffffff"
  ],
  "primary": [
    "ff000000",
    "ff3a0715",
    "ff561d29",
    "ff71333f",
    "ff8e4a56",
    "ffaa616d",
    "ffc97a88",
    "ffe794a1",
    "ffffb1bf",
    "ffffd9df",
    "ffffedef",
    "fffffbfa",
    "ffffffff"
  ],
  "secondary": [
    "ff000000",
    "ff2c1519",
    "ff43292e",
    "ff5c3f44",
    "ff75565b",
    "ff8f6d72",
    "ffab888c",
    "ffc7a2a6",
    "ffe5bdc1",
    "ffffdade",
    "ffffedef",
    "fffffbfa",
    "ffffffff"
  ],
  "tertiary": [
    "ff000000",
    "ff2c1519",
    "ff43292e",
    "ff5c3f44",
    "ff75565b",
    "ff8f6d72",
    "ffab888c",
    "ffc7a2a6",
    "ffe5bdc1",
    "ffffdade",
    "ffffedef",
    "fffffbfa",
    "ffffffff"
  ]
}

[lukewalczak]

Hey @ramarivera, react-native-paper is a JS library and will rather stay that way, however, will you be able to share your flutter plugin which let you get those colors? Maybe in the future, we can release a supplement library/module for the syncing Paper theme with system colors 🤔

[FelipeEmos]

Hello, folks, :) the generation of the Pallete already exists in Typescript in the official lib material-color-utilities https://github.com/material-foundation/material-color-utilities/tree/main/typescript

Here's the stack overflow post I've got this information from.

You should also check out this react-native-material-you library that probably does what you need, @BenJeau It claims to get the system ColorPallete for Android 12 phones and allows you to set up a fallback pallete for when that's not the case.

[ramarivera]

Hey @ramarivera, react-native-paper is a JS library and will rather stay that way, however, will you be able to share your flutter plugin which let you get those colors? Maybe in the future, we can release a supplement library/module for the syncing Paper theme with system colors 🤔

Hey @lukewalczak , I completely understand. Sorry for the delay, I seemed to have missed the original message you tagged me in. Here is a gist with the main part of the code to read the colors I mentioned earlier https://gist.github.com/ramarivera/07676d26a57b5240eb08b3da5fe460fa

[lukewalczak]

Hey @FelipeEmos, thanks for your input!

Currently, we are using the official material-color-utilities in our tool for generating a custom theme based on the source color, on the Paper's documentation in the Create dynamic theme colors section

You should also check out this react-native-material-you library that probably does what you need, @BenJeau It claims to get the system ColorPallete for Android 12 phones and allows you to set up a fallback pallete for when that's not the case.

Definitely, I will check that library. Maybe then we can write some adapter which will adjust the theme output from that package to the Paper's theme.

[FelipeEmos]

Oh, I wasn't aware of this theme generation tool in the docs, that's cool! @lukewalczak , what are your thoughts on moving this feature to be a part of the react-native-paper API? It would just require moving createDynamicColorTheme to the API and making it more Typescript friendly (to return a theme type)

That would make sense. Theme generation would be available in both the docs and the API. If someone wants to create an App that has a custom theme feature (like Slack, for example), that would come in handy... it would allow the user to dynamically change certain workspace collors

If I'm not mistaken, the current theme generation only works in a static way, you have to go to the docs to generate your theme

[pchmn]

I created an expo module in my app for this purpose. I just published it as a library, maybe it could be useful for some people: https://github.com/pchmn/expo-material3-theme

It retrieves system material 3 theme from Android 12+ devices, or a fallback theme if not supported. You can also generate custom theme based on a source color. And it's compatible with react-native-paper

[lukewalczak]

Hey @pchmn, would you like to create a PR extending docs in the following way:

• add the library to the Recommended Libraries: https://callstack.github.io/react-native-paper/docs/guides/recommended-libraries
• add a point in the Theming -> Create dynamic theme colors e.g. Sync dynamic colors with system colors section and explain what is the goal and how to use your library

wdyt?

[pchmn]

@lukewalczak yes it seems good, I will create the PR!

[pchmn]

@lukewalczak, I just created the PR