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.

   

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

   

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

3. Click Save. This will deploy the theme immediately to sandbox for testing.
4. Force close the running game. Upon cold start, the new theme elements will be retrieved and displayed.
5. 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

11. Highlight
12. Tab Highlight
13. Taunt Highlight Color
14. Overlay Entry Container Gradient
15. Progress Bar Color
16. Gift Box Highlight Color
17. Side Menu Highlight Color
18. Selected Cell Background Color
19. Featured Match Bar Color

Buttons

20. Main Button Color
21. Secondary Button Color
22. Tertiary Button Color
23. Store Button Color
24. Play Button Color

Text

25. Main Text Color
26. Secondary Text Color
27. Tertiary Text Color
28. Link Text Color
29. Main Button Text Color
30. Secondary Button Text Color
31. Tertiary Button Text Color
32. Side Menu Text Color

Artwork

33. Background Image
34. Cash Prize Image
35. Cash Prize Background Color
36. Virtual Prize Image
37. Virtual Prize Background Color
38. Ticketz Prize Image
39. Event Prize Image
40. Event Prize Background Color
41. Bracketed Cash Prize Image
42. Bracket Cash Prize Background Color
43. Bracketed Virtual Prize Image
44. Bracket Virtual Prize Background Color
45. Bracketed Event Prize Image
46. Bracket Event Prize Background Color

Advanced

47. Cell Alternate Background Color
48. Opacity None
49. Player Activity Indicator Color
50. Status Bar View Background Color
51. Highlight Turn Based Win Color
52. Text Color Four
53. Text Color Error
54. Text Color Cash
55. Text Color Z
56. Text Color Ticketz
57. Text Color Medals
58. Text Color Deposit Tile
59. Text Ticketz Gradient
60. Text Cash Gradient
61. Text Z Gradient
62. Side Panel Blur Style
63. Status Bar Content Style
64. View Corner Radius Primary
65. View Corner Radius Secondary
66. View Corner Radius Tertiary
67. View Border Width Primary
68. View Border Width Secondary
69. View Border Width Tertiary
70. Check Mark Color
71. Cash Icon Gradient
72. Practice Currency Icon Gradient
73. Points Prize Gradient
74. Practice Currency String
75. Practice Currency Simple Icon URI
76. Practice Currency Full Icon Large URI
77. Real Time Match Icon

Others

100. 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.

Unity

Themes cannot be installed directly from your Unity project.

iOS

When building your Unity iOS game, Unity will automatically generate an Xcode project for you. Using the generated Xcode project, follow the instructions on the iOS tab on this page.

Android

When building your project select Export Project. Using the generated Android Studio project, follow the instructions on the Android tab on this page.

iOS

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

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

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

5. 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.

Android

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 Android under Download your theme. Download the custom-theme.json file without renaming it.
2. Create an assets folder in Android Studio if your project does not already have one.

3. Press the FINISH button on the subsequent dialog that appears.

4. Select the assets folder you just created in your project’s Android view, and right-click it to bring up a contextual menu.

5. Choose Reveal in Finder (or Reveal in Explorer on Windows). This will open the corresponding assets folder on your local disk.
6. Locate the custom_theme.json file that was downloaded and drag it into the assets folder on your local disk.

7. Confirm that the custom_theme.json file has now been added to your Android Studio project.

8. Update AndroidManifest.xml to have skillz_production set to false. Build and test the app within sandbox. Set skillz_production to true if building for release.