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

この記事について

Atomは自分でビルドすれば透明化することができます。ググってみればやり方を説明したサイトが見つかると思いますが、実際にやってみるとstyle.lessの設定が思ったより難しいです。また、Macだとタイトルバーが消えたりして面倒です。

参考になるサイトの数が少なかったり、最新の情報でなかったりしたので、設定方法をメモとして残しておきます。

環境

macOS Sierra
Atom 1.20.0
node.js 6.10.3

ビルドの準備(nvmとnode.jsのインストールなど)

自分でAtomをビルドする必要がありますが、そのためにはNode.jsとそのバージョン管理ソフトnvmが必要になります。
公式のビルドガイドはこちら (https://github.com/atom/atom/blob/master/docs/build-instructions/macOS.md)

brew install nvm
nvm install 6.10.3
npm install -g npm
xcode-select --install

Atomのビルド

githubからAtomをクローンして、src/main-process/atom-window.coffeeを編集します。

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

src/main-process/atom-window.coffeeのclass AtomWindow-constructor-optionsの中にtransparent: trueを指定します。

options =
  show: false
  title: 'Atom'
  transparent: true  # <- この行を追加します
  'web-preferences':

編集後、下記のコマンドでビルドします。--installオプションをつければインストールされます。

./script/build

タイトルバーを表示させる

「Atom」→「Preferences」で設定画面を開き、「Core」メニューの「Title Bar」を"custom"に変更します。この設定をしないとタイトルバーが無色透明になり非常に不便です。設定しなくてもタイトルバーのあるべき場所をクリックしたりドラッグアンドドロップすることはできます。

style.lessの設定

htmlで透明度を0にしておくと、調整対象がatom-pane, atom-panelの透明度の設定一つですみます。両方を0より大きくしておくと、調整が難しくなります。

atom-notificationはエラーメッセージやgit-plusなどの結果を表示するポップアップですが、背景色を指定しないと、真っ黒になり見づらくなります。
元パッケージのスタイルファイルからコピーして.contentを変更し、!importantを付け足しています。

筆者はvim-mode-plusを使っていてカーソルが表示されなくない問題が起きたのですが、Atomの標準パッケージではないので、この記事からは割愛します。対処法はこちらに書いたので、こちらを参照してください。

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;
}

追加でインストールしたプラグインなどは個別に設定が必要になるかもしれませんが、Devloperモードを駆使して頑張ってみてください。