Open widianapw opened 2 years ago
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.
@yamankatby , could you please explain what is the meaning of main
and on
properties in palette
, and when do we use each of them?
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
.
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?
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
<Provider
theme={{
...defaultTheme,
palette: {
...defaultTheme.palette,
primary: {main: "red", on: "yellow"}
}
}}
>
![1662482504010](https://user-images.githubusercontent.com/76730458/188693886-3ed04ce5-e333-416a-9493-6aa1bcc0d3ac.JPEG =250x250)
Capability to set the theme for the whole application