# Objective

> The Threads Sidebar header and `ThreadItem` use `element.active` for
their selected and hover states instead of the theme colors intended for
those states. As a result, you can see a low text contrast ratio when
selecting a thread in some themes, such as
[Moonlight](https://github.com/Rick-VA/moonlight). According to a
comment in the existing code, the UI should use `element.active` for
interactions such as clicks, so it does not belong as the background
color for a selected thread.

Threads
Sidebarのヘッダーや`ThreadItem`を選択した際とホバーした際の色が本来対応するテーマカラーではなく`element.active`になっています。これにより、[Moonlight](https://github.com/Rick-VA/moonlight)のような一部のテーマでは、スレッドを選択した際のテキストのコントラスト比が低くなっていました。既存のコードのコメントによれば、`element.active`はクリックしたときなどに適用されるべきで、選択されたスレッドの背景色としては正しくありません。


https://github.com/zed-industries/zed/blob/0307288d903afd5673c361c548bd448fc8a684df/crates/settings_content/src/theme.rs#L634-L638

## Solution

> Using the existing branch picker and worktree picker implementations
as references, I updated the Threads Sidebar header and `ThreadItem` to
use `ghost_element_selected` for the selected-state background,
`ghost_element_hover` on hover, and `ghost_element_active` on click.
This aligns the implementation with the intended use of the theme
variables.

ブランチピッカーやワークツリーピッカーの既存の実装を参考に、Threads
Sidebarのヘッダーと`ThreadItem`の選択状態の背景色を`ghost_element_selected`に、ホバーしたときの色を`ghost_element_hover`に、クリックしたときの色を`ghost_element_active`に変更することでテーマ変数の意図に沿った実装になるようにしました。

## Testing

> I built the updated code and confirmed that the thread colors now
match the colors used for selected list items in UIs such as the branch
picker. You can test this change by opening the Threads Sidebar with one
or more agent threads present.


変更済みのコードをビルドして、スレッドの配色が、ブランチピッカーのようなリストアイテムを選択するUIの配色と一致していることを確認しました。この変更は1つ以上のエージェントスレッドが存在している状態でThreads
Sidebarを表示することでテストできます。

## Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [ ] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

## Showcase

|Before|After|
|:-:|:-:|
|<img width="897" height="354" alt="image"
src="https://github.com/user-attachments/assets/35087912-adea-43ca-86cb-ab7e7f69b6d0"
/>|<img width="897" height="354" alt="image"
src="https://github.com/user-attachments/assets/42945d22-7c8b-4409-a607-251012e5da04"
/>|

---

Release Notes:

- Fixed incorrect selected and hover colors for threads in the Threads
sidebar

---------

Co-authored-by: Kirill Bulatov <kirill@zed.dev>
Co-authored-by: Kirill Bulatov <mail4score@gmail.com>