Atomを痛エディタにする話

このへんとかが参考になるかな、と思ってやってみたら意外とうまくいかなかった。paneを分割してもTreeViewが出ても全体に背景が広がるようにしてみた。

テーマは Atom Light / One Light を想定。

atom-panel.bottom
{
    background-color: rgba(233, 233, 233, .85);
}

atom-pane, atom-panel {
    background-color: rgba(255, 255, 255, .75) !important;
}

atom-pane-resize-handle {
    background-color: rgba(255, 255, 255, .55);
}

.tree-view
{
    background-image: none !important;
    background-color: rgba(255, 255, 255, .4);
}

.tab-bar
{
    background-image: none;
    background-color: rgba(255, 255, 255, .35);
}

atom-text-editor, .tab-bar .tab, .tab-bar .tab:before, .tab-bar .tab:after, .tab-bar:after,
 .tool-panel
{
    background: none;
}

atom-workspace
{
    background-image: url("/ここに/画像までの/フルパス/を/指定しろ.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

// Editor
atom-text-editor::shadow .selection .region
{
 background: rgba(233, 233, 233, .7);
}

atom-text-editor.is-focused::shadow .selection .region
{
 background: rgba(244, 244, 233, .75);
}

// Settings
.settings-view .package-card, .settings-view select.form-control
{
 background-color: rgba(255, 255, 255, .4);
}

.settings-view .package-card:hover
{
 background-color: rgba(255, 255, 255, .8) !important;
}

.settings-view .config-menu
{
 background-color: rgba(255, 255, 255, .3);
}

atom-text-editor[mini]
{
 background-color: rgba(255, 255, 255, .3) !important;
}

atom-pane-container atom-pane .item-views .pane-item
{
 background: none;
}

// Term2
.terminal { background: none !important; }

これをatom://.atom/styles.lessに追記するとうまくいくぞ。

白背景のデザインを想定しているので、黒背景の場合は別途自分で調整してくださいな。

実際に適用するとこんなかんじになる。画像にはないけど、選択してないタブは画像が透過されるぞ。

ほんとうは!importantとかは使うべきでないんだが、クラスを指定させてくれなかった（なんか.paneとか使うと怒られる）ので仕方なくこうすることに。

参考にしてみてください。

Tweet