このへんとかが参考になるかな、と思ってやってみたら意外とうまくいかなかった。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とか使うと怒られる)ので仕方なくこうすることに。
参考にしてみてください。
ピンバック: 新・オタクAtomの作り方 | 愛のらくがき帳