---
title: Theme Provider
sidebar_position: 1
---

The previous solution works great for only one component, but imagine having to
do this for every component you want custom styles for. That could get a bit
tedious to manage. Thankfully, there's a better way to do this. React Native
Elements ships with a 3 utilities for large-scale theming.

Firstly you'll want to set up your `ThemeProvider`.

```jsx
import { ThemeProvider, Button, createTheme } from '@rneui/themed';

const theme = createTheme({
  components: {
    Button: {
      raised: true,
    },
  },
});

// Your App
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button title="My Button" />
      <Button title="My 2nd Button" />
    </ThemeProvider>
  );
};
```

The example above achieves the same goals as the first example — apply the same
styles to multiple instances of `Button` in the app. However this example
applies the `raised` prop to every instance of `Button` inside the component
tree under `ThemeProvider`. Both of these buttons will have the `raised` prop
set to true.

This is extremely convenient and is made possible through
[React's Context API](https://reactjs.org/docs/context.html).

---

### use-theme hook

Hook returns `theme`, `updateTheme` & `replaceTheme` from ThemeProvider context or default theme if you did not wrap application with ThemeProvider.

```tsx
import { useTheme } from '@rneui/themed';

function Demo() {
  const { theme } = useTheme();
  return <View style={{ background: theme.colors.primary }} />;
}
```

---

### use-theme-mode hook

You can get current theme mode (light or dark) and update it using setMode function from useThemeMode hook.

```tsx
import { useThemeMode } from '@rneui/themed';

function Demo() {
  const { mode, setMode } = useThemeMode();

  return <Button onPress={() => setMode('dark')} title={mode} />;
}
```
