prefers-color-scheme media query support for dark mode

[tonimelisma]

Hey,

I've been going through the documentation and other issues and can't find anything related to automatic dark mode detection via prefers-color-scheme media query in CSS. This is a functionality that has been implemented in all the major browsers for over a year now. The web site has both a light as well as a dark CSS stylesheet, and the browser uses the end users system settings to choose whether to use a light or dark mode stylesheet automatically (no UI involved).

I suppose Tachyons doesn't have such a feature? Would it be welcome? If one were to implement something like that, how would I go about it?

[danieloi]

I like how with Tailwind you just prefix styles with "dark:" and you're good to go.

That'd be nice and keep this library competitive. Looking at this strategy for my app that uses react-native-tachyons right now.

[gobijan]

Here is my hack to give tachyons dark mode capabilities:

@media (prefers-color-scheme:dark) {
.dm-b--black { border-color: #000 }
.dm-b--near-black { border-color: #111 }
.dm-b--dark-gray { border-color: #333 }
.dm-b--mid-gray { border-color: #555 }
.dm-b--gray { border-color: #777 }
.dm-b--silver { border-color: #999 }
.dm-b--light-silver { border-color: #aaa }
.dm-b--moon-gray { border-color: #ccc }
.dm-b--light-gray { border-color: #eee }
.dm-b--near-white { border-color: #f4f4f4 }
.dm-b--white { border-color: #fff }
.dm-b--white-90 { border-color: hsla(0, 0%, 100%, .9) }
.dm-b--white-80 { border-color: hsla(0, 0%, 100%, .8) }
.dm-b--white-70 { border-color: hsla(0, 0%, 100%, .7) }
.dm-b--white-60 { border-color: hsla(0, 0%, 100%, .6) }
.dm-b--white-50 { border-color: hsla(0, 0%, 100%, .5) }
.dm-b--white-40 { border-color: hsla(0, 0%, 100%, .4) }
.dm-b--white-30 { border-color: hsla(0, 0%, 100%, .3) }
.dm-b--white-20 { border-color: hsla(0, 0%, 100%, .2) }
.dm-b--white-10 { border-color: hsla(0, 0%, 100%, .1) }
.dm-b--white-05 { border-color: hsla(0, 0%, 100%, .05) }
.dm-b--white-025 { border-color: hsla(0, 0%, 100%, .025) }
.dm-b--white-0125 { border-color: hsla(0, 0%, 100%, .0125) }
.dm-b--black-90 { border-color: rgba(0, 0, 0, .9) }
.dm-b--black-80 { border-color: rgba(0, 0, 0, .8) }
.dm-b--black-70 { border-color: rgba(0, 0, 0, .7) }
.dm-b--black-60 { border-color: rgba(0, 0, 0, .6) }
.dm-b--black-50 { border-color: rgba(0, 0, 0, .5) }
.dm-b--black-40 { border-color: rgba(0, 0, 0, .4) }
.dm-b--black-30 { border-color: rgba(0, 0, 0, .3) }
.dm-b--black-20 { border-color: rgba(0, 0, 0, .2) }
.dm-b--black-10 { border-color: rgba(0, 0, 0, .1) }
.dm-b--black-05 { border-color: rgba(0, 0, 0, .05) }
.dm-b--black-025 { border-color: rgba(0, 0, 0, .025) }
.dm-b--black-0125 { border-color: rgba(0, 0, 0, .0125) }
.dm-b--dark-red { border-color: #e7040f }
.dm-b--red { border-color: #ff4136 }
.dm-b--light-red { border-color: #ff725c }
.dm-b--orange { border-color: #ff6300 }
.dm-b--gold { border-color: #ffb700 }
.dm-b--yellow { border-color: gold }
.dm-b--light-yellow { border-color: #fbf1a9 }
.dm-b--purple { border-color: #5e2ca5 }
.dm-b--light-purple { border-color: #a463f2 }
.dm-b--dark-pink { border-color: #d5008f }
.dm-b--hot-pink { border-color: #ff41b4 }
.dm-b--pink { border-color: #ff80cc }
.dm-b--light-pink { border-color: #ffa3d7 }
.dm-b--dark-green { border-color: #137752 }
.dm-b--green { border-color: #19a974 }
.dm-b--light-green { border-color: #9eebcf }
.dm-b--navy { border-color: #001b44 }
.dm-b--dark-blue { border-color: #00449e }
.dm-b--blue { border-color: #357edd }
.dm-b--light-blue { border-color: #96ccff }
.dm-b--lightest-blue { border-color: #cdecff }
.dm-b--washed-blue { border-color: #f6fffe }
.dm-b--washed-green { border-color: #e8fdf5 }
.dm-b--washed-yellow { border-color: #fffceb }
.dm-b--washed-red { border-color: #ffdfdf }
.dm-b--transparent { border-color: transparent }
.dm-b--inherit { border-color: inherit }
.dm-b--initial { border-color: initial }
.dm-b--unset { border-color: unset }
.dm-black-90 { color: rgba(0, 0, 0, .9) }
.dm-black-80 { color: rgba(0, 0, 0, .8) }
.dm-black-70 { color: rgba(0, 0, 0, .7) }
.dm-black-60 { color: rgba(0, 0, 0, .6) }
.dm-black-50 { color: rgba(0, 0, 0, .5) }
.dm-black-40 { color: rgba(0, 0, 0, .4) }
.dm-black-30 { color: rgba(0, 0, 0, .3) }
.dm-black-20 { color: rgba(0, 0, 0, .2) }
.dm-black-10 { color: rgba(0, 0, 0, .1) }
.dm-black-05 { color: rgba(0, 0, 0, .05) }
.dm-white-90 { color: hsla(0, 0%, 100%, .9) }
.dm-white-80 { color: hsla(0, 0%, 100%, .8) }
.dm-white-70 { color: hsla(0, 0%, 100%, .7) }
.dm-white-60 { color: hsla(0, 0%, 100%, .6) }
.dm-white-50 { color: hsla(0, 0%, 100%, .5) }
.dm-white-40 { color: hsla(0, 0%, 100%, .4) }
.dm-white-30 { color: hsla(0, 0%, 100%, .3) }
.dm-white-20 { color: hsla(0, 0%, 100%, .2) }
.dm-white-10 { color: hsla(0, 0%, 100%, .1) }
.dm-black { color: #000 }
.dm-near-black { color: #111 }
.dm-dark-gray { color: #333 }
.dm-mid-gray { color: #555 }
.dm-gray { color: #777 }
.dm-silver { color: #999 }
.dm-light-silver { color: #aaa }
.dm-moon-gray { color: #ccc }
.dm-light-gray { color: #eee }
.dm-near-white { color: #f4f4f4 }
.dm-white { color: #fff }
.dm-dark-red { color: #e7040f }
.dm-red { color: #ff4136 }
.dm-light-red { color: #ff725c }
.dm-orange { color: #ff6300 }
.dm-gold { color: #ffb700 }
.dm-yellow { color: gold }
.dm-light-yellow { color: #fbf1a9 }
.dm-purple { color: #5e2ca5 }
.dm-light-purple { color: #a463f2 }
.dm-dark-pink { color: #d5008f }
.dm-hot-pink { color: #ff41b4 }
.dm-pink { color: #ff80cc }
.dm-light-pink { color: #ffa3d7 }
.dm-dark-green { color: #137752 }
.dm-green { color: #19a974 }
.dm-light-green { color: #9eebcf }
.dm-navy { color: #001b44 }
.dm-dark-blue { color: #00449e }
.dm-blue { color: #357edd }
.dm-light-blue { color: #96ccff }
.dm-lightest-blue { color: #cdecff }
.dm-washed-blue { color: #f6fffe }
.dm-washed-green { color: #e8fdf5 }
.dm-washed-yellow { color: #fffceb }
.dm-washed-red { color: #ffdfdf }
.dm-color-inherit { color: inherit }
.dm-bg-black-90 { background-color: rgba(0, 0, 0, .9) }
.dm-bg-black-80 { background-color: rgba(0, 0, 0, .8) }
.dm-bg-black-70 { background-color: rgba(0, 0, 0, .7) }
.dm-bg-black-60 { background-color: rgba(0, 0, 0, .6) }
.dm-bg-black-50 { background-color: rgba(0, 0, 0, .5) }
.dm-bg-black-40 { background-color: rgba(0, 0, 0, .4) }
.dm-bg-black-30 { background-color: rgba(0, 0, 0, .3) }
.dm-bg-black-20 { background-color: rgba(0, 0, 0, .2) }
.dm-bg-black-10 { background-color: rgba(0, 0, 0, .1) }
.dm-bg-black-05 { background-color: rgba(0, 0, 0, .05) }
.dm-bg-white-90 { background-color: hsla(0, 0%, 100%, .9) }
.dm-bg-white-80 { background-color: hsla(0, 0%, 100%, .8) }
.dm-bg-white-70 { background-color: hsla(0, 0%, 100%, .7) }
.dm-bg-white-60 { background-color: hsla(0, 0%, 100%, .6) }
.dm-bg-white-50 { background-color: hsla(0, 0%, 100%, .5) }
.dm-bg-white-40 { background-color: hsla(0, 0%, 100%, .4) }
.dm-bg-white-30 { background-color: hsla(0, 0%, 100%, .3) }
.dm-bg-white-20 { background-color: hsla(0, 0%, 100%, .2) }
.dm-bg-white-10 { background-color: hsla(0, 0%, 100%, .1) }
.dm-bg-black { background-color: #000 }
.dm-bg-near-black { background-color: #111 }
.dm-bg-dark-gray { background-color: #333 }
.dm-bg-mid-gray { background-color: #555 }
.dm-bg-gray { background-color: #777 }
.dm-bg-silver { background-color: #999 }
.dm-bg-light-silver { background-color: #aaa }
.dm-bg-moon-gray { background-color: #ccc }
.dm-bg-light-gray { background-color: #eee }
.dm-bg-near-white { background-color: #f4f4f4 }
.dm-bg-white { background-color: #fff }
.dm-bg-transparent { background-color: transparent }
.dm-bg-dark-red { background-color: #e7040f }
.dm-bg-red { background-color: #ff4136 }
.dm-bg-light-red { background-color: #ff725c }
.dm-bg-orange { background-color: #ff6300 }
.dm-bg-gold { background-color: #ffb700 }
.dm-bg-yellow { background-color: gold }
.dm-bg-light-yellow { background-color: #fbf1a9 }
.dm-bg-purple { background-color: #5e2ca5 }
.dm-bg-light-purple { background-color: #a463f2 }
.dm-bg-dark-pink { background-color: #d5008f }
.dm-bg-hot-pink { background-color: #ff41b4 }
.dm-bg-pink { background-color: #ff80cc }
.dm-bg-light-pink { background-color: #ffa3d7 }
.dm-bg-dark-green { background-color: #137752 }
.dm-bg-green { background-color: #19a974 }
.dm-bg-light-green { background-color: #9eebcf }
.dm-bg-navy { background-color: #001b44 }
.dm-bg-dark-blue { background-color: #00449e }
.dm-bg-blue { background-color: #357edd }
.dm-bg-light-blue { background-color: #96ccff }
.dm-bg-lightest-blue { background-color: #cdecff }
.dm-bg-washed-blue { background-color: #f6fffe }
.dm-bg-washed-green { background-color: #e8fdf5 }
.dm-bg-washed-yellow { background-color: #fffceb }
.dm-bg-washed-red { background-color: #ffdfdf }
.dm-bg-inherit { background-color: inherit }
.dm-hover-black:focus, .hover-black:hover { color: #000 }
.dm-hover-near-black:focus, .hover-near-black:hover { color: #111 }
.dm-hover-dark-gray:focus, .hover-dark-gray:hover { color: #333 }
.dm-hover-mid-gray:focus, .hover-mid-gray:hover { color: #555 }
.dm-hover-gray:focus, .hover-gray:hover { color: #777 }
.dm-hover-silver:focus, .hover-silver:hover { color: #999 }
.dm-hover-light-silver:focus, .hover-light-silver:hover { color: #aaa }
.dm-hover-moon-gray:focus, .hover-moon-gray:hover { color: #ccc }
.dm-hover-light-gray:focus, .hover-light-gray:hover { color: #eee }
.dm-hover-near-white:focus, .hover-near-white:hover { color: #f4f4f4 }
.dm-hover-white:focus, .hover-white:hover { color: #fff }
.dm-hover-black-90:focus, .hover-black-90:hover { color: rgba(0, 0, 0, .9) }
.dm-hover-black-80:focus, .hover-black-80:hover { color: rgba(0, 0, 0, .8) }
.dm-hover-black-70:focus, .hover-black-70:hover { color: rgba(0, 0, 0, .7) }
.dm-hover-black-60:focus, .hover-black-60:hover { color: rgba(0, 0, 0, .6) }
.dm-hover-black-50:focus, .hover-black-50:hover { color: rgba(0, 0, 0, .5) }
.dm-hover-black-40:focus, .hover-black-40:hover { color: rgba(0, 0, 0, .4) }
.dm-hover-black-30:focus, .hover-black-30:hover { color: rgba(0, 0, 0, .3) }
.dm-hover-black-20:focus, .hover-black-20:hover { color: rgba(0, 0, 0, .2) }
.dm-hover-black-10:focus, .hover-black-10:hover { color: rgba(0, 0, 0, .1) }
.dm-hover-white-90:focus, .hover-white-90:hover { color: hsla(0, 0%, 100%, .9) }
.dm-hover-white-80:focus, .hover-white-80:hover { color: hsla(0, 0%, 100%, .8) }
.dm-hover-white-70:focus, .hover-white-70:hover { color: hsla(0, 0%, 100%, .7) }
.dm-hover-white-60:focus, .hover-white-60:hover { color: hsla(0, 0%, 100%, .6) }
.dm-hover-white-50:focus, .hover-white-50:hover { color: hsla(0, 0%, 100%, .5) }
.dm-hover-white-40:focus, .hover-white-40:hover { color: hsla(0, 0%, 100%, .4) }
.dm-hover-white-30:focus, .hover-white-30:hover { color: hsla(0, 0%, 100%, .3) }
.dm-hover-white-20:focus, .hover-white-20:hover { color: hsla(0, 0%, 100%, .2) }
.dm-hover-white-10:focus, .hover-white-10:hover { color: hsla(0, 0%, 100%, .1) }
.dm-hover-inherit:focus, .hover-inherit:hover { color: inherit }
.dm-hover-bg-black:focus, .hover-bg-black:hover { background-color: #000 }
.dm-hover-bg-near-black:focus, .hover-bg-near-black:hover { background-color: #111 }
.dm-hover-bg-dark-gray:focus, .hover-bg-dark-gray:hover { background-color: #333 }
.dm-hover-bg-mid-gray:focus, .hover-bg-mid-gray:hover { background-color: #555 }
.dm-hover-bg-gray:focus, .hover-bg-gray:hover { background-color: #777 }
.dm-hover-bg-silver:focus, .hover-bg-silver:hover { background-color: #999 }
.dm-hover-bg-light-silver:focus, .hover-bg-light-silver:hover { background-color: #aaa }
.dm-hover-bg-moon-gray:focus, .hover-bg-moon-gray:hover { background-color: #ccc }
.dm-hover-bg-light-gray:focus, .hover-bg-light-gray:hover { background-color: #eee }
.dm-hover-bg-near-white:focus, .hover-bg-near-white:hover { background-color: #f4f4f4 }
.dm-hover-bg-white:focus, .hover-bg-white:hover { background-color: #fff }
.dm-hover-bg-transparent:focus, .hover-bg-transparent:hover { background-color: transparent }
.dm-hover-bg-black-90:focus, .hover-bg-black-90:hover { background-color: rgba(0, 0, 0, .9) }
.dm-hover-bg-black-80:focus, .hover-bg-black-80:hover { background-color: rgba(0, 0, 0, .8) }
.dm-hover-bg-black-70:focus, .hover-bg-black-70:hover { background-color: rgba(0, 0, 0, .7) }
.dm-hover-bg-black-60:focus, .hover-bg-black-60:hover { background-color: rgba(0, 0, 0, .6) }
.dm-hover-bg-black-50:focus, .hover-bg-black-50:hover { background-color: rgba(0, 0, 0, .5) }
.dm-hover-bg-black-40:focus, .hover-bg-black-40:hover { background-color: rgba(0, 0, 0, .4) }
.dm-hover-bg-black-30:focus, .hover-bg-black-30:hover { background-color: rgba(0, 0, 0, .3) }
.dm-hover-bg-black-20:focus, .hover-bg-black-20:hover { background-color: rgba(0, 0, 0, .2) }
.dm-hover-bg-black-10:focus, .hover-bg-black-10:hover { background-color: rgba(0, 0, 0, .1) }
.dm-hover-bg-white-90:focus, .hover-bg-white-90:hover { background-color: hsla(0, 0%, 100%, .9) }
.dm-hover-bg-white-80:focus, .hover-bg-white-80:hover { background-color: hsla(0, 0%, 100%, .8) }
.dm-hover-bg-white-70:focus, .hover-bg-white-70:hover { background-color: hsla(0, 0%, 100%, .7) }
.dm-hover-bg-white-60:focus, .hover-bg-white-60:hover { background-color: hsla(0, 0%, 100%, .6) }
.dm-hover-bg-white-50:focus, .hover-bg-white-50:hover { background-color: hsla(0, 0%, 100%, .5) }
.dm-hover-bg-white-40:focus, .hover-bg-white-40:hover { background-color: hsla(0, 0%, 100%, .4) }
.dm-hover-bg-white-30:focus, .hover-bg-white-30:hover { background-color: hsla(0, 0%, 100%, .3) }
.dm-hover-bg-white-20:focus, .hover-bg-white-20:hover { background-color: hsla(0, 0%, 100%, .2) }
.dm-hover-bg-white-10:focus, .hover-bg-white-10:hover { background-color: hsla(0, 0%, 100%, .1) }
.dm-hover-dark-red:focus, .hover-dark-red:hover { color: #e7040f }
.dm-hover-red:focus, .hover-red:hover { color: #ff4136 }
.dm-hover-light-red:focus, .hover-light-red:hover { color: #ff725c }
.dm-hover-orange:focus, .hover-orange:hover { color: #ff6300 }
.dm-hover-gold:focus, .hover-gold:hover { color: #ffb700 }
.dm-hover-yellow:focus, .hover-yellow:hover { color: gold }
.dm-hover-light-yellow:focus, .hover-light-yellow:hover { color: #fbf1a9 }
.dm-hover-purple:focus, .hover-purple:hover { color: #5e2ca5 }
.dm-hover-light-purple:focus, .hover-light-purple:hover { color: #a463f2 }
.dm-hover-dark-pink:focus, .hover-dark-pink:hover { color: #d5008f }
.dm-hover-hot-pink:focus, .hover-hot-pink:hover { color: #ff41b4 }
.dm-hover-pink:focus, .hover-pink:hover { color: #ff80cc }
.dm-hover-light-pink:focus, .hover-light-pink:hover { color: #ffa3d7 }
.dm-hover-dark-green:focus, .hover-dark-green:hover { color: #137752 }
.dm-hover-green:focus, .hover-green:hover { color: #19a974 }
.dm-hover-light-green:focus, .hover-light-green:hover { color: #9eebcf }
.dm-hover-navy:focus, .hover-navy:hover { color: #001b44 }
.dm-hover-dark-blue:focus, .hover-dark-blue:hover { color: #00449e }
.dm-hover-blue:focus, .hover-blue:hover { color: #357edd }
.dm-hover-light-blue:focus, .hover-light-blue:hover { color: #96ccff }
.dm-hover-lightest-blue:focus, .hover-lightest-blue:hover { color: #cdecff }
.dm-hover-washed-blue:focus, .hover-washed-blue:hover { color: #f6fffe }
.dm-hover-washed-green:focus, .hover-washed-green:hover { color: #e8fdf5 }
.dm-hover-washed-yellow:focus, .hover-washed-yellow:hover { color: #fffceb }
.dm-hover-washed-red:focus, .hover-washed-red:hover { color: #ffdfdf }
.dm-hover-bg-dark-red:focus, .hover-bg-dark-red:hover { background-color: #e7040f }
.dm-hover-bg-red:focus, .hover-bg-red:hover { background-color: #ff4136 }
.dm-hover-bg-light-red:focus, .hover-bg-light-red:hover { background-color: #ff725c }
.dm-hover-bg-orange:focus, .hover-bg-orange:hover { background-color: #ff6300 }
.dm-hover-bg-gold:focus, .hover-bg-gold:hover { background-color: #ffb700 }
.dm-hover-bg-yellow:focus, .hover-bg-yellow:hover { background-color: gold }
.dm-hover-bg-light-yellow:focus, .hover-bg-light-yellow:hover { background-color: #fbf1a9 }
.dm-hover-bg-purple:focus, .hover-bg-purple:hover { background-color: #5e2ca5 }
.dm-hover-bg-light-purple:focus, .hover-bg-light-purple:hover { background-color: #a463f2 }
.dm-hover-bg-dark-pink:focus, .hover-bg-dark-pink:hover { background-color: #d5008f }
.dm-hover-bg-hot-pink:focus, .hover-bg-hot-pink:hover { background-color: #ff41b4 }
.dm-hover-bg-pink:focus, .hover-bg-pink:hover { background-color: #ff80cc }
.dm-hover-bg-light-pink:focus, .hover-bg-light-pink:hover { background-color: #ffa3d7 }
.dm-hover-bg-dark-green:focus, .hover-bg-dark-green:hover { background-color: #137752 }
.dm-hover-bg-green:focus, .hover-bg-green:hover { background-color: #19a974 }
.dm-hover-bg-light-green:focus, .hover-bg-light-green:hover { background-color: #9eebcf }
.dm-hover-bg-navy:focus, .hover-bg-navy:hover { background-color: #001b44 }
.dm-hover-bg-dark-blue:focus, .hover-bg-dark-blue:hover { background-color: #00449e }
.dm-hover-bg-blue:focus, .hover-bg-blue:hover { background-color: #357edd }
.dm-hover-bg-light-blue:focus, .hover-bg-light-blue:hover { background-color: #96ccff }
.dm-hover-bg-lightest-blue:focus, .hover-bg-lightest-blue:hover { background-color: #cdecff }
.dm-hover-bg-washed-blue:focus, .hover-bg-washed-blue:hover { background-color: #f6fffe }
.dm-hover-bg-washed-green:focus, .hover-bg-washed-green:hover { background-color: #e8fdf5 }
.dm-hover-bg-washed-yellow:focus, .hover-bg-washed-yellow:hover { background-color: #fffceb }
.dm-hover-bg-washed-red:focus, .hover-bg-washed-red:hover { background-color: #ffdfdf }
.dm-hover-bg-inherit:focus, .hover-bg-inherit:hover { background-color: inherit }
}