Colorize Your MacOS Terminal with the Dracula Theme

Being a huge fan of the Dracula theme in VSCode, I recently discovered that you can apply this delightful theme to various apps, including the terminal! In this post, I will guide you through the process of transforming your terminal from its default appearance to a stunning Dracula-themed terminal.

Table of Contents

• Get the Theme
• Customize the Prompt
  • Bash
  • Zsh
  • Understanding the Prompt
• Conclusion

Get the Theme

To start, let's download the Dracula theme. Simply clone the repository using the following command:

git clone https://github.com/dracula/terminal-app.git

This will fetch the theme files, including the Dracula.terminal file. For more details on downloading the theme, refer to the official documentation.
Now that we have the file, let's activate it. Click on your Terminal window and go to Terminal > Settings. Here, you'll find a list of default Terminal profiles. To add Dracula to the list, simply drag the downloaded terminal file into it. Press the Default button at the bottom to set it as your default profile.

Once you open a new terminal, you should see the initial changes in appearance.

However, it's not colorful yet. The real secret lies in customizing the terminal prompt.

Customize the Prompt

The default terminal prompt is not colorized, so we need to change it to display our custom colors. The idea is actually straightforward: the terminal prompt is defined by some variables (PS1 for Bash and PROMPT for Zsh), and we just need to change their values in the corresponding configuration files.

My editor: vim

To customize the prompt, we'll work with dotfiles that configure the terminal. I'll be using vim for editing, but feel free to use other editors like nano or emacs.

Bash vs. Zsh

The dotfiles used for customization may vary depending on your default shell. In this tutorial, I will guide you through the process for both Zsh and Bash.
If you're not sure about your default shell, you can check it by typing echo $0 in the terminal. The output will display the name of the shell. If you wish to change your default shell, you can use one of the following commands or refer to the official guide:

# Change from Bash to Zsh
chsh -s /bin/zsh

# Change from Zsh to Bash
chsh -s /bin/bash

Now lets dive in!

Customize the Prompt with Bash

Let's start by setting up the .bashrc file. This script file is executed when a user logs in and can be used to customize the shell environment. Follow these steps:

# Navigate to the home directory
cd ~

# Open and edit the .bashrc file
vim .bashrc

If you are using vim, press i to enter insert mode and paste the following code:

# get current branch
function parse_git_branch() {
  BRANCH=$(git branch 2>/dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\1/')
  if [ ! "${BRANCH}" == "" ]; then
    echo "(${BRANCH}) "
  else
    echo ""
  fi
}

PS1="\[\e[1;32m\]➤➤\[\e[m\] "                   # start prompt
PS1+="\[\e[1;34m\]\W\[\e[m\] "                  # current directory
PS1+="\[\e[1;36m\]\`parse_git_branch\`\[\e[m\]" # current branch
PS1+="\[\e[1;32m\]\\$\[\e[m\] "                 # end prompt

export PS1

Save the changes and exit vim by pressing ESC and then :wq. To see the changes in the prompt, use the command . .bashrc to execute the .bashrc file.
To ensure your configuration is automatically applied each time you open a terminal, add the following lines to the end of the .bash_profile file:

if [ -f ~/.bashrc ]; then
   source ~/.bashrc
fi

Now, open a terminal in a directory and enjoy your beautifully customized prompt!

Customize the Prompt with Zsh

The steps are very similar for Zsh. Instead of .bashrc, we will be editing .zshrc.

# Navigate to the home directory
cd ~

# Open and the .zshrc file
vim .zshrc

With vim, press i and copy the following content inside .zshrc:

# get current branch
function parse_git_branch() {
    BRANCH=$(git branch 2>/dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\1/')
    if [ -n "${BRANCH}" ]; then
        echo "(${BRANCH}) "
    else
        echo ""
    fi
}

PROMPT="%F{green}➤➤%f "                 # start prompt
PROMPT+="%F{blue}%1d%f "                # current directory
PROMPT+="%F{cyan}$(parse_git_branch)%f" # current branch
PROMPT+="%F{green}$%f "                 # end prompt

export PROMPT

Save the changes and exit vim by pressing ESC and then :wq. The changes should be applied, if not, run the file with . ./.zshrc or exec zsh. 

Now, open a terminal in a directory and enjoy your beautifully customized prompt!

Understanding the Prompt

The last command exports the PS1 variable for Bash and the PROMPT variable for Zsh, which define our custom prompts. This is a matter of personal preference, so feel free to customize it to your liking. The layout I prefer for my prompt is as follows:

➤➤ current directory (git-info) $

I separate the prompt into 4 sections for readability.

# bash
PS1="\[\e[1;32m\]➤➤\[\e[m\] "                   # start prompt
PS1+="\[\e[1;34m\]\W\[\e[m\] "                  # current directory
PS1+="\[\e[1;36m\]\`parse_git_branch\`\[\e[m\]" # current branch
PS1+="\[\e[1;32m\]\\$\[\e[m\] "                 # end prompt

# zsh
PROMPT="%F{green}➤➤%f "                 # start prompt
PROMPT+="%F{blue}%1d%f "                # current directory
PROMPT+="%F{cyan}$(parse_git_branch)%f" # current branch
PROMPT+="%F{green}$%f "                 # end prompt

Colors
Each section is started with some pattern:
\[\e[COLORm\]STRING\[\e[m\] or %F{COLOR}STRING%f
, which are used to add custom colors. For example, the first section of my prompt is the arrow emojis (➤➤) in green. Colors in Zsh can be referenced by strings, but in bash have to via code. You can find all color codes for the Dracula theme here.

Prompt Variables & Special Characters
Both Bash and Zsh have prompt variables to get specific information such as the last component of the current directory path (\W and %1d). You may want to check out other variables for Bash and Zsh.

Custom Functions
If you need additional information that's not provided by the prompt variables, you can achieve that by creating custom functions. In my case, I have created a function called parse_git_branch to get the current branch information. Additionally, I have created another function to retrieve git status information, including staged and unstaged changes. For configuration files containing these functions and more, you can check out my repository here.

Now you have everything you need to construct your own prompt to your taste! There are powerful tools that can make it easier for you as well! Check out the Zsh Prompt Generator Bash Prompt Generator.

Conclusion

🎉Congratulations on transforming your macOS terminal with the Dracula theme! In this article, we covered the steps to obtain the theme and customize your terminal prompt. Feel free to explore further customization options and check out the mentioned resources for additional information. Enjoy coding with your Dracula-themed macOS terminal!

Resources

• All configuration files: Link
• Dracula Terminal Theme: Link
• How to Change the Default Shell on Mac: Link
• Bash: Prompt Variables , Prompt Generator
• Zsh: Prompt Variables, Prompt Generator