Colorful terminals with Oh My Posh and Windows Terminal

Introduction

Oh My Posh is a tool that not only enhance the appearance of your shell, but also offers useful integrations that makes the use more intuitive and helps us be more productive.

I use it in WSL and in my home server and customized it to easily identify what shell I'm in:

Quick definition

Just a quick definition of the terms Shell and Terminal:

Shell: the software that receives the input, process and returns and output (Examples: zsh, bash, PowerShell, cmd);
Terminal: the software that takes the input and passes on to the shell and then prints the shell output (Windows Terminal, VS Code Terminal, cmder).

Installing Oh My Posh

To install Oh My Posh, we need to download the install script and run it:

curl -s https://ohmyposh.dev/install.sh | bash -s

And include its configuration in the run commands file of the shell you use.

In my case, I use zsh, so I include the following line to my ~/.zshrc file:

eval "$(oh-my-posh init zsh)"

Then exit the shell and enter again to load the configuration.

ℹ️ Here there is a list of configurations for the supported shells, including PowerShell and Cmd.

Installing a Nerd Font

To use everything Oh My Posh offers, its essential to install a custom font that includes icons.
Oh My Posh recommends one of the Nerd Fonts.

To install the fonts on Windows:

Download the font you like (I use Caskaydia Cove) from their page;
Extract it in a temporary directory;
Select all .ttf files;
Right click and click Install or Install for all users.

Configuring The Terminal

Then, we need to configure the terminal to use the font

⚠️ The fonts are needed in the system where you use the terminal. If you access a server via SSH, you only need the fonts in the system where you access it from.

Windows Terminal

Enter the Settings;
Select the profile to configure;
Click in Appearance;
Select the font in Font face
Click Save.

Then we can see that the icons are shown correctly:

VS Code

Enter the Settings (File > Preferences > Settings);
Search for terminal font;
Type the font name in Terminal > Integrated > Font Family. For Caskaydia Cove it can be CaskaydiaCove Nerd Font Mono.

Then we can see that the icons are shown correctly:

Themes

Oh My Posh is highly customizable and has many themes (List here).

To use a theme, just download its json and use it when starting Oh My Posh.

In the example below, the theme is in ~/.poshthemes/aliens.omp.json:

eval "$(oh-my-posh init zsh --config ~/.poshthemes/aliens.omp.json)"

Then exit the shell and enter again to load the configuration.

Customizing your theme

Oh My Posh has many segments that can be used. Some that I find interesting are:

Git: Can show the status of the git repo, files changed, rebase/merge status and many more;
Status Code: Shows the status of the last command executed, if they succeeded or not;
Root: Show if the logged user is root.

We can also use the Command segment to run any command and print the output.

As well as some configurations, for example:

Console title: Customize what is shown in the terminal title bar. I use it with a fixed text in my home server to easily identify when I'm connected to it;
Transient Prompt: Replaces the template for the shell history with a simpler one;
Tooltip: Show information on the right when a specified command is type. For example, show the git branch when "git" is typed.

💡 Oh My Posh is written in Go, so we can use Go Templates to customize many of its features with conditions, access environment variables and format texts. You can see some examples in my theme below.

Here there is an Unicode cheat sheet for Nerd Fonts to use when customizing the theme.

My theme

In my theme I use 4 segments:

Session: Shows an icon, the logged in user and the hostname;
Path: Shows the current directory (I use the Agnoster Short style, but there are others);
Status: Shows an colored icon for the status of the last shell command (Successful/Failed);
Git: Shows the git status for the repository if the directory is one.

ℹ️ I change the color and the icon of the session segment according to what shell I'm using (server icon for home server, Ubuntu icon for Ubuntu in WSL).

{
  "$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
  "version": 2,
  "final_space": true,
  "blocks": [
    {
      "type": "prompt",
      "alignment": "left",
      "segments": [
        {
          "type": "session",
          "style": "diamond",
          "foreground": "#FFFFFF",
          "background": "#dd4a14",          
          "leading_diamond": "\ue0b6",
          "template": "\ue73a {{ .UserName }}@{{ .HostName }} "
        },
        {
          "type": "path",
          "style": "powerline",
          "powerline_symbol": "\ue0b0",
          "foreground": "#ffffff",
          "background": "#207a26",
          "template": " {{ .Path }} ",
          "properties": {
            "folder_icon": "\uf6d7",
            "folder_separator_icon": "<transparent> \ue0bd </>",
            "home_icon": "\uf7db",
            "style": "agnoster_short"
          }
        },
        {
          "type": "status",
          "style": "powerline",
          "powerline_symbol": "\ue0b0",
          "foreground": "#ffffff",
          "background": "#00897b",
          "background_templates": [
            "{{ if .Error }}#890017{{ end }}"
          ],
          "template": " {{ if .Error }}\uea87{{ else }}\uf05d{{ end }} ",
          "properties": {
            "always_enabled": true
          }
        },
        {
          "type": "git",
          "style": "powerline",
          "powerline_symbol": "\ue0b0",
          "foreground": "#193549",
          "background": "#95ffa4",
          "template": " {{ .HEAD }}{{if .BranchStatus }} {{ .BranchStatus }}{{ end }}{{ if .Working.Changed }} \uf044 {{ .Working.String }}{{ end }}{{ if and (.Staging.Changed) (.Working.Changed) }} |{{ end }}{{ if .Staging.Changed }} \uf046 {{ .Staging.String }}{{ end }} "
        }
      ]
    }
  ]
}

References

Liked this post?

I post extra content in my personal blog.

Daniel Genezini | It works on my machine

My blog where I share my experiences about .NET, Blazor, AWS, and other tech stuff. Very important note: Everything that I post works on my machine!

blog.genezini.com

Blog