Atomを透過する方法@Mac OS
Atomを透過してみた際のメモ。
参考サイト
不適切な引用等ありましたらご連絡ください。
MacOSでAtomを透明化する時のメモ
node.jsを始めました。
nvmを使ったNode.jsのインストール
gitリポジトリからnvmをDLする。
git clone git://github.com/creationix/nvm.git ~/.nvm
nvmを起動する。
source ~/.nvm/nvm.sh
node.jsをインストールする。
nvm install 6.10.3
Atomのインストール
gitからAtomをcloneする。
git clone https://github.com/atom/atom.git
Atomの設定を変更
ディレクトリ移動する。
cd atom
atom-window.jsを編集する。
vi src/main-process/atom-window.js
atom-window.js
const options = {
show: false,
title: 'Atom',
tabbingIdentifier: 'atom',
transparent: true, //追加
webPreferences: {
ビルドする。
./script/build
ビルドが完了するとAtom Devが出来上がる。(アイコンは青)
Atomを起動して"Preferences"で設定を開いて、"Core"の"Title Bar"を"custom"に変更する。
style.lessの設定
style.less
@import "ui-variables";
html, html * {
background: rgba(0, 0, 0, 0.0) !important;
}
.title-bar {
background-color: rgba(230, 230, 230, 1) !important;
color: rgba(50, 50, 50, 1);
}
atom-pane, atom-panel {
background: rgba(0, 0, 0, 0.85) !important;
}
// atom-notificationの設定
atom-notification.fatal {
.notification(@text-color-error; @background-color-error);
}
atom-notification.error {
.notification(@text-color-error; @background-color-error);
}
atom-notification.warning {
.notification(@text-color-warning; @background-color-warning);
}
atom-notification.info {
.notification(@text-color-info; @background-color-info);
}
atom-notification.success {
.notification(@text-color-success; @background-color-success);
}
.notification(@txt; @bg) {
.content {
color: darken(@txt, 40%) !important;
background-color: lighten(@bg, 25%) !important;
.detail.item {
background-color: lighten(@bg, 30%) !important;
}
.btn {
color: rgba(255, 255, 255, 1) !important;
background: @bg !important;
}
}
a {
color: darken(@txt, 20%) !important;
}
code {
color: darken(@txt, 40%) !important;
background-color: desaturate(lighten(@bg, 18%), 5%) !important;
}
&.icon:before {
color: lighten(@bg, 36%) !important;
background-color: @bg !important;
}
.close-all.btn {
border: 1px solid fadeout(darken(@txt, 40%), 70) !important;
color: fadeout(darken(@txt, 40%), 40%) !important;
text-shadow: none !important;
&:hover {
background: none !important;
border-color: fadeout(darken(@txt, 40%), 20%) !important;
color: darken(@txt, 40%) !important;
}
}
}
atom-text-editor {
.cursor-line {
// 現在行の背景色
background-color: rgba(0, 0, 0, 0.2) !important;
}
.selection .region {
// 選択範囲の背景色
background-color: rgba(60, 80, 180, 0.8) !important;
}
.gutter {
// 行番号の背景色
background-color: rgba(0, 0, 0, 0.3) !important;
}
.trailing-whitespace {
// 行末のスペース
background-color: rgba(100, 200, 200, 0.4) !important;
}
.highlight .region {
// 検索文字列
background-color: rgba(0, 80, 190, 0.7) !important;
}
}
// アクティブペインと非アクティブペインを透明度で区別
.pane {
opacity: 0.88;
&.active {
opacity: 1.0;
}
}
// アクティブタブと非アクティブタブの色分け
.tab {
background: rgba(50, 50, 50, 0.0) !important;
&.active {
background: rgba(200, 200, 200, 0.2) !important;
}
}
// タブをポイントすると表示されるフルパスの背景
.tooltip {
.tooltip-inner {
background-color: rgba(100, 130, 200, 0.8) !important;
}
}
// 補完ウィンドウの背景色
autocomplete-suggestion-list {
background-color: rgba(0, 0, 0, 0.7) !important;
}
これで透過されるはず。
Author And Source
この問題について(Atomを透過する方法@Mac OS), 我々は、より多くの情報をここで見つけました https://qiita.com/Ke1/items/b30abd5e1092f7e9749f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .