Theming

Theming has been set up in a way to support single-source creation of styles that apply both to the core version of a component and to how it looks in different themes. Theming styles can include both color changes and layout changes, although color changes are the predominant styling for themes.

Neutral color values are assigned to our core components so that they look good even without a theme applied.

Generating Themes

In our css files, any styles that apply to the core component are wrapped by [core] ... [/core] and at build time these styles go into our component and framework css files.

Any styles that apply to themes are wrapped in one of the following:

  • [theme=@ALLTHEMES@] ... [/theme] - any styles in here apply to all the themes
  • [theme=@GEN1@] ... [/theme] - any styles in here apply to our generation 1 theme. (no longer supported)
  • [theme=@GEN2@] ... [/theme] - any styles in here apply to our generation 2 theme
  • [theme=@GEN3@] ... [/theme] - any styles in here apply to our generation 3 themes, which include our default theme and varations on that theme.

Properties files are used to create the different variations of our themes (e.g color:@LINKS@ is placed in the CSS which refers to LINKS=#105cb6 in the properties file).

File Structure

In the csssrc/css/themes folder, there is a folder for each theme (e.g. defaultTheme). Each folder contains the following files:

  • imagesList.txt - a list of images copied to the output theme folder during the build process
  • lotusThemeSprite-dimensions.properties - contains coordinate for the theme sprite
  • lotusThemeSprite-8bit.png - the image sprite, only needed if the theme has additional images that are not part of the core component. There is also a 32 bit version of this file.
  • theme.properties - contains values assigned to keywords that are used in our CSS.

The css folder produced by the build contains a folder for each theme. Within each theme, a theme file is generated for each component as well as for our framework files (base, layout, etc.). There are right-to-left versions of each file, which have an RTL suffix. Lastly, an image folder is created which contains any theme-specific images.

Theme file naming matches the naming of the core files, using the Theme suffix. (E.g. for a menu component, you have menu.css, menuRTL.css, menuTheme.css, menuThemeRTL.css.)