Hi, I'm Ahmet Yasin Uslu

I’m a passionate developer and this is my blog where i write about my thoughts, experiences, failures and everything else that i decide to write.

Disable inactive pane overlay in atom

Sometimes i have two components that does similar things and i want to compare them side by side. I use split pane feature in atom to do this but when you use split panes atom puts an overlay over inactive pane and i really hate that today i decided to disable that i googled if there is any option to do that. I couldn’t find anything on web so i decided to disable it myself. I love how you can easily customize atom using web developer tools since atom uses web technologies.

Anyway here is css to disable that:

/* disable inactive pane overlay */
atom-pane:not(.active) {
  opacity: inherit;

atom-pane-container atom-pane {
  background-color: inherit;

atom-pane:not(.active) atom-text-editor {
  background-color: inherit;

If you don’t know where to add this code, here is how:

  • Hit Ctrl + Shift + P ( Cmd + Shift + P for OSX )
  • Start typing open your stylesheet when you see Open Your StyleSheet hit Return
comments powered by Disqus