Skip to content

Make your own theme.

gh0stzk edited this page Mar 2, 2024 · 1 revision

About this..

I will try to tell you the steps to add a new theme and along the way you will learn how my dotfiles work, it is nothing out of this world but if you do not have experience it can be a hassle to understand it the first time.

At this point I also do not intend to teach you how each configurable option of polybar, bspwm, etc works.

Polybar has a fantastic wiki, eww its documentation is a bit difficult to understand if you don't have prior knowledge, bspwm, well its documentation has a lot to be desired but you won't need it much either.

You will be able to have a new theme, but with the styles and designs that already exist in my dotfiles (at least rofi menus and eww). Of course, if you want to create a new rofi menu, or a new widget, you will have to read its documentation, learn some CSS, bash, yuck, etc.

Starting point

The first thing will be to copy the folder of some theme, I always copy the "emilia" folder as a starting point. Copy and paste it into the same rices directory and rename it whatever you want, in this case I will call it like the new theme I am making "daniela".

Now if you press Alt + Space bar. You'll notice that you now have a new theme listed in the theme selector, with the name Daniela but it still looks the same as Emilia.

Shot-2024-03-02-143419

Editing (Polybar)

It's time to start editing the theme, we will start by editing the polybar. I don't start by editing the Theme.sh file because some of the values ​​will depend on the polybar, so it is not necessary to edit that file yet.

The 2 files we will focus on, will be config.ini and modules.ini.

Open config.ini and here the world of things to edit begins and a lot will depend on your imagination, style, and how you want it to look.

I have decided that I do not want the width of the bar to be 90%, I want it to be 100% wide, without spaces on the sides and top.

To edit this part of the configuration we will change this part:

width = 90%     ;; Change this to 100%
height = 26     ;; Change to whatever

x-offset = 5%     ;; This needs to be 0 or leave in blank 
y-offset = 10     ;; same as above, need to be 0 because i dont wanna space in top, and
                  ;; emilia rice has a little space between top border and the bar.

I will leave like this:

width = 100%
height = 35

offset-x = 
offset-y = 

Some other values ​​I changed were:

radius = 0

border-top-size = 2px
border-bottom-size = 2px
border-color = ${color.grey}

And now my bar looks with 100% wide, no spaces, no rounded borders, and a top and bottom borders with 2px and with a gray color.

Shot-2024-03-02-151256

The colors

In this rice i have decided that the general color of the entire environment (terminal, polybar, eww, notifications, etc etc) will be Catppuccin Mocha.

Of course you can invent whatever you want, or use one of the many already made. Always try to get the colors from the official pages of the project, in this case catppuccin mocha has its official page.

At this point you have to replace the colors of Emilia's polybar with the new colors you want in your new Daniela theme. Look at the top of config.ini for the [color] part. Now you just replace the colors with the new ones, it doesn't have much work, it's just copy and replace.

At the end mine looks like this;

Shot-2024-03-02-154031

And my bar now looks like this.

Shot-2024-03-02-154221

Those rounded edges don't matter for the moment, they are vestiges of Emilia's bar, but in this new bar I won't use them.

Under construction, will be back soon, or not to soon.. but will back... :)