Ricing your *nix desktop | Terminal emulators

In the previous episode we set up xorg and the bspwm window manager. All the interaction has been done from the tty until now but in order to communicate with the computer once we start our x-session, we need a terminal emulator program that gives us access to the shell.

The terminal emulator used for this guide is the rxvt-unicode but almost every terminal emulator follows the rule of being tweaked inside a config file.

Install and config a Terminal Emulator

Before doing any other thing, grab the terminal emulator from your package manager.

# install_command urxvt

Once it's installed we can add its name to our previous dotfiles.

At the .xinitrc file we can add the following after the comment:

# ~/.xinitrc

# launch a terminal by default
urxvt &

At the sxhkdrc file we can remove the comment in the terminal emulator instruction:

# ~/.config/sxhkd/sxhkdrc

# terminal emulator   
super + Return    
    urxvt

— Now we can jump into our desktop (finally!) and start configuring some last things. In the tty type:

$ startx

And if everything went right, you should have an annoying white terminal being draw in your screen, like this:

The terminal emulator is going to be the most used program in our custom desktop, specially with tiling window managers. It's important to make our terminal a comfy place so let's "fix" it.

Previously we've created a dotfile in our $HOME directory named .Xresources. This file is the main tool to tweak your terminal emulator.

Since the configuration of a terminal can end up being a long list of options and you maybe opt for add more than one terminal, or redirect other programs to read the .Xresources file for configuration, let's keep it tidy since the beggining.

Remember that directory structure from ep.I? We created a directory named .config. Let's make a file inside there named urxvt and open it to add content.

Just for refreshing, type your text editor's name followed by the file's path in order to open it. $ vim .config/urxvt

Here's an example of a basic urxvt dotfile:

! ~/.config/urxvt

URxvt.termName:         rxvt-256color
URxvt.cursorBlink:      true
URxvt.scrollBar:        false
URxvt.internalBorder:   8
URxvt.font:             xft:Hack:size=10, Hack Regular:style=Regular
URxvt.boldFont:         xft:Hack:size=10, Hack:style=Bold
URxvt*background:       #000000
URxvt*foreground:       #ffffff

As you can notice there are some parameters that can be shared with other programs, like fonts and colors. Let's split things a bit more and actually make a separate file for both the color and the font values in the .config directory.

$ touch .config/{colors, fonts}

Color configuration

Although it's supposed we have 256 colors available we only use 16 colors to rice our terminal emulators' style, plus 3 special (background, foreground and cursorColor).

       black  red  green  yellow  blue  magenta  cyan  white
dark      00   01     02      03    04       05    06     07  
light     08   09     10      11    12       13    14     15

Colors from 00 - 07 are used for regular text and colors from 08 - 15 are used for bold text.

The color values are hexadecimal numbers. Jump into the colors' file and fill up with something similar to this:

! ~/.config/colors

! nordic theme
! special   
*.foreground: #d8dee8   
*.background: #2f343f   
*.cursorColor: #b48ead  
  
! black   
*.color0 : #4b5262   
*.color8 : #434a5a    

! red   
*.color1 : #bf616a   
*.color9 : #b3555e  
  
! green   
*.color2 :  #a3be8c   
*.color10 : #93ae7c    

! yellow   
*.color3 :  #ebcb8b   
*.color11 : #dbbb7b    
   
! blue   
*.color4 :  #81a1c1   
*.color12 : #7191b1    
   
! magenta   
*.color5 :  #b48ead   
*.color13 : #a6809f    
   
! cyan   
*.color6 :  #89d0bA   
*.color14 : #7dbba8    
   
! white   
*.color7 :  #e5e9f0   
*.color15 : #d1d5dc

— We have to remove our color values from the urxvt config file and include this new color reference. Including resources from a different file follows a C-like syntax:

#include "<path>"

On the very top of our urxvt file type:

#include "colors"

Open the .Xresources file and write this at the begining of the file:

! ~/.Xresources

#include ".config/urxvt"

Font Configuration

With the fonts configuration it's pretty much the same. Let's create a fonts config file inside the .config directory and open it:

$ touch .config/fonts

There are two types of fonts available to use: xft fonts and bitmap fonts.

• xft fonts allow printing nice fonts and scale them the way you want.
• bitmap fonts are the tty way to print fonts. They're fixed pixeled size fonts that load fast.

Regardless of most posts on the net, bitmap fonts can look awesome (like the example image above).

xft fonts follow the next syntax scheme to be defined:

xft:<font_name>:size=<font_size>

bitmap fonts have a longer syntax scheme:

-fndry-fmly-wght-slant-sWdth-astyl-pxlsz-ptSz-resx-resy-spc-avgWdth-rgstry-encdng

Inside our fonts config file let's define some variables to use in an xft font:

! ~/.config/fonts

! remember to install the font first (in this example the font name is "hack")
#define fontName Hack
#define fontSize 9

#define urxvtFontRegular xft:fontName:size=fontSize, fontName Regular:style=Regular

#define urxvtFontBold xft:fontName:size=fontSize, fontName:style=Bold

! this variables set antialias and dpi for xft fonts
Xft.antialias 1
Xft.dpi       96

In our urxvt config file we have to tell the terminal emulator to look for this variables in order to print our font. Open the file and change the values:

! ~/.config/urxvt

#include "colors"
#include "fonts"

URxvt.termName:         rxvt-256color
URxvt.cursorBlink:      true
URxvt.scrollBar:        false
URxvt.internalBorder:   8
URxvt.font:             urxvtFontRegular
URxvt.boldFont:         urxvtFontBold

This way each time you need to change any value, try a new color scheme or a new font, things are in the right place and only need to be changed once.

Now in order to update our .Xresources file to read the colors, the fonts and the terminal emulator config we need to update .Xresources using xrdb, the X server resource database.

$ xrdb -load ~/.Xresources

After typing the instruction close the actual terminal and re-launch it to see the changes.

If you want to experiment with colors there are programs using k-means clustering that generate color schemes from images like colorz from metakirby5 on Github.

Another great tool to find predominant colors in an image is urnn written in pure C.