Atom editor how to set up transparent background?

Question

I'm using atom text editor and trying to customize the UI. I can't find the options for changing opacity in the setting, can anyone tell me what to change on the styles.less file? I don't know much CSS. Here is the styles.less file by default:

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}

Answer 1

You can't make it transparent by only change the stylesheet, you will have to rebuild atom from source and change some initial options, something like: https://github.com/transcranial/atom-transparency

Atom is an electron app (https://electronjs.org/), and you have to explicitly set the options to allow the app to be transparent. You have to set frame: false and transparent: true.

Once that is done and the build it's complete you can change all the layers involved and set some kind of transparency adding an alpha channel to the colors of each layer:

html, atom-pane, ... {
  background-color: hsla(180, 24%, 12%, .5);
}

Answer 2

For Linux users, you can do this using a compositor, transset-df, and devilspie - https://wiki.archlinux.org/index.php/Per-application_transparency