Atomを透過する方法@Mac OS

Atomを透過してみた際のメモ。

参考サイト

不適切な引用等ありましたらご連絡ください。
MacOSでAtomを透明化する時のメモ
node.jsを始めました。

nvmを使ったNode.jsのインストール

gitリポジトリからnvmをDLする。
git clone git://github.com/creationix/nvm.git ~/.nvm
nvmを起動する。
source ~/.nvm/nvm.sh
node.jsをインストールする。
nvm install 6.10.3

Atomのインストール

gitからAtomをcloneする。
git clone https://github.com/atom/atom.git

Atomの設定を変更

ディレクトリ移動する。
cd atom
atom-window.jsを編集する。
vi src/main-process/atom-window.js

atom-window.js

const options = {
  show: false,
  title: 'Atom',
  tabbingIdentifier: 'atom',
  transparent: true, //追加
  webPreferences: {

ビルドする。
./script/build

ビルドが完了するとAtom Devが出来上がる。（アイコンは青）
Atomを起動して"Preferences"で設定を開いて、"Core"の"Title Bar"を"custom"に変更する。

style.lessの設定

style.less

@import "ui-variables";

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

.title-bar {
  background-color: rgba(230, 230, 230, 1) !important;
  color: rgba(50, 50, 50, 1);
}

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

// atom-notificationの設定
atom-notification.fatal {
  .notification(@text-color-error; @background-color-error);
}

atom-notification.error {
  .notification(@text-color-error; @background-color-error);
}

atom-notification.warning {
  .notification(@text-color-warning; @background-color-warning);
}

atom-notification.info {
  .notification(@text-color-info; @background-color-info);
}

atom-notification.success {
  .notification(@text-color-success; @background-color-success);
}

.notification(@txt; @bg) {
  .content {
    color: darken(@txt, 40%) !important;
    background-color: lighten(@bg, 25%) !important;
    .detail.item {
      background-color: lighten(@bg, 30%) !important;
    }
    .btn {
      color: rgba(255, 255, 255, 1) !important;
      background: @bg !important;
    }
  }

  a {
    color: darken(@txt, 20%) !important;
  }

  code {
    color: darken(@txt, 40%) !important;
    background-color: desaturate(lighten(@bg, 18%), 5%) !important;
  }

  &.icon:before {
    color: lighten(@bg, 36%) !important;
    background-color: @bg !important;
  }

  .close-all.btn {
    border: 1px solid fadeout(darken(@txt, 40%), 70) !important;
    color: fadeout(darken(@txt, 40%), 40%) !important;
    text-shadow: none !important;

    &:hover {
      background: none !important;
      border-color: fadeout(darken(@txt, 40%), 20%) !important;
      color: darken(@txt, 40%) !important;
    }
  }
}

atom-text-editor {
  .cursor-line {
    // 現在行の背景色
    background-color: rgba(0, 0, 0, 0.2) !important;
  }
  .selection .region {
    // 選択範囲の背景色
    background-color: rgba(60, 80, 180, 0.8) !important;
  }
  .gutter {
    // 行番号の背景色
    background-color: rgba(0, 0, 0, 0.3) !important;
  }
  .trailing-whitespace {
    // 行末のスペース
    background-color: rgba(100, 200, 200, 0.4) !important;
  }
  .highlight .region {
    // 検索文字列
    background-color: rgba(0, 80, 190, 0.7) !important;
  }
}

// アクティブペインと非アクティブペインを透明度で区別
.pane {
    opacity: 0.88;
    &.active {
        opacity: 1.0;
    }
}

// アクティブタブと非アクティブタブの色分け
.tab {
  background: rgba(50, 50, 50, 0.0) !important;
  &.active {
    background: rgba(200, 200, 200, 0.2) !important;
  }
}

// タブをポイントすると表示されるフルパスの背景
.tooltip {
  .tooltip-inner {
    background-color: rgba(100, 130, 200, 0.8) !important;
  }
}

// 補完ウィンドウの背景色
autocomplete-suggestion-list {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

これで透過されるはず。