How To Achieve Atom Editor Transparency

In atom, there is no easy config (yet) to set window or background transparency as you would in iTerm or TextMate. Here's a straightforward guide on how to achieve transparent window awesomeness. I'm running Mac OSX.

Atom must be built from source with 2 additional lines of code. This makes Atom run as a frameless window which allows transparency to be enabled within Electron. After cloning or forking Atom, insert these two lines in src/browser/atom-window.coffee,

changing this:

options =
  show: false
  title: 'Atom'
  'web-preferences':
    'direct-write': true

to this:

options =
  frame: false
  transparent: true
  show: false
  title: 'Atom'
  'web-preferences':
    'direct-write': true

Then run:

./script/clean

./script/build

This can take awhile, but once complete, fire up Atom, open up your editor LESS stylesheet (⌘-shift-p, then Application: Open Your Stylesheet), and add the following CSS. This is a basic guide - you can experiment with your own settings to get the effect you want. For example, to avoid text-on-text collisions in the autocomplete popups, I set atom-overlay > * to near-complete opacity.

html * {
  background: rgba(0, 0, 0, 0) !important;
}

atom-pane, atom-panel, atom-notification {
  background: rgba(0, 0, 0, 0.5) !important;
}

atom-overlay > * {
  background: rgba(0, 0, 0, 0.9) !important;
}

atom-text-editor::shadow {
  .cursor-line {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .selection .region {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .gutter {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}

That's it, pretty simple!