Themes

Built-in Themes

You can set your GitKraken Desktop theme by navigating to Preferences UI Customization menu.

This can also be done quickly from the Command Palette (shortcut ⌘P or CtrlP), typing switch theme, and then the name of the theme.

Sync with System

If your system is capabale of it, you can set GitKraken Desktop to match your operating system’s current theme. This can be done from the Preferences UI Customization menu or the Command Palette.

Custom Themes

In addition to the default themes, GitKraken Desktop supports custom user-defined themes. Theme files are located in ~.gitkrakenthemes – you can open the path to this directory from Preferences > UI Customization > Theme or find the Data Location on your operating system here. Each of the .jsonc-default theme files you see in this folder can act as a template “base” for your new custom theme.

Making Your Own Theme

To make your own custom theme, follow these steps:

1. Make a copy of one of the default theme files you’d like to base your custom theme off of in this folder.

2. Rename your copied file to be MyCustomTheme.jsonc (i.e. drop the -default from the extension and give it a unique name).

3. Open your new theme file in a text editor.

4. Change the meta.name property of your theme file to be something unique (a good idea would be to match the file name). The name will be used as the display for the option under Preferences > UI Customization > Theme in GitKraken, so make it something you’ll recognize. The scheme must be “light” or “dark”, and will be used for default colors if anything is missing. If new properties are added in future releases, your theme will continue to work as-is, by using the scheme to choose a default color for the missing properties.

5. Back in GitKraken, find your new custom theme under Preferences > UI Customization > Theme and select it.

6. Edit the color values for any of the props under themeValues.

Supported CSS/LESS Functions

Supported CSS Functions

• calc
• hsl
• hsla
• max
• min
• rgb
• rgba
• var

See CSS functions for more details.

Supported LESS Functions

• darken
• desaturate
• fade
• lighten
• mix
• mixLess
• saturate

See LESS functions for more details.