[解決済み] Atomエディタで透明な背景を設定する方法は？

質問

atomのテキストエディタを使っていて、UIをカスタマイズしようとしています。設定に不透明度を変更するオプションが見当たらないのですが、styles.lessファイルで何を変更すればいいのか、どなたか教えてください。私はCSSをあまり知りません。以下は、デフォルトのstyles.lessファイルです。

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}

解決方法は？

スタイルシートの変更だけでは透過させることはできません。atomをソースから再構築し、初期オプションを変更する必要があります。 https://github.com/transcranial/atom-transparency

アトムは電子アプリ( https://electronjs.org/ ) で、アプリを透過させるためには明示的にオプションを設定する必要があります。そのためには frame: false と transparent: true .

これが完了し、ビルドが完了したら、関係するすべてのレイヤーを変更し、各レイヤーの色にアルファチャンネルを追加して何らかの透明度を設定することができます。

html, atom-pane, ... {
  background-color: hsla(180, 24%, 12%, .5);
}