Customize your MacBook Pro Touch Bar

A quick tutorial explaining how you can create a custom touch bar for your MacBook Pro

7 min readFeb 17, 2019

Picture of my custom MacBook Pro touch bar. Picture taken by me.

While using my 2018 MacBook Pro I got a bit tired of the Touch Bar buttons that constantly get switched every time I would go from one application to the other. It was very frustrating that I had no option to select a fixed set of buttons that would constantly be there no matter in which application I was in. That’s of course all up until I came across an app on GitHub called My TouchBar, My Rules (MTMR) developed by Anton Palgunov.

What this application enables you to do is to add a fixed set of Touch Bar buttons and organise them in any way you want. So if you are frustrated with the same problem, then this article is for you as I will show you how to setup your touch bar, according to your rules.

If you prefer more to see a video tutorial on how to do this, you can check it out on my YouTube channel.

Installing MTMR

Installing MTMR is quite simple:

Navigate to the GitHub page of MTMR and download the latest .dmg file release of the app.
Save the .dmg file anywhere on your drive.
After it downloaded, run the .dmg file and install the app like any other Mac application by dragging the MTMR icon in the “ applications” folder.
Since this is not an official app from the App Store, you will have to give it permission to run. In order to do that, go to your System Preferences > and navigate to Security & Privacy.
Here you want to shift to the “general” tab and you will see a message saying that MTMR was blocked. Here you need to click on “open anyway”.
A security message will pop up where you again need to click “open” (it might additionally ask for your master password).

Screenshot of the security & privacy settings in the “general tab”.

After you start MTMR, you will notice that your touch bar completely changed.

Picture of the basic MTMR preset. Picture taken by me.

Customizing the Touch Bar

Chances are that you are probably not happy with the basic preset of the Touch Bar that comes when installing MTMR.

So let me show you now how to actually customize it. Here it gets slightly complicated because the developer of this application didn’t create an interface where you can do the customization, so we will have to edit the source code of the preset to adjust the Touch Bar the way we want to.

For that, you will first have to download and install a source code editor like for example Atom (I went with Atom) or Sublime Text.

After you have the text editor installed, look for the MTMR icon in the top bar of your Mac and then selecting “Preferences”.

When you click on Preferences, the .json configuration file will open in Atom (or Sublime Text).

Screenshot of the MTMR basic preset code.

To be able to understand what each of these lines of code mean, I would suggest you to go back to the GitHub page of MTMR and go through the readme file. Here you have an overview of all of the available buttons and the line of code that you have to add to the file so that that specific button appears on your touch bar.

Let me give you an example how to do it. Let’s say you want to add a mute button. All you need to do is find an existing button that we don’t need in the basic preset file and replace the type name in the brackets and add “mute”.

You can also adjust the size of the button by playing with the width number, add or remove a border around the button, and align the button right, centre or left on the touch bar.

Screenshot of the code edited to add the “mute” button.

You can also reorganise the position of the buttons by moving the button line of code above or below another button (just make sure to copy all the content from start to end of the bracket).

After that, just save it, and your changes will immediately appear on the touch bar.

My TouchBar preset

Picture of my MTMR preset with the Spotify button. Picture taken by me.

In my specific case, I wanted to have a fixed set of buttons that I constantly use. Therefore I went with the brightness adjustment buttons, a button that shows me the current song playing on Spotify, the 3 media buttons (previous, play/pause, next), a volume slider, a “coffee” button that turns off my screen, a “tomato” button for the Pomodoro productivity tracker, current weather and date indication.

If you would like to use my preset, just copy/paste the code below in your items.json file:

