How to customize your terminal style

• https://github.com/robbyrussell/oh-my-zsh

If you like to have a special personal style, than you can read the following article. I will show you how to customize a terminal style.

How to customize

The following topics have their private settings, we have to set all of them to make our terminal fancy enough and consistency style.

• SSH Client
• PS1
• Tmux/Screen
• grep/ag
• ls colors
• vim theme.

Here is my terminal of chrome SSH client.

To modify all of these color theme and settings is a tough work. If you don't want to spend a lot time learning everything, I suggest you to customize a dark background color theme because the default background color of terminal is black. The dark color match with the original terminal style, so you can only change part of the color you want and also keep the consistency of style.

In my case, When I started to redesign my terminal style, I choose a light background theme. Any light color in my terminal is too similar to background color and hard to read such as yellow, light-gray and white. It forces me to change all of these light colors.

Linux Color

The most of linux OS have 256 colors. If the linux only support 16 colors then you can use "\e[31m" to set the foreground color and "\e[41m" for background color.

Also you can use \033 instead of \e, for example \033[31m

echo -e '\e[31m aa'

Oupout: aa

echo -e '\e[41m aa'

Oupout: aa

It is easy, right? 31 ~ 38 are for foreground color, and 41 ~ 48 are for background color.

Set 256 colors

echo -e '\e[38;5;160m aa'

Oupout: aa

echo -e '\e[38;5;29m aa'

Oupout: aa

We have 256 color it is 0 ~ 255. That is hard to remember all of these number's meaning.

PS1

PS1 means prompt, it display information before your command line input. My above terminal image shows the PS1 is " dev usr > local > share ". I could input "\w" to display my current path and "\h" to display login account.

A example to change prompt by export PS1. \e[0m means reset the following text's color setting.

export PS1="\e[38;5;29m \w \e[38;5;160m \h > \e[0m"

Output: /usr/local/share root >

Tmux

tmux is a terminal window manager, also support multi panel in the same window. Here I will show you how to modify the status-bar color. We use RGB color format to modify the theme. Tmux will auto transform the RGB to terminal 256 color.

All styles which you can modify are status-bg, status-fg, status-right, status-left, window-status-format, window-status-current-format, window-status-last-bg, window-status-last-fg, window-status-separator.

Basic background and foreground:

• background: set -g status-bg '#585858'
• foreground : set -g status-fg '#d0d0d0'

We use "status-left" to set a text with color before status bar, and "status-right" fro the right of status bar. #S means the window title. So I set the font color of title to be "ffffd7". Also I add a symbol "►" to separate the status-left with window title. (You can install the Powerline font for better view.)

• status-left: #[fg=#ffffd7]#S#[fg=#ffffd7,bg=#585858] ►'

set -g status-bg '#585858'
set -g status-fg '#d0d0d0'
set -g status-right ''
set -g status-left '#[fg=#ffffd7]#S#[fg=#ffffd7,bg=#585858] ►'
set -g status-left-length 10
set -g window-status-format " #I #W #[fg=#9e9e9e,bg=#585858] ►"
set -g window-status-current-format "#[fg=#000000,bg=#ffffd7] #I #W #[fg=#ffffd7,bg=#585858] ►"

Screen

Screen is a old, simple but good enough to be a terminal window manager. As I know, it do not be maintained any more, so just forget any bugs you meet in screen. The screen defined some unreadable formats for express the window status.

screen color definition

Capital letter means bright, Capital b means bright blue, Capital w means bright white.

• caption: It is the color setting of window bar. %-w DEV %t %+wThe "%-w" means previous window, %w means current window, %+w means next window, %t means window title. So the window bar will be :

"＜previous window1＞ ＜previous window2＞ DEV ＜current window＞ ＜next window＞ ..."

• I want to set the color of current window to be white foreground and blue background, so I can set %-w%{= bW}%t%{-}%+w, %{= bW} means black and white, %{-} means reset color, I want to keep the original fore / background color in all of next windows .

caption always "%{= kw} %-w%{= bW}%n %t%{-}%+w"
attrcolor b "R"
termcapinfo xterm 'Co#256:AB=\E[48;5;%dm:AF=\E[38;5;%dm'
termcapinfo xterm-256 'Co#256:AB=\E[48;5;%dm:AF=\E[38;5;%dm'

The document of screen setting: https://debian-administration.org/article/560/An_introduction_to_the_visual_features_of_GNU_Screen

ls colors

You have to add a alias ls --color=auto for enable color schema. It will give you a default style, then we could export LS_COLORS to change the color schema. Using di=38;5;26 to modify the directory color to be blue when you execute "ls".

Set color for specific extension by *.jpg=38

LS_COLORS='no=00:fi=00:di=2;34:ln=36:pi=33:so=35:do=35:bd=33:cd=33:or=31:ex=32:*.cmd=32:*.exe=32:*.com=32:*.btm=32:*.bat=32:*.sh=32:*.csh=32:*.tar=31:*.tgz=1;31:*.arj=31:*.taz=31:*.lzh=31:*.zip=1;30:*.z=31:*.Z=31:*.gz=1;31:*.bz2=31:*.bz=31:*.tz=31:*.rpm=36:*.cpio=31:*.jpg=1;30:*.gif=1;30:*.bmp=1;30:*.xbm=35:*.xpm=35:*.png=1;30:*.jpeg=1;30:*.tif=35:*.h=1;35:*.jar=35:*.php=32:*.inc=32:*.sjs=32:*.js=32:*.sql=32:*.html=36:*.htm=36:*.xml=36'
LS_OPTIONS="-b --color=auto"
export LS_COLORS
export LS_OPTIONS

grep

GREP_COLORS='ms=01;31:mc=01;31:sl=:cx=:fn=35:ln=32:bn=32:se=36'
export GREP_COLORS

ag

ag is the silver search tool, it supports 256 colors.

alias ag='ag --color-line-number "38;5;241" --color-match "38;5;166" --color-path "38;5;29" '

vim

• https://github.com/puritys/dotfiles/blob/master/vim/colors/mystyle_white.vim

Chrome SSH Client

• https://github.com/puritys/dotfiles/blob/master/assets/ssh.css

FZF

You have to modify the style of fzf if you like to use it.

Here is the document of fzf color. It only supports 16 kind of colors.

• https://github.com/junegunn/fzf/wiki/Color-schemes

export FZF_DEFAULT_OPTS='
  --color light,hl:124,fg+:242,bg+:230,hl+:33
  --color info:52,prompt:245,spinner:245,pointer:245,marker:208
'

Modify Fonts

If your installed font is not match with your terminal style. Try the following tools to modify font by yourselves. Modify font is easier than find a compatible font from a website. I only spend couple hours to changed the SF Mono and Powerline font for fulfill my personal requirements.

• http://www.glyphrstudio.com/online/
• https://everythingfonts.com/otf-to-woff
• https://everythingfonts.com/ttf-to-woff
• https://everythingfonts.com/woff-to-otf

My Font

I change the height of SF Mono font to be same as Monaco, because the Chrome SSH Client do not support to change the line-height. When I use SF Mono font, each row crowd together.

• https://github.com/puritys/dotfiles/blob/master/assets/CustFont-SFMono.woff2
• https://github.com/puritys/dotfiles/blob/master/assets/CustFont-SFMono-Powerline.woff