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!