Skip to main content

Custom Themes

You can customize the look of the Skillz UI using our "Custom Theme" feature so that it feels native to your game. Although we recommend customizing your theme, it is not mandatory, and you may opt to stick with the default or one of the several 'out-of-box' theme templates.

Installation of the custom theme or of any updated theme assets occurs during every Skillz UI load event, automatically. The Skillz UI will always reflect the latest theme and theme assets. This enables developers to make incremental or complete theme modifications without requiring app updates.

You can access the theme editor by selecting your game in the Skillz Developer Console. Click Optimize -> Theme to enter the theme customization screen.

Create a Custom Theme#

  1. Select a base theme then expand the Create a custom theme to better match your game section.

    enable-custom-theme
  2. The Skillz UI elements are broken down into expandable categories. Expand and edit the desired elements.

    categoriescategory_expanded

If an element is not customized, it will retain its base theme attributes.

  1. Click Save. This will deploy the theme immediately to sandbox for testing.
  2. Kill the running game. Upon cold start, the new theme elements will be retrieved and displayed.
  3. When the theme is ready for production, click the Sync button to request the theme be deployed to production. This will notify the Skillz team and you will be contacted once the theme has been deployed. If there are any questions about the process, contact your Skillz account manager or Support.

Theme Attribute Mappings#

The following images illustrate what each theme attribute maps to in the Skillz UI:

Theme Creation Notes#

  • Color fields will accept all standard HTML color formats including hexidecimal, RGB, RGBA, HSL, and HSLA. Example (these all produce the same color):
    • #ff6347
    • rgb(255, 99, 71)
    • rgba(255, 99, 71, 1.0)
    • hsl(9, 100%, 64%)
    • hsla(9, 100%, 64%, 1.0)
  • Elements with gradients have two or more values to populate and will produce linear color transitions between the colors.
  • All color choices and uploaded images are previewed on the page for convenience, including gradient choices.
  • Upon clicking Save, cold-start game and enter Skillz UI on test devices to view the latest sandbox changes.

Install Custom Theme (optional)#

By default, the Skillz UI will display a default background during the first time load animation. It will immediately begin to use the theme assets when loading is complete and will also update the load screen background asset on next load.

If there is a desire for a custom background image to be displayed during the first-time Skillz UI load, then follow these instructions to install the theme prior to building the app.

  1. After creating and saving your theme, the page will list platform-specific downloads in the Download your theme section. Locate the download link for iOS under Download your theme. Download the theme.json file without renaming it.
  2. Open your game’s XCode project and find the file Skillz.framework

  1. Right-click and select option "Show in Finder."

  1. Locate the the existing theme.json file within the folder and replace it with the file theme.json that you’ve just downloaded

  1. Update the app's call to initWithGameId to have withEnvironment:SkillzSandbox to build and test the app within Sandbox. Flip back to withEnvironment:SkillzProduction if building for release.

NOTE#

Updating the Skillz SDK will overwrite the version of Skillz.framework. When upgrading the SDK, remember to replace theme.json again if using a custom theme.