Theming

[widianapw]

Capability to set the theme for the whole application

[yamankatby]

Hi Widiana,
Thank you for reporting this issue. Indeed this is not a feature request since there is already a way to do this. It just needs to be added to the documentation.

You have to wrap your app in the Provider component:

import { Provider, defaultTheme } from "@react-native-material/core";

const App = () => (
  <Provider
    theme={{
      // extend the default theme
      ...defaultTheme,
      palette: {
        ...defaultTheme.palette,
        // override the primary color
        primary: { main: "red", on: "white" },
      },
    }}
  >
    ...
  </Provider>
);

export default App;

If you have time and you would like to help please make a PR to the documentation repo and add Theming page.

[Pika-Pool]

@yamankatby , could you please explain what is the meaning of main and on properties in palette, and when do we use each of them?

[yamankatby]

Hi @Pika-Pool,

The main and on terms are defined by Material design 2, see https://material.io/design/color/the-color-system.html#color-theme-creation.

Simply the main is the color itself and the on is the color to be used on top of the color

.

[Drealler]

Hi, I tried this solution and got this error in typescript.
Looks like the children is missing in the type definition.

Edit:
Is npm version outdated?

[Iryn-e]

Hi, I tried this solution and got this error in typescript. Looks like the children is missing in the type definition.

Edit: Is npm version outdated?

I'm having the same issue when using typescript as the base of the application when it comes to wrapping my entire app with (As in I see the same error message as @Drealler here). However while I am able to change the color of the appbar, I don't think there is a way of easily changing the background color of list items, manually or otherwise.
Here is what I get on an appbar and a list of items with the provider as:

        <Provider
            theme={{
                ...defaultTheme,
                palette: {
                    ...defaultTheme.palette,
                    primary: {main: "red", on: "yellow"}

                }
            }}
        >