Atomに愛着を持つため痛エディタにしてみた

概要

Atomに愛着を持つために、痛エディタ化してみました。Atomの左右にそれぞれお気に入りのキャラを表示し、Tree-ViewやMinimapにも同じような明るさで画像を表示するよう調整しました。

環境

• Windows 10 (Update 1511)

• Atom 1.2.4

やったこと

style.less をいじることで自由にレイアウトがカスタマイズできるようなので、様々な記事を参考にしてこのようなカスタマイズをしました。
このスタイルを適用すると、エディタの左右にそれぞれの画像が表示され、tree-viewやminimapにも同じ明るさで表示されるはずです。著作権等の関係で画像はお見せできませんが、画面を分割して使うとフォーカスが当たっていない側のキャラクターが浮き出てくる感じになって私はとても幸せです。

以下がstyle.lessに追加したものです。@background-filter, @minimap-filter, @tree-view-filterのRGB値は、お使いのテーマに合わせて調整してください。

@background-left: url("left-image.png");
@background-right: url("right-image.png");
@background-image-opacity: 0.5;
@background-filter: rgba(39, 40, 34, @background-image-opacity);
@minimap-filter: rgba(39, 40, 34, 1-(1-@background-image-opacity)*(1-@background-image-opacity));
@tree-view-filter: rgba(39, 40, 34, 1-sqrt(1-@background-image-opacity));

// tree-view
.tree-view, .tree-view-scroller, .tree-view-resizer,
atom-panel.panel-left {
background: @tree-view-filter;
}
.tree-view li.directory {
background: @background-filter;
}
atom-panel-container.left {
background: @background-left no-repeat left bottom;
}

// editor
atom-workspace {
background-image: @background-left, @background-right;
background-repeat: no-repeat, no-repeat;
background-position: left bottom, right bottom;
}
atom-text-editor {
background-color: @background-filter;
}
atom-workspace-axis {
.pane {
opacity: 0.5;
}
.active {
opacity: 1.0;
}
}

// mini-map
atom-text-editor atom-text-editor-minimap,
atom-text-editor::shadow atom-text-editor-minimap {
background: @minimap-filter;
}

参考にした記事

• 流行にのってatomを痛エディタにしてみた
• Atomを痛エディタにする話 | 愛のらくがき帳
• Atomエディタの背景画像を設定するのに苦労したこと【Windows】 - Qiita