透明化する方法 [Atom Editor]

透明化する方法

リポジトリをクローンする。

$ git clone https://github.com/atom/atom.git
$ cd atom

src/main-process/atom-window.js を開いて options に transparent: true を加える。

const options = {
  show: false,
  title: getAppName(),
  transparent: true, // <-- Add this line
  tabbingIdentifier: 'atom',
  // ...
}

ビルドする。

$ ./script/build

style.less を編集する。

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

他に必要な要素を透明化したり、適宜スタイルを変更する。

Windows の場合、OS 標準のウィンドウ枠を非表示にするために、「title-bar-replacer」パッケージをインストールして有効化し、「Settings > Core > Title Bar」を hidden に設定する。

参考：

MacOS で Atom を透明化する時のメモ – Qiita

Atom で透過ウインドウにする – Qiita

Atom のウィンドウ透明化でのグラつき | teratail

transcranial/atom-transparency: How to make your Atom editor transparent – GitHub

options – main-process/atom-window.js at v1.57.0 – GitHub

atom/atom-window.js at v1.55.0 · atom/atom – GitHub

how to set up transparent background? – Stack Overflow

痛エディタ化する

参考：

痛エディターデビューしたら、仕事が捗るようになった | Ryo’s Hacks

Atom を数行のコードで痛エディタに変える | Ika Lab.

notifications

参考：

atom/notifications/styles/notifications.less – GitHub

title-bar-replacer

参考：

title-bar-replacer | Atom Packages [Official]