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.