TIL

Revert, Revert!

I've wished for this property off and on over the years, and when I thought about it again today, I found it, available in all modern browsers. Here's the use case:

.show-on-dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .show-on-dark-mode {
    display: revert;
  }
}

This is a utility class to toggle visiblity based on a user's browser preference. display: block used to work well enough to reset this class. But sometimes now, the original element has display: flex, inline-flex, grid, etc. When we use display: revert here, it tells the browser to erase the none property and use whatever was there before.