The ChocolateChip-UI Theme Roller is for desktop use. Please access this on a desktop, or if you are on a desktop, please expand the width of your browser so the Theme Roller can fit.

This theme roller allows you to add color to your app in several ways. The default is to add color to the text. This mostly affects navigation bar titles and button text. Secondly, you can choose to colorize the navigation bars and toolbars. This also affects the text and buttons in these. The theme roller has sophisticated algorithms that check the saturation and brightness of the background color of the navigation bars and toolbars. If the color is deemed too dark for legibility, the theme roller automatically adjusts the color of text in buttons, etc. so that they are legible on the chosen color.

You can choose a color from the color swatches, or grab the dot on the color picker and pull it around to get the shade you want, or grab the handle on the hue slider to change the hue of the picker.

You can also choose a secondary color by clicking the check box with the label: "Choose an Optional, Secondary Color". This will show a secondar color picker which you can use to colorize minor elements in the UI. After choosing a secondary color, if you prefer to go back to a single color, just deselect the checkbox. Everything will switch back to using the primary color.

You can choose which OS you want to see. While you're choosing your colors, the other OSes are automatically having they're styles updated, so when you switch between iOS, Android and Windows, the UI shows your color choices.

As you make your color choices, the theme roller outputs the resulting stylesheet in the textarea below the color pickers. Just click and select all the text, copy and paste it into the corresponding stylesheet for that OS's theme. Reload your app and you will see your new color scheme in action.

Click anywhere in this panel to close it.