Skip to content

Create your own theme

drag&bot provides functionalities to easily create your own custom themes. Each theme can have a dark and a light mode. To use a custom theme you need to provide a theme.json file in the directory ~/.dnb/theme

Contents of theme.json

A theme.json can have two properties "dark" and "light". This enables the users to switch between the two modes. If only one of those properties is given only that mode is available and users can't switch.

{
    "light": DnbTheme,
    "dark": DnbTheme
}
As you see the light and dark mode both need a DnbTheme Object. Therefore the properties you can set are identical for both. A DnbTheme has the following properties. All properties are optional.
{
    // main theme colors
    "primary": string,
    "success": string,
    "successText": string,
    "successContrast": string,
    "warning": string,
    "warningText": string,
    "warningContrast": string,
    "error": string,
    "errorText": string,
    "errorContrast": string,

    // secondary theme colors
    "reference": string,
    "referenceContrast": string,
    "dataflow": string,
    "dataflowContrast": string,

    // background colors

    // settings for generated background colors
    "bgHue": number,
    "bgSaturationFactor": number,

    //specific background colors
    "bgScale0": string,
    "bgScale1": string,
    "bgScale3": string,
    "bgScale4": string,
    "bgScale6": string,
    "bgScale8": string,
    "bgScale9": string,
    "bgScaleB": string,
    "bgScaleC": string,
    "bgScaleE": string,
    "bgScaleF": string,

    // meta infos 
    "logo": string,
    "headerLogoHeight": number,
    "favicon": string,
    "pageTitle": string,    

    // special settings for the login screen
    "login": {
        "bgColor": "primary" | "dark" | "light",
        "logo": string,
        "additionalLogo": string
    }
}

Main theme colors

Primary Color

The primary color is the main color the theme is build on. Highlights will be set with the primary color. If the theme config contains no settings for background color the background colors are generated based on the primary color.

Default: #007cc2

Examples of primary color usage

Examples of primary color usage

Success Color

The success color is used to indicate when everything is working correctly. E.g. a program finishing correctly or the robot being connected and running without error. Additionally buttons to finish a process or running a program are marked with the success color.

Default: #00965a

Examples of success color usage

Examples of success color usage

Warning Color

The warning color is used to indicate potential danger which could still be prevented. E.g. robot in teach in mode or the selected TCP is different to the one the program was created for.

Default: #ffdc00

Examples of warning color usage

Examples of warning color usage

Error Color

The error color is used to indicate when something finished incorrectly. E.g. a program finished with an error or the robot is an error state.

Default: #dc0215

Examples of error color usage

Examples of error color usage

Text Colors

To prevent having a bad contrast when using text in a theme color it is possible to set text colors. If the text colors are unset they are generated based on each theme color (success/warning/error) and on the current mode.

Mode Used color
Light Mode Theme color 5% darkened
Dark Mode Theme color 25% lightened

Contrast Colors

To always have a good contrast for e.g. text on a button you can also set contrast colors for each theme color. If the contrast colors are unset they are generated based on each theme color. To generate them the color contrasts between the theme color and black and white are calculated. (color contrast as defined by WCAG Version 2) The color with the better contrast is chose as contrast color.

Secondary Theme Colors

Reference Color

Reference color is used to highlight links between parameters. Reference color is not used for texts therefore it's not possible to set a referenceText color. To provide a color with a good contrast you can set the referenceContrast color. If it's unset it will be generated the same way as described in the chapter Contrast Colors

Examples of reference color usage

Examples of reference color usage

Dataflow Color

The dataflow color is used to visualize and highlight the dataflow of a program in the Builder. Dataflow color is not used for texts therefore it's not possible to set a dataflowText color. To provide a color with a good contrast you can set the dataflowContrast color. If it's unset it will be generated the same way as described in the chapter Contrast Colors

Examples of dataflow color usage

Examples of dataflow color usage

Background Colors

To make setting background colors as easy as possible drag&bot offers multiple ways to achieve your goal. If no background property is set the background colors will be generated based on the primary color. If the bgHue property is set, the background colors will be generated based on the specified hue. However, it is also possible to specify each individual background color. The bgSaturationFactor can be used to manipulate the saturation of the generated values. This works both when using bgHue and when using the primary color. If any background color is explicitly set and bgHue is set, the theme will favor explicitly set colors over generated ones.

