Skip to main content
Version: 28.1.4 🚧

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. Force close 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 Element Map​

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

Home Tab​

Play Tab​

Deposit Tab​

Match Screen​

Theme Element Legend​

Core Colors​

  1. Background Gradient
  2. Main Color
  3. Main Color with Main Color Opacity
  4. Main Divider Color
  5. Secondary Color
  6. Secondary Color with Secondary Color Opacity
  7. Secondary Divider Color
  8. Tertiary Color
  9. Cell Background Color
  10. Profile Picture Background Color

Accent Colors​

  1. Highlight
  2. Tab Highlight
  3. Taunt Highlight Color
  4. Overlay Entry Container Gradient
  5. Progress Bar Color
  6. Gift Box Highlight Colore
  7. Side Menu Highlight Color
  8. Selected Cell Background Color
  9. Featured Match Bar Color

Buttons​

  1. Main Button Color
  2. Secondary Button Color
  3. Tertiary Button Color
  4. Store Button Color
  5. Play Button Color

Text​

  1. Main Text Color
  2. Secondary Text Color
  3. Tertiary Text Color
  4. Link Text Color
  5. Main Button Text Color
  6. Secondary Button Text Color
  7. Tertiary Button Text Color
  8. Side Menu Text Color

Artwork​

  1. Background Image
  2. Cash Prize Image
  3. Cash Prize Background Color
  4. Virtual Prize Image
  5. Virtual Prize Background Color
  6. Ticketz Prize Image
  7. Event Prize Image
  8. Event Prize Background Color
  9. Bracketed Cash Prize Image
  10. Bracket Cash Prize Background Color
  11. Bracketed Virtual Prize Image
  12. Bracket Virtual Prize Background Color
  13. Bracketed Event Prize Image
  14. Bracket Event Prize Background Color

Advanced​

  1. Cell Alternate Background Color
  2. Opacity None
  3. Player Activity Indicator Color
  4. Status Bar View Background Color
  5. Highlight Turn Based Win Color
  6. Text Color Four
  7. Text Color Error
  8. Text Color Cash
  9. Text Color Z
  10. Text Color Ticketz
  11. Text Color Medals
  12. Text Color Deposit Tile
  13. Text Ticketz Gradient
  14. Text Cash Gradient
  15. Text Z Gradient
  16. Side Panel Blur Style
  17. Status Bar Content Style
  18. View Corner Radius Primary
  19. View Corner Radius Secondary
  20. View Corner Radius Tertiary
  21. View Border Width Primary
  22. View Border Width Secondary
  23. View Border Width Tertiary
  24. Check Mark Color
  25. Cash Icon Gradient
  26. Practice Currency Icon Gradient
  27. Points Prize Gradient
  28. Practice Currency String
  29. Practice Currency Simple Icon URI
  30. Practice Currency Full Icon Large URI
  31. Real Time Match Icon

Others​

  1. Developer Console Main Game Icon

Theme Creation Notes​

  • Color fields will accept all standard HTML color formats including hexadecimal, 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.