Topic Cards

Theme component
,
96

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

// 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;
    }
}