< Jewel Components list

Jewel Themes

The look and feel of the Jewel component set

The Jewel component set focuses on 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 concrete 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 themes:

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 CSSs 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 color, one for secondary color and one for emphasized color (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>