Design a Theme

Good theme design is important. Before creating a theme, there are several things you should consider.

Colors and Styles

Consider the following color and style theme properties when designing a theme.

  • Each theme property is named and intended for a specific element on a dashboard, form, portal or action catalog. When the element is added, the elements defined colors, styles, and fonts are applied by default (example: form control colors, border style, and fonts are automatically applied to a control when the control is added to a form).
    • Manually apply a different color or style to most elements, if needed. The key is to use theme colors, and to apply colors and styles consistently.
    • If a non-theme color (example: system, web, or RGB) is applied, the element does not change to another theme color when applying a different theme.
  • Contrast is important, so we recommend considering the background and label colors first. If background colors are dark, use lighter label and accent colors. If background colors are light, use darker label and accent colors.
  • Colors should not irritate. When selecting a color, consider:
    • Accessibility (example: Color blindness).
    • Translation (example: What does a color mean in another locale?).
    • Browser capabilities (example: Do browsers consistently display the color?).
    • Science (example: What feeling or response does the color evoke?).
  • Transparent is a color option. Use transparent on backgrounds and borders when a color is not needed.

Widgets

Widgets significantly vary by type, see About Widgets. Consequently, theme properties and how they can be applied also significantly vary:

  • By default, widget labels inherit their font from the default system font. Font size, style, and alignment must be manually applied.
  • Chart, gauge, and matrix widgets can have their own colors and styles and can be defined to override theme colors. For more information, see Chart Widgets, Gauge Widgets, and Create a Matrix Widget, respectively.

  • Theme alert colors are automatically applied to gauge threshold (for more information, see Define Thresholds for a Gauge Widget). For example: Low, Medium, and High.

    Override theme alert colors if necessary, or apply theme alert colors to other elements (example: Alert colors are often used in expressions to conditionally change a widget's background or label color).

  • Image, button, filter, and search widgets do not support backgrounds; therefore, no background color or style can be applied. For more information, see Filter Widgets and Search Widgets.
  • Image widgets do not support text, background, foreground, or border colors; therefore no colors, styles, or fonts can be applied.
  • By default, text gauge widgets have a transparent background. To manually add a background, right-click the widget, select a background style, and then select a background color and border color.

  • The Rich Text Editor uses a default font based on the following settings, shown in priority order:

    • Field properties for a specific field in a Business Object (example: Resolution fields in Problems).
    • Default font selected in the Global Rich Text settings.
    • Default theme form control font.
    • CSM global system font (not configurable).