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"
}

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"
}

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"
}

Setting the color of text in the Glue42 Window frame:

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

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

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

Setting the color of the sticky window edges:

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

Setting the background color of windows when loading:

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

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"
}

Setting the color of inactive tabs:

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

Setting the color of tabs on hover:

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

Setting the color of the tab header:

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

Setting the frame size and color of the active tab:

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

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"
    }
}

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

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

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
}

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"
         }
    }
}

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"
}

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

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

Setting the background color of an empty Swimlane:

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

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"
        }
    }
}

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

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

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"
    }
}

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

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

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

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

Setting the text color of active tabs:

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

Setting the size and color of the Swimlane workspace header:

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

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"
    }
}

Setting the color of the active Swimlane workspace tab:

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

Setting the text color of the active Swimlane workspace tab:

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

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

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

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

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