## 経緯
[[Windows Terminal]]のタブの色が、モニタによってはアクティブなのか非アクティブなのかが分かりにくい。もう少しハッキリ異なる色に変更したい。
## 方法
[[Windows Terminal]]のテーマを自作して設定する。
<div class="link-card">
<div class="link-card-header">
<img src="https://learn.microsoft.com/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">learn.microsoft.com</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Windows ターミナルのテーマ設定</p>
</div>
<div class="link-card-description">
Windows ターミナル内でテーマ設定をカスタマイズする方法について説明します。
</div>
</div>
<img src="https://learn.microsoft.com/en-us/media/open-graph-image.png" class="link-card-image" />
</div>
<a href="https://learn.microsoft.com/ja-jp/windows/terminal/customize-settings/themes"></a>
</div>
`settings.json`に`theme`と`themes`を設定。
```json
{
"theme": "mamansoft",
"themes": [
{
"name": "mamansoft",
"window": {
"applicationTheme": "dark"
},
"tab": {
// アクティブなタブの背景色
"background": "terminalBackground",
// アクティブじゃないタブの背景色
"unfocusedBackground": "#00000033"
},
"tabRow": {
// Windows Terminalがアクティブなときのタブ裏側バーの背景色
"background": "#000000a0",
// Windows Terminalがアクティブではないときのタブ裏側バーの背景色
"unfocusedBackground": "#00000077"
}
}
],
}
```
### 具体例
少し複雑なので初見では理解が難しい。以下の設定を例にして画面を見た方がいい。
```json
"tab": {
"background": "terminalBackground",
"unfocusedBackground": "#ff000000"
},
"tabRow": {
"background": "#00ff00",
"unfocusedBackground": "#0000ff"
}
```
![[Pasted image 20231118213829.png|frame]]
*Windows Terminalがアクティブで2つ目のタブがアクティブ*
![[Pasted image 20231118213920.png|frame]]
*Windows Terminalが非アクティブで2つ目のタブがアクティブ*