[
  { "type": "escape", "width": 75 },
  { "type": "exitTouchbar", "align": "left", "width": 48 },
  { "type": "brightnessDown", "width": 50, "align": "left" },
  { "type": "brightnessUp", "width": 50, "align": "left" },
  {
  "type": "appleScriptTitledButton",
  "source": {
    "inline":
      "if application \"Spotify\" is running then\rtell application \"Spotify\"\rif player state is playing then\rreturn (get artist of current track) & \" – \" & (get name of current track)\relse\rreturn \"\"\rend if\rend tell\rend if\rreturn \"\"\r"
  },
  "action": "appleScript",
  "actionAppleScript": {
    "inline":
      "if application \"Spotify\" is running then\rtell application \"Spotify\"\rif player state is playing then\rnext track\rend if\rend tell\rend if\r"
  },
  "refreshInterval": 1,
  "image": {
    "base64":
      "iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAYUExURUdwTB3WXx3UXh3VXx7XYBkXFRpVLRyURmIaeAQAAAAEdFJOUwDDO3fSqUUkAAABbklEQVRIx61VbW6DMAztoAeYNA7ApB6gkzhAWS24wIAL0HABaK6/pHFNEhy8TXu/kPzkPD/8cTj8K7KPAqB+K5NhQPCUrABCXe7HOUYYZxgVRLiG8RfY4DUgFFtC7cffAfZTFBwBdhWEKfgEq4ocEjgj4ZQifO6/QG9kkETp1dDeVWfRKx3XYSW0LoqY5kCElXDrQkyeCCuh6WL0M4nIWQIyzqixdfKU1koFDKvyCA8NJMzU4xiD+b4kfHRpsIyKc6hBwjVptFHVY51EMAINNDFGJITKDNQcdpX74Hz0CQ3rY5qwMp4EIxrlafzrsYZ2Veb0DkRgfNCUok4Y1fqEijfyi2b8RE9beWqa48Y/uvCNMcH9btfUi+/CGLR1vhL6Zz9N/vBlaCU+7lwY/cmJ67Ryen/2tj23PLqJBodZH8vgj544vOL4pxfI5acrSFxi8hrkU9TSKr78ZpnL50A8KPJJEo+afBblwyqf5j/iGys5j6ScrST2AAAAAElFTkSuQmCC"
  }
},
  { "type": "previous", "width": 50, "align": "right" },
  { "type": "play", "width": 80, "align": "right" },
  { "type": "next", "width": 50, "align": "right" },
  {
  "type": "volumeDown",
  "bordered": false,
  "align": "right",
  "width": 25,
},
{ "type": "volume", "width": 120, "align": "right"},
{
  "type": "volumeUp",
  "bordered": false,
  "align": "right",
  "width": 25
},
  { "type": "displaySleep", "width": 40, "align": "right", "bordered": false },
  {
"type": "pomodoro",
"bordered": false,
"align": "right",
"workTime": 1200, // set time work in seconds. Default 1500 (25 min)
"restTime": 600, // set time rest in seconds. Default 300 (5 min)
},
  { "type": "weather", "refreshInterval": 60, "units": "metric", "align": "right", "bordered": false, "api_key": "84645702688e83a35e2549ca77f73369"},
  { "type": "timeButton", "align": "right", "formatTemplate": "MMM d", "bordered": false  }
]

Picture of my second MTMR preset with the app manager. Picture taken by me.

I also made another similar preset where I only replaced the button that shows the current Spotify song playing with an app manager where you can switch between different apps.

Again here, just copy/paste the code below in your items.json file:

[
  { "type": "escape", "width": 75 },
  { "type": "exitTouchbar", "align": "left", "width": 48 },
  { "type": "brightnessDown", "width": 50, "align": "left" },
  { "type": "brightnessUp", "width": 50, "align": "left" },
  { "type": "dock", "width": 200, "align": "left"}, 
  { "type": "previous", "width": 50, "align": "right" },
  { "type": "play", "width": 80, "align": "right" },
  { "type": "next", "width": 50, "align": "right" },
  {
  "type": "volumeDown",
  "bordered": false,
  "align": "right",
  "width": 25,
},
{ "type": "volume", "width": 120, "align": "right"},
{
  "type": "volumeUp",
  "bordered": false,
  "align": "right",
  "width": 25
},
  { "type": "displaySleep", "width": 40, "align": "right", "bordered": false },
  {
"type": "pomodoro",
"bordered": false,
"align": "right",
"workTime": 1200, // set time work in seconds. Default 1500 (25 min)
"restTime": 600, // set time rest in seconds. Default 300 (5 min)
},
  { "type": "weather", "refreshInterval": 60, "units": "metric", "align": "right", "bordered": false, "api_key": "84645702688e83a35e2549ca77f73369"},
  { "type": "timeButton", "align": "right", "formatTemplate": "MMM d", "bordered": false  }
]

I would encourage you to play around a bit with the file and see what button combination and layout works best for you. I know that it’s a bit complicated fiddle around with the source code, but the developer of the app Anton Palgunov added on his to-do list to create an interface for adjusting the settings. So in one of the upcoming updates, customizing your touch bar will become easier.

Optional settings

If you want MTMR to run when you Mac starts, make sure to check the “start at login” option in the MTMR top bar.

Additionally, if you would like to still see Apples “control strip”, you can do that by unchecking the “hide control strip” option in the top bar, but then you have less space for your custom buttons. What this will do is display MTMR on the left part of the bar, while Apple’s control strip will be fixed on the right part of the bar.

Picture of the MTMR touch bar. Picture taken by me.

That would be it! Enjoy your new, custom MacBook Pro touch bar!

If you want to see this whole process in form of a video tutorial, you can find it out on my YouTube channel.

I have also a YouTube channel called “Digital Pulse” where I share my opinions, experiences and recommendations about the latest tech and digital trends in the form of reviews and tutorials.