react-native-navigation/website/docs/style-theme.mdx

---
id: style-theme
title: Themes
sidebar_label: Themes
---

A theme is a type of style which is applied to the entire app. It allows you to declare
a consistent style to all Navigation components such as the TopBar and BottomTabs and also
to system elements like the StatusBar and NavigationBar.

## Applying a theme
Themes are applied using `Navigation.setDefaultOptions()` which must be called **before** `Navigation.setRoot()` is called.

```js
// Set the default topBar background color to red
Navigation.setDefaultOptions({
  topBar: {
    background: {
      color: 'red'
    }
  }
});

// That stack's topBar background color will be red, as is set in default options
Navigation.setRoot({
  root: {
    stack: {
      children: [
        ...
      ]
    }
  }
});
```

## Changing theme dynamically
Apps can have multiple themes and sometimes you might need to change theme dynamically. To change current theme, simply call `Navigation.setDefaultOptions()` with updated theme options, following that with a call to `Navigation.setRoot()`. The reason we need to setRoot once more is because `Navigation.setDefaultOptions()` does not apply options to screens which had already been created.