How to customize status-bar on ui themes?


I have this code in my styles.less, based on another post that I made sometime ago (link):

atom-workspace {
  height: calc(~"100% - " (@component-line-height + 1px));

status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: dodgerblue;
  color: white;

I would like to migrate this from styles.less to a ui theme, and so I could share it to others. But I couln’t find how to do it :disappointed:

As you can see in the image below, the status-bar remains in the its original place, but that whole bottom line is ther, but empty :confused:

Thanks in advance


@alefragnani Is your UI theme already somewhere on GitHub to check out? Otherwise it’s kinda hard to tell why it doesn’t work.


Hi @simurai,

In fact I just noted that it is indeed working now :confused:.

I guess my problem was related to something that I left on my styles.less. because when I installed on a new machine yesterday, everything was fine. When I returned to my development machine and cleaned up, it worked :smile:

The theme was already published (Code Dark UI) and on GitHub if you wanna take a look.

Thanks for you help


I assume since it’s over a year old, you’ve figured it out. However I’m putting an answer here, for others who stumble over this entry searching for an answer:

it shoudl say .status-bar instead of status-bar