Skip to main content

Theme File Structure

A theme file in ADITO defines a visual identity through color variables. Each variable represents a color value that is reused across multiple UI elements. Changing one value affects all components associated with it. Understanding these dependencies is key to maintaining a visually consistent and accessible theme. Follow the design Guideline for optimal results.

Core Color Variables​

The following color variables are available for configuration:-

Main Color 1​

This is the primary signal color and reflects the dominant corporate color. In ADITO’s standard theme, this is a blue tone.

Main color 1 ADITO standard theme

Requirements​

  • Must be clearly visible on both light and dark backgrounds
  • Should be vibrant and attention-grabbing

Application Areas​

  • Create button background
  • Icon color for general buttons
  • Global Menu button font and icon
  • Link color for system objects
  • Highlight color for selected rows (e.g., in timelines)

Visualization of Main Color 1 usage

Main Color 2​

This is the secondary signal color and complements Main Color 1. In the standard theme, it is used for the burger button and notification elements.

Main color 2 (ADITO standard theme)

Requirements​

  • Should contrast and complement Main Color 1
  • Must be visually expressive

Application Areas​

  • Background of the burger button
  • Notification counter background and highlight

Visualization of Main Color 2 usage

Primary Accent Color​

This soft color is used as the background for primary interactive elements such as buttons and selected rows.

Primary accent color (ADITO standard theme)

Application Areas​

  • Button background
  • Background of selected row entries

Visualization of Primary Accent Color usage

info

Note: The login button color cannot be changed independently.

Secondary Accent Color​

This very soft color is used primarily in table backgrounds.

Secondary accent color (ADITO standard theme)

Requirements​

  • Must provide minimal contrast to Main Color 1
  • Must still be distinguishable from the primary accent color to ensure row clarity

Application Areas​

  • Table row backgrounds

Visualization of Secondary Accent Color usage

Color Palette​

The color palette provides a set of up to 20 user-defined colors used in various interface areas.

Color palette

Requirements​

  • Choose at least 5 colors
  • All colors must be visually distinct, especially when adjacent

Application Areas​

  • Diagram elements
  • Avatars

Color palette example 1
Color palette example 2

ViewTemplateType-Specific Colors​

Certain ViewTemplateTypes use predefined color constants set by the ADITO core. These can be overridden in a custom theme.

Example:
The ResourceTimeline uses constants such as neon.RESOURCETIMELINE_ACTIVE_COLOR_7.
Refer to the Customizing Manual, section "ResourceTimeline" > "Specific color constants" for details.

Summary

Use the checklist below as a quick reference to ensure theme consistency and compliance with the visual design Guideline.

General Principles​

  1. Use color purposefully and with restraint
  2. Avoid using color alone to encode information
  3. Prevent problematic color combinations
  4. Account for users with color vision deficiencies
  5. Ensure sufficient contrast (minimum 4.5:1 for text)

Specific Requirements​

  • Main Color 1: Strong and visible on light/dark backgrounds
  • Main Color 2: Strong, ideally complementary to Main Color 1
  • Primary Accent Color: Must meet contrast requirements against Main Color 1
  • Secondary Accent Color: Must also contrast sufficiently from Main Color 1
  • Color Palette: Use 5–20 strong, distinguishable colors