How to change the text color in a table collection component?

My table collection has white text (when device settings are on dark mode) but dark text when on light mode. Is there a way to set the text as white, for light and dark mode? The text will still be legible when white (for light mode) because i’ve got a color on the backing of my custom collection and card. The table collection is inside a custom collection card.


You can structure around the built-in prefers-color-scheme.

/* Default (light mode) */
@media (prefers-color-scheme: light) {
  .custom-collection-card .table-collection,
  .custom-collection-card .table-collection * {
    color: #fff ;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .custom-collection-card .table-collection,
  .custom-collection-card .table-collection * {
    color: #fff;
  }
}
3 Likes

Okay great, i’ll try that. Thanks👍