# Rework color indicators visual representation \(\#33605\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/047d515abf6f8eb9594f48b3e8e97930c859901c)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 047d515abf6f8eb9594f48b3e8e97930c859901c

Requested commit: 047d515abf6f8eb9594f48b3e8e97930c859901c

Commit: 047d515abf6f8eb9594f48b3e8e97930c859901c

Tree: 8c36e1ea42e239082e2887e5e90d4b9b5d4bea11

Author: Kirill Bulatov

Committer: GitHub

## Message

```
Rework color indicators visual representation (#33605)

Use a div-based rendering code instead of using a text

Closes https://github.com/zed-industries/zed/discussions/33507

Before:
<img width="410" alt="before_dark"
src="https://github.com/user-attachments/assets/66ad63ae-7836-4dc7-8176-a2ff5a38bcd4"
/>
After:
<img width="407" alt="after_dark"
src="https://github.com/user-attachments/assets/0b627da8-461b-4f19-b236-4a69bf5952a0"
/>


Before:
<img width="409" alt="before_light"
src="https://github.com/user-attachments/assets/ebcfabec-fcda-4b63-aee6-c702888f0db4"
/>
After:
<img width="410" alt="after_light"
src="https://github.com/user-attachments/assets/c0da42a1-d6b3-4e08-a56c-9966c07e442d"
/>

The border is not that contrast as in VSCode examples in the issue, but
I'm supposed to use the right thing in

https://github.com/zed-industries/zed/blob/1e11de48eeba01dc12761ec1274f8b0963de5514/crates/editor/src/display_map/inlay_map.rs#L357

based on 


https://github.com/zed-industries/zed/blob/41583fb066629d1e54d600e930be068a68984c5c/crates/theme/src/styles/colors.rs#L16-L17

Another oddity is that the border starts to shrink on `cmd-=`
(`zed::IncreaseBufferFontSize`):

<img width="1244" alt="image"
src="https://github.com/user-attachments/assets/f424edc0-ca0c-4b02-96d4-6da7bf70449a"
/>

but that needs a different part of code to be adjusted hence skipped.

Tailwind CSS example:

<img width="1108" alt="image"
src="https://github.com/user-attachments/assets/10ada4dc-ea8c-46d3-b285-d895bbd6a619"
/>


Release Notes:

- Reworked color indicators visual representation
```

## Parents

- [e5bcd720e1715f1905734f05bdd752b45fb57966](https://git.cafe/gitcafe/zed/commit/e5bcd720e1715f1905734f05bdd752b45fb57966?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/047d515abf6f8eb9594f48b3e8e97930c859901c?format=markdown)