Skip to main content

Themes

Apply Place Theme on components​

Our current UI allows different businesses to have a custom theme.
The Business's theme is set by the engine and managed in uilib.

Each theme is determined by the businessId prop you pass when pushing a screen/modal.

Different Context Theme​

As mentioned, the theme is derived from the businessId passed in passProps when pushing a screen/modal. For example

Navigation.push({
  ...
  passProps: {
    businessId: '<place-business-id>'
  }
})

In some cases when you want to ignore the business theme logic in a screen, you can pass the ignoreTheme prop in passProps

Navigation.push({
  ...
  passProps: {
    businessId: '<place-business-id>',
    ignoreTheme: true
  }
})

ThemeView​

In very rare cases, you would want to have a different theme for a specific area.
In this case you would have to wrap the relevant area with the ThemeView component and pass it the themeId prop. The themeId represents the businessId.

<View flex>
  <ThemeView themeId={'business10'}>
    <Button /> // will receive business10 theme
  </ThemeView>

  <Button /> // will receive the business's theme in the current screen context
</View>
info

Note: When using asWixScreen your screen is automatically wrapped with ThemeView and use the businessId from passedProps as themeId for the ThemeView.

ThemeManager​

In order to control common components behavior through the app we're using the ThemeManager (from public uilib).
It provides us a way to globally set the components defaults so for instance if we want to have default color for all our buttons, we can set the backgroundColor once, like this

ThemeManager.setComponentTheme('Button', {
  backgroundColor: Colors.$backgroundPrimaryHeavy
});

This will use our primary color as a default color to all of our Buttons.
See our One App configuration here.