How to add overlay like in One Dark when viewing the command palette


#1

Hi,

I was wondering how I can add the dark transparent overlay to all of atom when viewing the command palette with the One Dark theme to one of the themes I"m working on. I’ve been trying to dig through the CSS of One Dark UI but can’t seem to find it.

You can see in the image from below when you activate the command palette the rest of atom gets a dark transparent fill over it allowing the focus to be more on the command palette.


#2

@simurai (or one of the other CSS experts), can you answer this?


#3

Not a CSS expert but here is what I put in my stylesheet to get the desired effect. It could probably be cleaned up, since I just grabbed it from the theme and replaced some variables with hardcoded values.

atom-panel.modal:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: hsla(220, 10%, 5%, .5);
    backface-visibility: hidden; // fixes scrollbar on retina screens
    -webkit-animation: overlay-fade .1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#4

Thank you, that works great.


#5

Backdrop in the One themes is defined here: https://github.com/atom/one-dark-ui/blob/master/styles/modal.less#L90-L106