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
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
Top comments (1)
Great tutorial!
I had some problems with my Z shell (zsh). The git branch name wasn't updated when changing the directory, so I modified the original code in
.zshrc
a bit. I had to addsetopt prompt_subst
and use single quotes to make it work.