Theming gmaster: How-To Guide

Monday, November 20, 2017 3 Comments

Nowadays, most developers and designers love to use customized themes for their tools. In my case, I prefer especially dark themes. They help me to keep focused and avoid distractions. But, maybe your preferences go in another completely different direction.

As you know, a theme can be everything from the color of your sidebar to tabs, and things like that. In gmaster, you have complete control to transform these however you want.

You can change your active theme by clicking on the top-right menu Theme. Then, you can switch between the Light or Dark theme.

In this tutorial, we are going to learn how we can build and use our customized theme.

Creating your theme file

  1. Go to your theme folder at AppData\Local\gmaster\bin\colors.
  2. Open the lightcolors.xaml or darkcolors.xaml file in your preferred code editor.
  3. Save a copy of this file, into the same colors folder with the name of your theme, following the next convention:
    • All characters must be lower cased, no spaces, no underscore, or any other special characters.
    • Only alphanumeric characters are valid (a to z, 0 to 9).
    • The name must finish in colors.xaml or in darkcolors.xaml for dark themes.
    • For example, these are valid theme file names: mythemecolors.xaml and mythemedarkcolors.xaml.

Working in your theme

In your mythemecolors.xaml file, the color variables follow this pattern: <Color x:Key="GMaster.NameOfTheItem">value</Color>, where

  • NameOfTheItem is the name of the variable,
  • and value is the color value in hexadecimal format.

For example: <Color x:Key="GMaster.SideViewItemBackground">#11344B</Color>.

For practice, let's start with an example:

  1. We are going to change the color of the left sidebar background.
  2. Start gmaster for visualizing your changes.
  3. In the 19th line, find this: <Color x:Key="GMaster.SideViewItemBackground">#11344B</Color>.
  4. Change the color value to "#000000" and save the file.

Press the Ctrl + F5 key for refresh your view. And Boom! You can see the left sidebar (and other UI items) in black:

You can choose another hexadecimal color and test it.

Share your theme

You can try with other variables for changing another UI items. One easy trick is to test with "FF0000" (red) because you can see the changes easily:

Once you decide what UI item change, you can adjust the UI item to the color that you prefer.

Piece of cake! Isn't?

Let's go to create awesome themes. Share with the community and with us via Twitter.

Have fun!

We develop gmaster, a Git GUI with semantic superpowers. It parses the code to really understand how it was refactored and then diff it and merge it as a human would do, matching methods instead of lines.

If you want to try it, download it from here.

We are also the developers of SemanticMerge and Plastic SCM, a full-featured version control.


  1. That's great to let us create our own color theme, so thumbs up for this.
    To go even farther, as WPF developer I would love to have the possibility to tweak the templates (for example change the grip pattern -which I tried to do few weeks ago-, some alignments or more ...)

  2. Hi Julien. Yes, all the templates used for buttons, lists, textboxes and other controls are defined in the file /AppData/Local/gmaster/bin/styles/styles.xaml. Of course you can change this file as you want. The drawback is that when you install a gmaster upgrade, you need to ensure to backup your changes first, and then overwrite the styles.xaml file again. Only out of curiosity, what are the templates you're thinking to modify?

  3. Hi,
    The first thing I tried to modify is the panel grip that I found a bit too heavy. So I search in the styles for the resource called "titlebargripper" (thanks snoop) but I could not find it. So I guess the file that defines this style is embedded with some binary file?