Writing custom themes

Introduction

Themes are written in the CSS language. The whole UI uses CSS variables for colors, so changing them is extremely easy. For example, this is the built-in dark.css theme:

:root {
    --theme-name:   Dark;
    --theme-author: Yamka;
    
    --red:          linear-gradient(90deg, #f31c00, #eb3700);
    --red-color:    #f31c00;
    --red-trans:    #f31c0090;
    --yellow:       linear-gradient(90deg, #e2df0e, #bae718);
    --yellow-trans: #e2df0e90;
    --green:        linear-gradient(90deg, #2ac02a, #2ac075);
    --green-trans:  #2ac02a90;
    --rainbow-grad: linear-gradient(90deg, #fa1b1b, #fab31b);
    
    --background:       #131519;
    --background-trans: #131519af;
    --bg-2:             #1c1f25;
    --bg-3:             #20242b;

    --red-foreground:    #efefef;
    --yellow-foregound:  #242424;
    --green-foreground:  #efefef;
    --foreground:        #dbdbdb;
    --foreground-1:      #a7a7a7;
    --foreground-2:      #979797;

    --shadow:        0 0 8px #11111167;

    --darken-icon: 0%;
}

Variables used for theming:

• theme-name and theme-author: fill in whatever you want! It'll show up in the UI under User Settings -> Appearance.
• red, yellow, green: any color or gradient that is assumed to be the corresponding color
• red-color: any color that is assumed to be red. Note that unlike red this variable must be a color, not a gradient.
• red-trans, yellow-trans, green-trans: translucent versions of the corresponding colors. It's very important that they're colors, not gradients.
• rainbow-grad: the red-to-orange Yamka brand gradient
• background: primary background color
• background-trans: translucent version of the primary background color
• bg-2, bg-3: secondary and tertiary background colors
• red-foreground, yellow-foregound, green-foreground: the color used for text rendered on top of the corresponding color as background
• foreground, foreground-1, foreground-2: primary, secondary and tertiary foreground colors
• shadow: shadow drawn around UI elements such as panels, popups, etc.
• darken-icon: by how much should white icons in the UI be darkened?

To load the theme, save it in a .css file wherever, then go to User Settings -> Appearance -> Load custom theme

Advanced

Every aspect of the UI can be changed. Just write CSS rules in your theme file! You can do one of the following to write selectors for your rules:

1. read through the entirety of the ~3k lines of HTML and CSS code of the project;
2. run the app, open DevTools by pressing Ctrl+Shift+I and examine class names, IDs and the DOM structure of the particular part of the UI you want to change.

For example, the following rule will make group icons on the main screen rectangular:

.group-panel > :nth-child(1) > img {
    border-radius: 0px;
}

Important: Your theme must have all of the color definitions as described above.