Atomを痛エディタにする話 ブラック編

前回、白っぽいカラーで痛エディタを作ってみたけど、黒っぽいのもやりたかったのでメモ。

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

// Black Style

// Background Image
atom-panel.bottom
{
    background-color: rgba(37, 37, 37, .85);
}

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

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

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

.tab-bar
{
    background-image: none;
    background-color: rgba(0, 0, 0, .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("/ここに/画像までの/フルパスを/入れると/幸せになれる.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

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

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

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

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

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

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

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

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

やるとこんな感じ。

めちゃよさげ。

ちなみに、ファイル分割したいとか思う方もいらっしゃると思うが、@import “/ここに/lessファイルまでの/フルパスを/指定する.less”;とやると外部のファイルをロードできるのでお試しあれ。

Tweet