Changing the colours of the bar in i3

More INFORMATION on this topic can be found on

https://archmerge.com

This is a part of the config file that you change the most.
Next release it will be changed as well.
It is the part where you can make your personal touch.
Your personal theming.

I have made a personal theming project called Combustion you can follow as well.

Near the bottom you will need to change the hexadecimal colors. Colors can be found online or in gpick or in geany and many other tools.

Change one item at a time. For example make it red #FF0000 and then save the config file.
Reload i3 with Super + Shift + R

And learn what you have changed – did anything become Red. Sometimes it only becomes Red IF you do some kind of action.
We went quite into detail in the combustion article if you need a video tutorial on the matter.

colors {
background #000000
statusline #2E9AFE
separator #00000
#Bord #Back #Text
focused_workspace #2E9AFE #cccccc #2E9AFE
active_workspace #2E9AFE #444444 #2E9AFE
inactive_workspace #2E9AFE #000000 #2E9AFE
urgent_workspace #2E9AFE #000000 #900000
}
 }

# Black background with arch blue text and borders
# grey/white background - blue text for rest
# Windows decoration colors
# class border backgr. text indicator
client.placeholder #242424 #242424 #242424
client.background #242424 #242424 #242424
client.focused #4A4A4A #4A4A4A #e5e5e5 #4A4A4A
client.unfocused #4A4A4A #222222 #aaaaaa #222222
client.focused_inactive #4A4A4A #222222 #a9a9a9 #222222
client.urgent #4A4A4A #4A4A4A #f7f7f7 #4A4A4A

Using atom and an extra package called pigment helps you with the color codes.
That is explained here.