Can't change color of status bar, please help!


#1

I searched for a good looking neutral grey theme for hours w- no avail, so i decided to modify the Atom Material UI theme.

But i’m pulling my hair out and can’t get the status bar to change color. I tried everything in the theme folder, including status-bar.less.

I tried overriding in the styles.less, and i can add a border or set display:none, but no matter what i try it will not change the background-color.

.status-bar {
background: black;
}

^^does not work, not matter the color i choose.

I hope someone can help me - i wasted a whole day on this…


#2

The styles.less code works for me.

.status-bar {
  background: black;
}

You can access the dev tools via View -> Developer -> Toggle Developer Tools. You can find the status-bar under body > atom-panel-container.footer > atom-panel.footer. What style rules are taking priority?


#3

Sorry, i don’t understand the developer tools. But i found the element at the location you described and made a screenshot of the Styles tab. Link: http://imgur.com/omnV8Iy

Is it the !important definition that wreaks havoc? Were does it come from?

EDIT: I tried
.status-bar { background: black !important; }
and it worked!


#4

I recommend playing around with them (mainly the source browser), and Google has plenty of documentation about them.

Is it the !important definition that wreaks havoc?

!important can wreak havoc, but it’s not the culprit here. In this case, it was the .panel-contrast status-bar selector, which took priority over status-bar as well as .status-bar because it was more specific. !important (which I always find weird, because ! represents “not” in logic notation) is a keyword that bumps that property up to the top of the priority pile even if it violates specificity. I tend to avoid using it because I feel that it’s cleaner to be as specific as possible, but in this case it’s a fine way of resolving the issue.

(Here’s another page about specificity, which is less informative but funnier.)


#5

Thank you for the help. Now i have two neutral gray themes (One Dark & Atom Material) and i’m quite happy with the results. Off to CSS coding then… :slight_smile:


#6

If you ever have spare time and want a project, I highly suggest taking a crack at making your own theme. There are a lot of options out there that are good for different people, but it’s rare to find a perfect color scheme unless you make it yourself.