How to create GitKraken custom themes

Do you use GitKraken and want to customize your client UI? Then check out this straightforward tutorial for custom themes.

Giancarlos Garza avatar

Co-Founder: Colorffy, Menuffy & TheDocs

Published 7/27/2022

How to create GitKraken custom themes
How to create GitKraken custom themes

Custom themes

Thanks to GitKraken, we can quickly create our custom theme for the client. GitKraken provides us with four default themes we can use as templates for our custom theme. So, first, we need to click on the File tab and then Preferences. ⤵️

On preferences, click on UI Customization from the left sidebar.

Here we can change our themes and choose from one of the default themes, but if we want to create a new one, click on the themes directory route that appears highlighted, which will send us to our PC folder where GitKraken themes are stored.

We'll find the four default themes, so we need to duplicate anyone you want. In my case, I copy the dark.jsonc-default because I want a dark theme for the basement.

After duplicating the file, we need to rename it to "custom.jsonc" and remove the "-default" from the name.

After we change the file's name, we can open it in Visual Studio Code and install the extension: 'json-color-token" this will help us preview the colors and make them more accessible.

Vualá! 🎉

First, change the name inside the "meta" object. With this name, you can distinguish it from the others from the theme select input.

After installing the extension, we'll be able to see the square with the colors before the hexadecimal color. A popup with a color picker will appear if you click on it, making the color choice much more straightforward.

Here you can change from the primary colors to the graphs and the terminal and code editor colors! Changing these colors is incredible, and you can play until you find a suitable color scheme.

Or, like me, I use one Colorffy color palette for the graph colors, and the results are fantastic. 🎨

After learning this method to change the colors from the UI, you can test more color palettes from light to dark mode and create the perfect custom theme for you!

Now, return to the theme selector from UI Customization and choose your new custom theme. ✨

Thank you! ✅

And that's a wrap! 🤩
I hope it will be helpful for you and if you have any questions, send me a DM on Twitter. ✌🏻