BgHue

With bgHue you can specify a hue (0-360) to create background colors based on the specified hue. You can find out the hue of a color, for example, in the Adobe Color color tool when you change the color mode to HSB. To experiment with different settings for the background colors, you can try our Background-Color Settings Tool

Generated background color palette for a 'bgHue' of 50
Generated background color palette for a 'bgHue' of 300

BgSaturationFactor

With the bgSaturationFactor you can change the saturation of the generated background colors. To experiment with different settings for the background colors, you can try out our Background-Color Settings Tool

Generated background color palette with a 'bgSaturationFactor' of 0.5 and a 'bgHue' of 300
Generated background color palette with a 'bgSaturationFactor' of 2 and a 'bgHue' of 300

BgScale (Advanced)

Instead of letting drag&bot generate all values for the background color, you can also set all or individual colors to a specific value. This is possible by using the bgScale properties. If a bgScale property is set, the value is used and overrides all generated values for that specific color.

Scale Structure

The background color scale has the following colors:

  • bgScale0
  • bgScale1
  • bgScale3
  • bgScale4
  • bgScale6
  • bgScale8
  • bgScale9
  • bgScaleB
  • bgScaleC
  • bgScaleE
  • bgScaleF

bgScale0 is used for elements that are furthest in the background. Whereas bgScaleF is used for the elements that are furthest in the foreground. The colors in between are used for grading the color scale. This means for a dark and a light theme the colors are reversed.

Theme mode bgScale0 bgScaleF
dark darkest color brightest color
light brightest color darkest color

Meta Info

To complete the look and feel of your theme you can also change some more information, like the logo or the title of the webpage.

The logo property lets you replace the drag&bot logo with a logo of your choice. All you need to do is to provide a link to the logo. The link can lead to a different website or load the logo from the same server. We recommend putting the logo file next to the theme.json in the theme directory. If you do so you can, for example reference it with:

    "logo": "logo.jpg",
If you place it in a sub directory of the theme directory you can reference it like this:
    "logo": "images/logo.jpg",

HeaderLogoHeight

By default the logo in the header bar will always use 100% of the height available. If this is does not look the way you want it to look you can reduce the height of the logo by using the headerLogoHeight property. This property takes a number between 0 and 1 and is used to scale the logo in the header bar.

Favicon

With the favicon property you can change the pages favicon. A favicon is a small image displayed next to the page title in the browser tab. The favicon can be changed by providing a link similar to changing the logo.

PageTitle

The pageTitle property enables you to change the title of the webpage. The pageTitle is, for example used in the tab of your browser next to the favicon.

Login

The login object offers properties to change the style of the login page.

Property Effect
bgColor change the background color of the login page without changing other parts of the webpage
logo change the logo shown on the login page separately
additionalLogo add an additional logo to the login page, which will be displayed in the lower left corner

BgColor

The bgColor property of changes the background color of the login screen. It is not possible to set any color, but to select from three given values:

  • "primary" sets the background color to the primary color of the current theme. This is the default setting.
  • "dark" sets the login background color to the darkest background color of the theme.
  • "light" sets the login background color to the brightest background color of the theme.

We recommend to always use either the setting matching the current mode (for light mode -> light login screen) or the primary.

Examples of login bgColor primary usage Examples of login bgColor dark usage Examples of login bgColor light usage

Primary, dark and light login background color

Logo

Using a different background color for the application and the login page can result in a bad contrast between the logo you defined previously and the login background. For this case and all other cases where you want to use a different logo for the login page you can use the logo property in the login object. Defining a logo for the login page works the same way as defining the general logo for the application. When providing a link to a logo for the login page, instead of the general logo defined in the theme.json the specified logo is used.

If you want to add a second logo to the login screen you can use the additionalLogo property of the login object. For example if the application itself has a different logo than your company you can add the company logo as additional logo. The additional logo will be displayed in the bottom-left corner of the login screen and can have a maximum size of 200px x 200px. As for all other logos you need to provide a link to the logo file.

Examples of additional login logo

Example of a additional login logo

Examples

You can try theses examples by unzipping and pasting the content into ~/.dnb/theme.

Download the example lollipop theme

Download the example Keba theme