Style Profile Considerations and Best Practices

When creating and using style profiles, keep in mind the following considerations and best practices.

When you choose the main colors for your form, note that the advanced colors are automatically generated based on the main colors. Use the tips below to help you decide which colors to use as your three main colors.

Main Accent Color (Hyperlinks, highlights, and main buttons)

  • This is the color that you typically use for your main brand color. Using gray, black, or white is not advised as the main accent color.
  • To get optimal saturation (brightness or purity of a color), use a desaturated color. Every color we see gets translated into an integral value from 0 to 255. To get the optimal saturation of a color, the value is typically 10-15 units lower than 255.

Content Background Color (Form background and window content)

  • Use white or black, or slightly off-white or off-black with a slight hue of a color, such as green, orange, yellow, or blue as the content background color. A hue can be a color or a shade of a color. For example green is a hue, and turquoise is a hue of both green and blue.
  • Subtle pastel colors work well as a background color, for example a desaturated turquoise color.
  • Be careful not to use a color with high saturation as you want the controls on your form to grab attention, not the background.

Panel Background Color (Views, popups, and panels)

  • When you use dark themes, you can use a slightly lighter color than the content background color.
  • When you use light themes, you can use the same color as the content background color.
  • Background colors affect foreground colors, but foreground colors do not affect background colors. For example, when you change the background color of a button to black, the foreground colors, such as the text and borders, will automatically update to a lighter color. The exception to this rule is that changes to the form color will affect the Tab Selected Background Color.
  • Foreground colors such as Text Color automatically regenerate to have contrast with background colors, unless you override them.
    Examples:
    • If you set the Button Background Color to black, the Button Text Color updates to a shade of white to make sure it is legible.
    • If you set the List Item Selected Background Color to black, the List Item Selected Text Color of the items in the cells changes to a shade of white to keep them legible.
  • If you set the Form Background Color to transparent, or you set your Form Background Color to the same color as the Page Background Color, then your selected tab will not be obvious. You may want to change the Tab Selected Background Color to make the tab visible.
  • Input Background Color in a toolbar is ignored to soften the look of the toolbar.
Containers affect the controls within them. If you change the color of any of the containers listed below, the controls within that container automatically update to a shade supporting the color of the container.
  • Page
  • Form
  • View
  • Toolbar
  • List item in a List view
  • Dialogs

Icons are not affected by the style profile.

When you apply a style profile to a form, it may behave differently to what you expect. Take note of the affect other settings have on the behavior of your form at runtime:

  • You must deselect the Use Legacy Theme form property. If you don't do this, the legacy theme will apply at runtime.
  • Any properties set in the Form Designer take priority over the style profile. If you use the form's properties to set a page or form background color, or configure the style in the Format property, those will apply to the form.
  • If you use the form's properties to set the form to a dark color, the controls inside the form will not make themselves lighter to be legible on a dark background. It is advised to only use the advanced colors to configure the style and not mix the style profile with other settings in the Form Designer as the expected behavior may differ. Either use the form properties to style your form, or configure a style profile.
  • Using the Developer tab to add external files:
    • When you add external CSS files in the Developer tab of the Style Profile Designer, these files take priority over main colors and advanced colors used in your style profile. This feature is available to users with extensive knowledge of Cascading Style Sheets and JavaScript and should only be used if you fully understand CSS and JS. See Developer for more information about using external files in your style profile.
  • Using subviews:
    Style behavior of a subview is not the same as when the view is on a form. A view on a form inherits the Panel Background Color and a subview inherits the Page Background Color. The following options are available to apply styling to a subview:
    • Change the Page Background Color in the Advanced Colors section of the style profile.
    • Use a custom external style sheet to target the page-background-color variable. See example below:
      Copy

       

      html .theme-entry {
                                          --page-background-color: blue;
              }