├── README.md
├── screenshot.png
└── transparency.less


/README.md:
--------------------------------------------------------------------------------
  1 | # How To Achieve Atom Editor Transparency
  2 | 
  3 | 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.
  4 | 
  5 | This has been tested on both macOS and Ubuntu 14.04 desktop, for Atom versions 1.0 up through 1.11.
  6 | 
  7 | <p align="center">
  8 |   <img src="screenshot.png" />
  9 | </p>
 10 | 
 11 | 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](https://github.com/atom/atom), add the following to `options`:
 12 | 
 13 | ```coffeescript
 14 | frame: false
 15 | transparent: true
 16 | ```
 17 | 
 18 | in `src/browser/atom-window.coffee` (pre-v1.9) or `src/main-process/atom-window.coffee` in versions 1.9+,
 19 | 
 20 | changing this:
 21 | 
 22 | ```coffeescript
 23 | options =
 24 |   show: false
 25 |   title: 'Atom'
 26 |   backgroundColor: "#fff"
 27 |   ...
 28 | ```
 29 | 
 30 | to this:
 31 | 
 32 | ```coffeescript
 33 | options =
 34 |   frame: false
 35 |   transparent: true
 36 |   show: false
 37 |   title: 'Atom'
 38 |   #backgroundColor: "#fff"
 39 |   ...
 40 | ```
 41 | 
 42 | Note `backgroundColor` is commented out.
 43 | 
 44 | Then run:
 45 | 
 46 | ```sh
 47 | ./script/clean && ./script/build
 48 | ```
 49 | 
 50 | Refer to the official [build guides](https://github.com/atom/atom#building) for additional instructions if necessary. You may want to build a debian package, for example.
 51 | 
 52 | This can take awhile, but once complete, fire up Atom.
 53 | 
 54 | **On linux, add an additional `--enable-transparent-visuals` flag while starting atom.**
 55 | 
 56 | **In Atom v1.7+, atom must be started with an additional `--disable-gpu` flag.** Otherwise, there will be a lot of UI flickering.
 57 | 
 58 | Open up your editor LESS stylesheet (`⌘-shift-p` or `ctrl-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.
 59 | 
 60 | ```css
 61 | html, html * {
 62 |   background: rgba(0, 0, 0, 0) !important;
 63 | }
 64 | 
 65 | atom-pane, atom-panel, atom-notification {
 66 |   background: rgba(0, 0, 0, 0.5) !important;
 67 | }
 68 | 
 69 | atom-overlay > * {
 70 |   background: rgba(0, 0, 0, 0.9) !important;
 71 | }
 72 | 
 73 | atom-text-editor::shadow {
 74 |   .cursor-line {
 75 |     background-color: rgba(0, 0, 0, 0.2) !important;
 76 |   }
 77 |   .selection .region {
 78 |     background-color: rgba(0, 0, 0, 0.2) !important;
 79 |   }
 80 |   .gutter {
 81 |     background-color: rgba(0, 0, 0, 0) !important;
 82 |   }
 83 | }
 84 | ```
 85 | 
 86 | In the CSS above, this works pre-v1.9:
 87 | 
 88 | ```css
 89 | html * {
 90 |   background: rgba(0, 0, 0, 0) !important;
 91 | }
 92 | ```
 93 | 
 94 | but for v1.9+, this must be:
 95 | 
 96 | ```css
 97 | html, html * {
 98 |   background: rgba(0, 0, 0, 0) !important;
 99 | }
100 | ```
101 | 
102 | That's it--pretty simple!
103 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ForrestKnight/atom-transparency/4905a76c23b3a548f04400543ec4f6c5cd8be390/screenshot.png


--------------------------------------------------------------------------------
/transparency.less:
--------------------------------------------------------------------------------
 1 | html, html * {
 2 |   background: rgba(0, 0, 0, 0) !important;
 3 | }
 4 | 
 5 | atom-pane, atom-panel, atom-notification {
 6 |   background: rgba(0, 0, 0, 0.8) !important;
 7 | }
 8 | 
 9 | atom-overlay > * {
10 |   background: rgba(0, 0, 0, 0.9) !important;
11 | }
12 | 
13 | atom-text-editor::shadow {
14 |   .cursor-line {
15 |     background-color: rgba(0, 0, 0, 0.2) !important;
16 |   }
17 |   .selection .region {
18 |     background-color: rgba(0, 0, 0, 0.2) !important;
19 |   }
20 |   .gutter {
21 |     background-color: rgba(0, 0, 0, 0) !important;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------