Configuration

Themes

Overview

By default, Glue42 Enterprise has two built-in themes - Day and Night. However, you can add more themes or configure the current ones by editing the themes.json file located in %LocalAppData%\Tick42\GlueDesktop\config.

Some of the configurable theme properties are explained below. For more details, see the themes.json schema.

Theme Properties

Set various theme properties - global theme properties, properties for individual tab windows, for Swimlane workspaces and tabs within them, window groups.

Global

The frame of a Glue42 Window (or a group of windows) is its outermost container - changing its thickness will change the visual width and height of the window (window group) without affecting the window content. The border of a window is the border of the actual application loaded inside the Glue42 Window and can be thought of as padding - if you increase the border size, the window content will shrink correspondingly.

Note that Glue42 Windows with "mode": "tab" and "mode": "flat" have borders and a frame, while windows with "mode": "html" only have a frame.

Setting the frame thickness and color of single Glue42 Windows:

"properties": {
    "singleFrameThickness": 3,
    "frameColor":"#9c0000"
}

Frame thickness and color

The example below shows setting the window border size and color. For the purpose of conveying the difference between the window frame and the window border, the frame is also set:

"properties": {
    "singleFrameThickness": 3,
    "frameColor": "#1e1e1e",
    "borderSize": 2,
    "borderColor": "#9c0000"
}

Border size and color

It is possible to indicate visually that a Glue42 Window is on focus by setting thickness and color for a focus frame. For the focus frame to be visible in flat and tab windows, the border must not be set to 0. For the focus frame to be visible in HTML windows, both the border and the frame must not be set to 0. Below is an example of setting the size and the color of the window focus frame:

"properties": {
    "borderSize": 2,
    "focusFrameSize": 2,
    "focusFrameColor": "#9c0000"
}

Focus frame color

Setting the color of text in the Glue42 Window frame:

"properties": {
    "textColor": "#9c0000"
}

Text color

Setting the tooltip background and text color (under the "tooltips" key):

"properties": {
    "foregroundColor": "#ffffff",
    "backgroundColor": "#9c0000"
}

Tooltip color

Setting the color of the sticky window edges:

"properties": {
    "approachingEdgeColor": "#9c0000"
}

Sticky edge color

Setting the background color of windows when loading:

"properties": {
    "backgroundColor": "#9c0000"
}

Loading background color

Tabs

The theme properties for individual tab windows are located under the "tabs" key in the themes.json file.

Setting the color of the active tab:

"tabs": {
    "activeTabColor": "#9c0000"
}

Active tab color

Setting the color of inactive tabs:

"tabs": {
    "tabColor": "#9c0000"
}

Tab color

Setting the color of tabs on hover:

"tabs": {
    "hoverTabColor": "#9c0000"
}

Hover tab color

Setting the color of the tab header:

"tabs": {
    "headerColor": "#9c0000"
}

Tab header color

Setting the frame size and color of the active tab:

"tabs": {
    "activeTabFrameThickness": "0, 0, 1, 3",
    "activeTabFrameColors": "#343434, #343434, #343434, #2080d3"
}

Tab frame color

Setting the size, color, hover color and tooltip of the tab "Close" button:

"tabs": {
    "tabCloseButtonSize": 10
    ...
    "closeButton": {
        "color": "#2080d3",
        "hoverColor": "#9c0000",
        "tooltip": "Close the tab"
    }
}

Tab close button

Setting the hover foreground color of tab header buttons and the hover background color of the "Close" button:

"headerButtons": {
    ...
    "hoverForegroundColor": "#9c0000"
    ...
    "close": {
        "hoverBackgroundColor": "#2080d3"
    }
}

Header buttons

Window Groups

The theme properties for Glue42 Window groups are located under the "group" key in the themes.json file.

Setting the height of the group header and the font weight and size of the group title:

"group": {
    "titleFontWeight": "Bold",
    "titleSize": 14,
    "headerHeight": 20
}

Group header

Setting the size, hover foreground and background color of the buttons in the group header:

"group": {
    "buttons": {
        "iconSize": 12.0,
        "hoverForegroundColor": "#9c0000",
        ...
         "close": {
            "hoverBackgroundColor": "#2080d3"
         }
    }
}

Group buttons

Swimlane UI

The theme properties for the Swimlane UI can be found under the "swimlanes" property in the themes.json file.

Setting the border size and color of the window containing the Swimlane workspaces:

"swimlanes": {
    "topWindowBorderSize": 3,
    "topWindowBackgroundColor": "#9c0000"
}

Top window border

Setting the size, color, hover color and drag color of the Swimlane splitter:

"swimlanes": {
    "splitterSize": 3,
    "splitterColor": "#252525",
    "splitterHoverColor": "#9c0000",
    "splitterDragColor": "#2080d3"
}

Splitter

Setting the background color of an empty Swimlane:

"swimlanes": {
    "laneBackgroundColor": "#9c0000"
}

Swimlane background

Setting the size, hover foreground and background color of the buttons in the Swimlane header:

"swimlanes": {
    "buttons": {
        ...
        "hoverForegroundColor": "#9c0000",
        "iconSize": 12.0,
        "close": {
            "hoverBackgroundColor": "#2080d3"
        }
    }
}

Buttons

Setting the tab header color of tab windows in a Swimlane workspace:

"swimlanes": {
    "tabs": {
        "headerColor": "#9c0000"
    }
}

Tab header

Setting the thickness and color for the frame (left, top, right, bottom) of the active tab:

"swimlanes": {
    "tabs": {
        "activeFrameThickness": "0, 0, 1, 3",
        "activeFrameColors": "#343434, #343434, #343434, #9c0000"
    }
}

Tab frame

Setting the color of the active tabs in a Swimlane workspace:

"swimlanes": {
    "tabs": {
        "activeColor": "#9c0000"
    }
}

Active tab

Setting the size and color of the separator between the tab header and the tab content:

"swimlanes": {
    "tabs": {
        "separatorColor": "#9c0000",
        "separatorHeight": 2
    }
}

Separator

Setting the text color of active tabs:

"swimlanes": {
    "tabs": {
        "activeTextColor": "#9c0000"
    }
}

Tab text

Setting the size and color of the Swimlane workspace header:

"swimlanes": {
    "workspaceTabs": {
        "headerSize": 25,
        "headerColor": "#9c0000"
    }
}

Workspace tab header

Setting the thickness and color for the frame (left, top, right, bottom) of the active Swimlane workspace tab:

"swimlanes": {
    "workspaceTabs": {
        "activeFrameThickness": "0, 0, 1, 3",
        "activeFrameColors": "#343434, #343434, #343434, #9c0000"
    }
}

Active tab frame

Setting the color of the active Swimlane workspace tab:

"swimlanes": {
    "workspaceTabs": {
        "activeColor": "#9c0000"
    }
}

Active tab color

Setting the text color of the active Swimlane workspace tab:

"swimlanes": {
    "workspaceTabs": {
         "activeTextColor": "#9c0000"
    }
}

Active tab text

Setting the color of the separator between the Swimlane workspace tab header and the workspace content:

"swimlanes": {
    "workspaceTabs": {
        "separatorColor": "#9c0000",
        "separatorHeight": 2
    }
}

Workspace separator

Setting the size and color of the "Add Workspace" button:

"swimlanes": {
    "workspaceTabs": {
        "newButtonSize": 20,
        "newButtonColor": "#9c0000",
        "newButtonBorderColor": "#9c0000"
    }
}

Add workspace button