Introduction

Theming dictates basically every GUI inside of Breeze. If you have Breeze+, you are able to use custom themes, made by you or others in the community. If not, you can select a theme you like from the built-in themes in the Themes tab.

However, if you have Breeze+ and want to create your own theme, you can follow this guide.

A theme is created inside of a TOML file. If you aren't familiar with the syntax of a TOML file, we highly suggest looking up. It's a very minimalistic and easy to understand format, so it shouldn't be too difficult.

To start, you need to declare your theme's name and it's author (you).

These are both declared in the info section.

[info]
name = "My Custom Theme"
author = "Your Name"

Now, we can move on to the customization.

To start, we need to understand a bit about how Breeze infers different data types. TOML by default does not include some of the features that we have, so we had to make some changes.

Colors are represented by arrays of either 3 or 4 integers. The fourth value can represent an alpha value, if you need it. The other three are simply red, green and blue respectively.

Now, to make customizing your experience easier, we implemented a way to reference other values. You can also modify them slightly, if you want to. To refer to another value, simply type the value's key in a string.

[a]
value = [128, 128, 128]

[b]
value = "a.value" # this will reference a's value

Now, we can also modify this value using Breeze's built-in modifiers. These are brighter, darker and alpha.

You can modify the value by using :: after the value's key, and then the modifier name. You can chain as many modifiers as you want.

You can also change the value that the modifier changes by adding ; after the modifier name, and then the value.

[a]
value = [128, 128, 128, 30]

[b]
value = "a.value::alpha;150" # this will reference a's value, but with an alpha value of 150

[a]
value = [128, 128, 128]

[b]
value = "a.value::darker;50" # this will reference a's value, but make each value decrease by 50

Modifier	Effect	Default Value
brighter	Raises a colour's brightness by a value (up to 255)	10
darker	Lowers a colour's brightness by a value (down to 0)	10
alpha	Changes a colour's brightness to a value (between 0 and 255)	255

Breeze includes a default section, that contains all shared values between each GUI element, to try and make it easier to change the overall look of the GUIs.

Key	Default Value	description
default.accent	[13, 98, 225]	The main accent of the client
default.corner-radius	22	The corner radius used for rounded rectangles
default.border-thickness	1	The border radius for the borders around the UI elements
default.text-foreground	[245, 245, 245]	The foreground text color this is mostly shown when the text is being hovered over by the mouse
default.text-background	[128, 128, 128]	The background text color
default.layer-zero	[17, 17, 17, 252]	The background that the UI uses
default.layer-one	[30, 30, 30, 150]	The second background the UI uses (for smaller parts within the main panel)

That should be all you need for you to get started making your own themes. An exhaustive list of all keys and their default values can be found below.