Styles

Most applications have a common set of branding e.g. colours, fonts, and tinting common controls. Prism provides support for this with styles.

Styles enable you to declare reusable values for any attribute within a layout. You can also declare application-wide styles that affect the overall styling of your application.

All of the styles within your application are contained within a styles.xml file. Prism supports platform-specific files just like with layouts, e.g. on iOS it will look for the most specific styles file styles-ios.xml first.

Declaring styles

An example of a basic styles file is as follows:

<style>
  <home-screen>
    <background-color>#000000</background-color>
  </home-screen>
</style>

As you can see with the above example, we have one style we can use: home-screen. We can apply this style in our layout like so:

<layout>
  <view id="homeScreenBackground" style="homeScreen" />
</layout>

Style names are automatically converted from hyphen-case to camelCase.

We can also nest styles and mix properties with nested styles:

<style>
  <home-screen>
    <background-color>#000000</background-color>
    <posts>
      <item-layout>post-list-item</item-layout>
    </posts>
  </home-screen>
</style>

We can apply these styles in our layout like so:

<layout>
  <view id="homeScreenBackground" style="homeScreen">
    <list style="homeScreen.posts" />
  </view>
</layout>

Application styles

Each platform provides its own concepts of tinting/branding system controls:

  • macOS: dynamically tints system controls based on the user-configured light/dark mode setting and tint colour setting
  • iOS: provides the ability to tint system controls, set the background colour of navigation bar and tab bar, and configure whether the status bar text is light or dark
  • Android: provides the ability to tint system controls and set the background colour of the status bar and navigation bar

As observed this isn’t consistent per-platform. Prism approaches this by allowing you to declare application-level colours to be applied to system elements outside of the scope of your layouts. For example:

<style>
  <application>
    <primary-color>#FF0000</primary-colour>
  </application>
</style>

The application style supports declaring the following properties:

  • primary-color: Used on iOS and Android for navigation bar and tab bar background colours, and on iOS for the status bar background colour
  • secondary-color: Used on Android for the status bar background colour (Android apps typically have a slightly darker status bar background than the navigation bar background)
  • accent-color: Used on iOS and Android for the text colour used on tinted system controls, and the text on navigation bars and tab bars
  • navigation-style: Accepts either ‘light’ or ‘dark’ as values, used on iOS to set the text colour of the status bar

Summing up

In this guide we’ve learnt how to declare styles in Prism to apply common branding across your application. In the next guide, we’ll run through how to build a more complex application.