GitKraken Client Themes
You can set your GitKraken Client 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 Client to match your operating system's current theme. This can be done from the Preferences UI Customization menu or the Command Palette.
In addition to the default themes, GitKraken Client supports custom user-defined themes. 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:
Make a copy of one of the default theme files you'd like to base your custom theme off of in this folder.
Rename your copied file to be
MyCustomTheme.jsonc(i.e. drop the
-defaultfrom the extension and give it a unique name).
Open your new theme file in a text editor.
meta.nameproperty of your theme file to be something unique (a good idea would be to match the file name). The
namewill be used as the display for the option under
Preferences > UI Customization > Themein
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.
GitKraken, find your new custom theme under
Preferences > UI Customization > Themeand select it.
Edit the color values for any of the props under
Note: Themes are hot-loaded. That means that as you save color edits to your theme files, you will see the the changes take effect immediately. If at any point your theme file contains an error after you've saved (bad JSON, improper function, improper value), GitKraken will revert to the default `DARK` theme. This is a safety precaution.
Supported CSS/LESS Functions
Supported CSS Functions
See CSS functions for more details.
Supported LESS Functions
See LESS functions for more details.