https://github.com/transcranial/atom-transparency
How to make your Atom editor transparent
https://github.com/transcranial/atom-transparency
atom atom-editor
Last synced: 2 months ago
JSON representation
How to make your Atom editor transparent
- Host: GitHub
- URL: https://github.com/transcranial/atom-transparency
- Owner: transcranial
- Created: 2016-01-16T20:40:46.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-18T22:14:46.000Z (almost 7 years ago)
- Last Synced: 2024-05-22T16:32:33.938Z (about 1 year ago)
- Topics: atom, atom-editor
- Language: CSS
- Homepage:
- Size: 1020 KB
- Stars: 472
- Watchers: 12
- Forks: 48
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
This has been tested on both macOS and Ubuntu 14.04 desktop, for Atom versions 1.0 up through 1.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`:
```coffeescript
frame: false
transparent: true
```
in `src/browser/atom-window.coffee` (pre-v1.9) or `src/main-process/atom-window.coffee` in versions 1.9+,
changing this:
```coffeescript
options =
show: false
title: 'Atom'
backgroundColor: "#fff"
...
```
to this:
```coffeescript
options =
frame: false
transparent: true
show: false
title: 'Atom'
#backgroundColor: "#fff"
...
```
Note `backgroundColor` is commented out.
Then run:
```sh
./script/clean && ./script/build
```
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.
This can take awhile, but once complete, fire up Atom.
**On linux, add an additional `--enable-transparent-visuals` flag while starting atom.**
**In Atom v1.7+, atom must be started with an additional `--disable-gpu` flag.** Otherwise, there will be a lot of UI flickering.
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.
```css
html, 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;
}
}
```
In the CSS above, this works pre-v1.9:
```css
html * {
background: rgba(0, 0, 0, 0) !important;
}
```
but for v1.9+, this must be:
```css
html, html * {
background: rgba(0, 0, 0, 0) !important;
}
```
That's it--pretty simple!