# Highlight selected note item in the note list panel

**URL:** <https://discourse.joplinapp.org/t/highlight-selected-note-item-in-the-note-list-panel/39940>\
**Category:** Support\
**Created:** [1 September 2024 20:52 UTC](https://discourse.joplinapp.org/t/highlight-selected-note-item-in-the-note-list-panel/39940 "2024-09-01T20:52:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![songweaver](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@songweaver](https://discourse.joplinapp.org/u/songweaver)\
**Post date:** [1 September 2024 20:52 UTC](https://discourse.joplinapp.org/t/highlight-selected-note-item-in-the-note-list-panel/39940/1 "2024-09-01T20:52:06Z")

</div>

### Operating system

macOS

### Joplin version

3.0.15

### What issue do you have?

Hi, I'm looking to change the background color of selected note item in the note list panel. Currently the light themes do not provide enough contrast for me, I can't see easily which notes are selected. I could find some css codes to change the background color of note list items. But they only apply for non-selected notes. Would anyone know how to change the background color of selected notes? I have attached a screenshot. Note 1 and 5 are selected, while 2-4 are non-selected. And I would like to reverse their colors - highlight the selected notes 1 and 5 red.

```auto
.note-list-item {
    background-color: red; /* Background color for non-selected notes */
}

```

### Screenshots

 ![Screenshot 2024-09-01 at 9.45.20 PM.png](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/5/a/5a3fbb609d244dec48bee69b258ebc88ce8b9198.png)

---

<div class="post-metadata">

**Author:** ![muzak](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@muzak](https://discourse.joplinapp.org/u/muzak)\
**Post date:** [1 September 2024 22:02 UTC](https://discourse.joplinapp.org/t/highlight-selected-note-item-in-the-note-list-panel/39940/2 "2024-09-01T22:02:41Z")

</div>

This should work:

```css
.note-list-item > .content.-selected {
  background-color: red !important;
}

```

---

<div class="post-metadata">

**Author:** ![songweaver](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@songweaver](https://discourse.joplinapp.org/u/songweaver)\
**Post date:** [2 September 2024 08:16 UTC](https://discourse.joplinapp.org/t/highlight-selected-note-item-in-the-note-list-panel/39940/3 "2024-09-02T08:16:04Z")

</div>

Amazing, that works well! Thanks

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [2 October 2024 08:16 UTC](https://discourse.joplinapp.org/t/highlight-selected-note-item-in-the-note-list-panel/39940/4 "2024-10-02T08:16:32Z")

</div>

Closed on 2 October 2024 08:16 UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.