63297


Visual Studio Codeのテーマカラーを変更しています。

このツールバーの正式名称はなんでしょうか？

こちらのドキュメント内にプロパティが定義されていますか？

<https://code.visualstudio.com/api/references/theme-color>

[![スクショ](https://i.stack.imgur.com/pHkhK.png)](https://i.stack.imgur.com/pHkhK.png)


CC BY-SA 4.0
2020-02-23T06:52:47.747
63295
2020-02-23T08:57:18.607
2020-02-23T08:35:07.770
32986
37935
question
css vscode
VS Codeのツールバー？の名称


> このツールバーの正式名称はなんでしょうか？

公式ドキュメントの [User
Interface](https://code.visualstudio.com/docs/getstarted/userinterface)
などのページでは名称に関して言及されていませんが、開発者ツールを用いて当該箇所の HTML を読むと、 `aria-label` 属性に **Editor
actions** と書かれています。

[![画像の説明をここに入力](https://i.stack.imgur.com/xD8hb.png)](https://i.stack.imgur.com/xD8hb.png)

* * *

> こちらのドキュメント内にプロパティが定義されていますか？

少し読んでみましたが、見当たりませんでした。そのため、ここでは **[Custom CSS and JS
Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-
custom-css)** を使用した装飾の変更方法を紹介します。

まず、開発者ツールで装飾を変更したい要素の **選択子を決定** します。そして、それに対して Custom CSS and JS Loader によって
**装飾を適用** します。たとえば、 Split Editor Right のアイコンを変更し、アイコンの色を赤色にしたい場合には、以下のように CSS
を記述します。この結果として、以下の画像のような動作が得られます。

[code]

    .codicon-split-horizontal::before {
        color: #ff0000;
        content: "\eb78";
    }
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/hiXjz.png)](https://i.stack.imgur.com/hiXjz.png)

ここで、 editor actions のアイコンや背景色は祖先要素から **継承された値** や **初期値** (透明色) を使用しているため、
[`editorGroupHeader.tabsBackground`](https://code.visualstudio.com/api/references/theme-
color#editor-groups-tabs) のような一部のオプションであれば editor actions
に対しても有効である可能性はあります。しかし、それらは editor actions のみに対して適用される装飾ではないため制御しづらく、
**複雑な装飾には不向き** だと思います。

[![画像の説明をここに入力](https://i.stack.imgur.com/2whn3.png)](https://i.stack.imgur.com/2whn3.png)


CC BY-SA 4.0
2020-02-23T08:57:18.607
63297
2020-02-23T08:57:18.607
32986
63295
answer