Theme Guide - Desktop Variables Guide

Although not exhaustive, here’s a guide to help you understand what variable names in the Theme Editor match various interface elements.

Just follow along by bringing up the Theme Editor in your Desktop client, and using the search bar to search for the colours and names listed below. To find out how to bring up the Theme Editor, click here.

Base Colours

This category of variables encompasses a lot of baseline colours throughout the interface, and can be a good starting point to build most of your theme from.

Backgrounds and Fills

windowBg - Acts as a fallback for the core background of window elements. This will always affect chat title backgrounds, chat profile backgrounds and some search bars.

windowBgOver - Covers some effects where the mouse hovers over buttons or list entries. Also covers the title bar and search box colour.

shadowFg - Covers most, but not all borders between different user-interface panels.

windowShadowFg - Covers shadow effects that don’t include message bubble shadows.

activeLine - The line that appears next to replies and under text entry boxes like the Username box.

historyPinnedBg - Covers the pinned message background.

menuBg / menuBgOver - Pop-up menu backgrounds

mainMenuBg / mainMenuCoverBg - Covers the slide-out menu background components when you click the menu icon.

windowBgActive / windowFgActive - “””Active””” filled in areas. AKA the checkboxes when marked, but also the default for selected chats, Main Menu text titles and service messages in chats. This is one category of colours you may want to look at in more detail in the section below.

toastBg / toastFg - A small notification bubble that pops up when you press certain buttons

Buttons

windowActiveTextFg - Covers clickable buttons and text elements, such as Shared Media types, the Back and Edit buttons and most Settings options.

activeButton - The default rounded button used to send someone a message while viewing their profile, or for setting your profile picture in Settings.

outlineButton - Smaller consecutive button sets, mainly seen in the Shared Media and Actions sections of a chat profile.

lightButton - Kind of the same thing as outlineButton. Kind of.

attentionButton - The “emphasis” button that appears on pop-outs like the log out box.

checkboxFg - The checkbox outline when unchecked.

menuIconFg / menuIconFg - Covers nearly all icon colors throughout the user-interface

historySendIcon - The send icon on chats.

Text

windowFg - Covers most normal text throughout the interfaces (Message bubbles, Group Descriptions, etc)

windowBoldFg - Colour for most “bold” text elements - this includes the chat profile titles and member list names.

windowSubTextFg - Covers additional text elements such as chat previews and last seen statuses.

placeholderFg/placeholderInactiveFg - Input box placeholder text.

Effects

layerBg - Covers fade effects that colour the user-interface when a new interface element appears over it. This can happen when viewing the Settings panel or the Log Out pop-up.

Interface Categories

The above sets of variables will let you theme almost everything rather quickly, but there’s times where you might want to edit something very specific. In this case, check out the categories below.

dialog - Chats List

This is the main prefix that matches all color variables for the chats list.

dialogsText = All text elements

dialogsUnread = Unread/Pinned Icon Colors

msg - Message Bubbles

msg - The main prefix for all message-related colours, such as speech bubbles.

msgIn = Messages you receive

msgOut = Messages you send

msgFile = File download icons and preview colours

msgDate = The date background bubble that appears over media messages

msgServiceBg = Service messages and dates

history - THE ACTUAL CHAT HISTORY

historyToDownShadow - Covers the drop-shadow of the arrow icon that appears at the bottom-right side of the screen, when you’re not viewing the last sent messages in a chat

historyTextIn - Message box and speech bubble text colours.

historyComposeArea - The box below where you edit text.

historyPeer - User name colours and blank avatar colours.

historyFile - Components relating to the display of file… T__T

title - Window Title Frame

Includes background colours, closeminimizefull-screen icons, and the title text (on macOS, the colors for close, minimise and full-screen won’t work).

titleShadow - Defines the small border between the title frame and the rest of the window.

menu - Pop-out Menu Items

profile - Chat Settings Area + User Lists

intro - Introduction Screen

Covers all colours that are used for the introduction screen graphics.

introCoverTopBg / introCoverBottomBg - The components of the gradient background at the top of the login screen

introCoverIconsFg - The color of the cloud icons and graphics inside the gradient.

introCover - The various components that make up the paper plane colors.

<<< Back to Theme Guide