< Jewel Components list

Jewel Themes

The look and feel of the Jewel component set

The Jewel component set makes use of themes. When you set the theme of an application, you set the appearance of all components at once. When you change to a different theme, the appearance of all components changes at once.

A theme is a predefined CSS file (and, optionally, other assets like images) that holds the definitions of each Jewel component, its subcomponents and the default beads used to configure the components.

Apache Royale uses a theme to add the right css selectors to the final compilation, so when the user loads the application the required css and other files are loaded and the application shows a consistent look and feel.

Colors

Jewel comes with predefined themes based on the 12-color wheel below:

Current colors are:

Light / Dark and Flat / No-Flat

Jewel themes cover multiple visual needs and support Light/Dark and Flat/No Flat variants:

Light/No Flat

Dark/No Flat

Light/Flat

Dark/Flat

Jewel Themes are delivered by a CSS file (default.css), with all needed CSS rules predefined. We create this CSS using the Jewel SASS Theme framework located in the JewelTheme project. By updating the rules in this theme project, we can recompile all predefined Jewel themes in Apache Royale to update with the latest changes.

Predefined Jewel Themes

The Jewel library has a master theme called JewelTheme and other 144 themes in the themes folder that are generated from JewelTheme. You can learn more about how this is done in the Jewel Theme Creation section.

themes/Jewel-Dark-NoFlat-Primary-Violet-Theme or themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme are examples of the 144 concrete Jewel themes that are part of the Apache Royale official distribution. The themes are combinations of the 12 colors, dark/light and flat/no-flat options.

Using Jewel Themes

You can use up to three of the predefined Jewel themes in the themes folder in a normal Application project: one for primary colors, one for secondary colors and one for emphasized colors (i.e: themes/Jewel-Light-NoFlat-Primary-Blue-Theme, themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme and finally themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme).

Example for maven pom.xml configuration:

    <dependency>
      <groupId>org.apache.royale.framework</groupId>
      <artifactId>Jewel-Light-NoFlat-Primary-Blue-Theme</artifactId>
      <version>0.9.6-SNAPSHOT</version>
      <type>swc</type>
      <scope>theme</scope>
      <classifier>js</classifier>
    </dependency>
    <dependency>
      <groupId>org.apache.royale.framework</groupId>
      <artifactId>Jewel-Light-NoFlat-Secondary-Topaz-Theme</artifactId>
      <version>0.9.6-SNAPSHOT</version>
      <type>swc</type>
      <scope>theme</scope>
      <classifier>js</classifier>
    </dependency>
    <dependency>
      <groupId>org.apache.royale.framework</groupId>
      <artifactId>Jewel-Light-NoFlat-Emphasized-Emerald-Theme</artifactId>
      <version>0.9.6-SNAPSHOT</version>
      <type>swc</type>
      <scope>theme</scope>
    </dependency>

Another option is to use the Jewel Theme Library that provides all styles for primary, secondary and emphasized colors and configure these colors in its _theme.sass file.

Example for maven pom.xml configuration:

    <dependency>
      <groupId>org.apache.royale.framework</groupId>
      <artifactId>JewelTheme</artifactId>
      <version>0.9.6-SNAPSHOT</version>
      <type>swc</type>
      <scope>theme</scope>
      <classifier>js</classifier>
    </dependency>