Palm webOS

Light and Dark Styles

If your application uses a light-colored background with dark text and controls, the default controls and text colors should work very well for you. If your application uses a dark-colored background with light text and controls, use the palm-dark controls and text. Some of the applications that Palm ships on the phone use the palm-dark controls (e.g., Music and Videos). Figure 7-9 shows an example of palm-light and palm-dark.

Figure 7-9. Light and dark styles

You can add the palm-dark class to your body element using JavaScript or add the palm-dark class to specific elements on the page (e.g., a Drawer widget). To change the body element, add the following within the main scene of your card stage:

  var appController = Mojo.Controller.getAppController();
  var stageController =  appController.getStageController(MainStageName);
  var bodyElement = stageController.document.getElementsByTagName('body');

  bodyElement[0].addClassName('my-dark-backdrop');
  bodyElement[0].addClassName('palm-dark');
  bodyElement[0].removeClassName('palm-default');

To constrain the style change to an individual scene, you can define an encompassing div with both palm-scene and palm-dark classes. You need to define the scene or body element with the class because submenus, dialog boxes, and other z-stacked elements will inherit the style from the scene.

If you don’t use the dark styles, you can reduce ...