Themes

Intro

ChocolateChip-UI uses themes to render the layouts and widgets appropriately for Android and iOS. All you have to do is link to the stylesheet in your app. You can use the themes either Google Chrome or Safari. Layours and widgets will render accurately with either.

Changing a Theme

Changing which theme your app is using is easy, just open the html document and look for the link to the CSS. Change the reference to the platform you want to use. There are three platforms:

• Android
• iOS

// For Android:
<link rel="stylesheet" href="css/chui-android.css">

// For iOS:
<link rel="stylesheet" href="css/chui-ios.css">

Changing a theme can also result in very different behavior of layouts and widgets based on what these are like on the target platform. For example, on iOS tabbars are always on the bottom and use icons, whereas on Android these are always at the top and do not generally use icons.

Color

ChocolateChip-UI has a number of useful methods for dealing with color. These allow you to easily convert between hex and RGB, as well as to programmatically lighten or darken a color by percentages. It also has a special method, $.calculateBrightness (colorValue), to determine when to lighten or darken text based on the brightness or darkness of its background color. To learn more about color management, please read the documentation.

• Components
• State
• Widgets
• Pubsub
• Router
• Gestures
• DOM
• Utilities
• Layouts
• Themes
  • Intro
  • Use
• Forms
• Formatting
• Hybrid Apps
• Tutorials