いまさらながらAtomのStyle.lessとか設定してみる

やりたいこと

・背景に画像を設定
・platformio-ide-terminalの右下に別画像(背景)の表示
・コード実装時にモチべを上げたい
・自宅用はいっそのこと痛く仕上げる
・PCはMacが...とはいえ仕事場のWin率も馬鹿にならないので、どちらでも対応できるようにしたい
・新しいPCにAtomを入れるときに同じような設定を行いたい（設定に時間をかけたくない）

参考サイト様

Atomエディタの背景画像を設定するのに苦労したこと【Windows】
Github製エディタ ATOMをカスタマイズしてみた

Style.less

Setting　⇒　Themes　⇒　your stylesheetといった順で開ける。
Settingは"Command"+","(Windowsは"Ctrl"+",")

style.less

# Windowsの場合
@backgournd-image: url('/Users/KTakata/Pictures/etc/bk5.jpg') no-repeat left/contain, url('/Users/KTakata/Pictures/etc/bk5.jpg') no-repeat right/contain;
@background-icon: url('/Users/KTakata/Pictures/etc/bk0.png') no-repeat fixed right bottom;

# MacOSの場合
@backgournd-image:
url('/Users/KTakata/Pictures/bk/dgdg875_Hatsune_Miku-875204.png') no-repeat left/contain,
url('/Users/KTakata/Pictures/bk/dgdg875_Hatsune_Miku-875204.png') no-repeat right/contain;
@backgournd-image-terminal:
url('/Users/KTakata/Pictures/bk/test02.png') no-repeat right bottom;

# 共通
@backgound-color-editor: rgba(0, 0, 0, 0.4);
@backgound-color-frame: rgba(0, 0, 0, 0.8);
@backgound-color-gutter: rgba(0, 0, 0, 0.6);
@font-family: 'Migu 1M', Migu 1M;
@font-family-ui: 'Meiryo UI';

.platformio-ide-terminal .xterm {
    background: @background-icon !important;

}

atom-workspace {
    background: @backgournd-image;
    font-family: @font-family-ui;

    atom-pane {
        // エディタの親
        background-color: transparent;

        atom-text-editor {
            // エディタ部分
            background-color: @backgound-color-editor;
            font-family: @font-family;
        }
    }

    .list-inline {
        // タブの背景
        background-color: @backgound-color-frame;
    }

    atom-panel {
        // 画面下部(スクロールバー)
        background-color: @backgound-color-frame !important;
    }
}

atom-text-editor::shadow {
    .gutter {
        // 行番号
        background-color: @backgound-color-gutter;
    }

    .scrollbar-content {
        // スクロールバー
        background-color: @backgound-color-gutter;
    }
}

atom-text-editor::shadow {
    .cursor {
        border-color: red;
    }

    .line.cursor-line {
        background: rgba(80, 50, 50, 0.4);
    }

    .trailing-whitespace {
        // background-color: red;
    }
}

.vertical {
    .pane {
        &.active {
            opacity: 0.9;
        }
    }

    .panes .pane-column > *,
    .panes .pane-row > * {
        border-right: 0;
    }
}
// style the background color of the tree view
.tool-panel {
    background-color: transparent;

    .tree-view {
        background-color: @backgound-color-editor;
        font-size: larger;
    }
}
// Styles for the markdown preview.
@backgound-color-md: rgba(0, 0, 0, 0.8);
@color-md: #cccccc;
@font-family-md: @font-family;

.markdown-preview.native-key-bindings {
    background-color: @backgound-color-md;
    color: @color-md;
}

.markdown-preview {
    blockquote,
    code,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    pre,
    tt {
        font-family: @font-family-md;
    }
}

設定反映後イメージ

platformio-ide-terminalを起動したときの右下に表示される画像がかわいい