UiPath Activities Guide

Applying Themes to Custom Activities

UiPath Studio is currently available in two themes: Classic and Dark. To ensure a consistent look and feel, custom activities should also be subjected to the same styling guidelines as Studio. The following guideline reveals which styles to use for applying the Dark theme to your custom activities.

Using BasedOn Property

UiPath Studio themes include styles and templates for all native WPF controls. For the theme to be applied to a native WPF control, all styles should use BasedOn as the default style property. When this property is used, the new style inherits the values of the original style that are not explicitly redefined in the new style.

If a style without the BasedOn property is used, the control's original style is overridden leading to the theme being applied inconsistently.

Applying Themes to Drop-Down Lists

The following example shows how to use the BasedOn property to apply the Dark theme to a drop-down list in an activity.

<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}" >

       <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

After the BasedOn property is applied, the resulting activity has the Dark theme applied and drop-down is also displayed correctly:

If the BasedOn property is not used, then the theme isn't applied to the activity's drop down list:

<Style TargetType="{x:Type ComboBox}">

       <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

Applying Themes to Buttons

<Button Content="Configure..."  Width="100" HorizontalAlignment="Left"/>

Alternatively:

  <Button Content="Configure..."  Width="100">

         <Button.Style>

               <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">

                       <Setter Property="HorizontalAlignment" Value="Left"/>

               </Style>

           </Button.Style>

   </Button>

After using the BasedOn property, buttons in custom activities are properly themed:

Without using the BasedOn property, the activity's button would look like this:

If only default styles are used, custom activities are consistent with all Studio themes, including future ones.

It is recommended to rely on base styles and avoid setting colors and font sizes directly. Most controls have colors and font sizes set by the current Studio theme. Not overriding them ensures that the same styles (colors, font size) are applied everywhere and that all elements have a consistent design, regardless of the used theme. This also ensures color and font size consistency for future themes.

If customization of controls is absolutely necessary, make sure the colors are compatible with each theme and that the contrast is properly used. The color scheme must take into account situations where the text has the same color as the background or dark icons that might not be visible when using the Dark theme.

Moreover, different resources should also be used for each theme. This ensures that all icons and on-screen elements are easy-to-read and consistent with all other elements, as well as the overall application theme. This applies to both images and style components (mainly colors).

Use a Try Catch to obtain the current application theme:

try

{

var theme = WorkflowDesignerContractRegistry.Instance.Info?.CurrentTheme;

}

catch (Exception e)

{

Console.WriteLine(e);

}

Try Catch is recommended because the WorkflowDesignerInfo interface was added to UiPath Studio version 2018.4 and above. On earlier versions this will throw an exception.

The CurrentTheme property can have the following values:

  • Light - for the Classic theme
  • Dark - for the Dark theme

Defining Resources for Themes

In order to use different resources for different themes, you can define resources for each theme in a ResourceDictionary, by using the same name(x:Key). Depending on the current application theme, load the corresponding theme resources, and then resources can be used with DynamicResource.

Resources for the Classic theme:

ClassicThemeResources.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Source="/<YourDllName>;component/Resources/ClassicThemeResources.xaml">



        <SolidColorBrush x:Key="CustomButtonBackground" Color="White"/>



        <Canvas x:Key="QuestionIcon" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">

                <Path Width="25.3333" Height="39.5833" Canvas.Left="25.3333" Canvas.Top="17.4167" Stretch="Fill" Fill="#FF6D6E70" Data="F1 M 37.2083,....... 38,17.4167 Z "/>

        </Canvas>

</ResourceDictionary>

Resources for the Dark theme:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Source="/<YourDllName>;component/Resources/DarkResources.xaml">



       <SolidColorBrush x:Key="CustomButtonBackground" Color="Black"/>



       <Canvas x:Key="QuestionIcon" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">

               <Path Width="25.3333" Height="39.5833" Canvas.Left="25.3333" Canvas.Top="17.4167" Stretch="Fill" Fill="#FFFBFBFB" Data="F1 M 37.2083,....... 38,17.4167 Z "/>

       </Canvas>

</ResourceDictionary>

Loading resources depending on theme:

if (theme  == "Light")

           {

               Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri(@"/<YourDllName>;component/Resources/ClassicThemeResources.xaml", UriKind.Relative) });

           }

else if (theme  == "Dark")

           {

               Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri(@"/<YourDllName>;component/Resources/DarkResources.xaml", UriKind.Relative) });

           }

Resource usage:

<Button Content="Configure..."  Width="100">

         <Button.Style>

               <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">

                       <Setter Property="HorizontalAlignment" Value="Left"/>

                       <Setter Property="Background" Value="{DynamicResource CustomButtonBackground} "/>

               </Style>

           </Button.Style>

   </Button>



 <Rectangle  Margin="2,0,0,0" Width="15" Height="15" Stretch="UniformToFill">

           <Rectangle.Fill>

                      <VisualBrush Visual="{DynamicResource QuestionIcon}" Stretch="Uniform" />

           </Rectangle.Fill>

</Rectangle>

Controls that Studio Themes by Default

UiPath Studio application theme applies by default to the following native controls, if the previous guidelines are followed:

  • ButtonBase - Applies to BasedOn controls and its derivations, which includes Button,
    RepeatButton, and ToggleButton.
  • CheckBox
  • ComboBox
  • ComboBoxItem
  • ContextMenu
  • DocumentViewer
  • Expander
  • GridSplitter
  • GridViewColumnHeader
  • GroupBox
  • Hyperlink
  • Label
  • ListBox
  • ListBoxItem
  • ListView
  • ListViewItem
  • Menu
  • MenuItem
  • PasswordBox
  • ProgressBar
  • RadioButton
  • ResizeGrip
  • ScrollBar
  • ScrollViewer
  • Separator
  • Slider
  • StatusBar
  • StatusBarItem
  • TabControl
  • TabItem
  • TextBoxBase - Applies to TextBoxBase controls and its derivations, which includes TextBox and RichTextBox.
  • Thumb
  • ToolBar
  • ToolBarTray
  • ToolTip
  • TreeView
  • TreeViewItem
  • Window