# Topic Cards

**URL:** https://meta.discourse.org/t/topic-cards/296048
**Category:** Theme component
**Tags:** official, topic-cards
**Created:** [February 20, 2024, 12:04pm UTC](https://meta.discourse.org/t/topic-cards/296048 "2024-02-20T12:04:45Z")
**Posts on this page:** 1
**Showing post:** 96

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [August 8, 2025, 6:55pm UTC](https://meta.discourse.org/t/topic-cards/296048/96 "2025-08-08T18:55:41Z")

</div>

This is the least amount of lines I could come up with that seems to be working correctly.

```plaintext
// Blend topic card colors with theme
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}

.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}

@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

```

---

_[View the full topic](https://meta.discourse.org/t/topic-cards/296048)._