[Feature Proposal] Prefers Color Scheme variants

[ravanscafi]

I would love to hook prefers-color-scheme into Tailwind and use it like: dark:bg-gray-900 or light:bg-gray-100.
The support for it is growing and there would be no harm if a browser had no support for it.

I was thinking about creating a PR myself with this functionality (no clue yet about how) but by reading the contributing guidelines I saw that I should open an issue first, so here it is :)

What do you think about it? Should it sit at the core?

[m1guelpf]

This would probably work better as a plugin?

[hacknug]

You can already define your own media queries on theme.screens{}. Docs here: https://tailwindcss.com/docs/breakpoints/#custom-media-queries

screens: {
  dark: { raw: '(prefers-color-scheme: dark)' },
  light: { raw: '(prefers-color-scheme: light)' },
},

[brandonpittman]

Is there anyway to add a screen from a plugin? Seems like there isn't.

[hacknug]

Nope. Convo at #660.

[agcty]

@hacknug I actually use the same approach - works really well! Does anyone know however, how to combine multiple screen queries? Something like <button class="dark:bg-gray-900 md:dark:bg-gray-700">Button</button>

[hacknug]

@agcty I don't think that's possible, should use a variant for it or add new screens for each breakpoint + dark/light combo. Just make sure you use purgecss or your CSS will get way too big after adding those.

Also I think we could now turn this into a plugin that takes the user theme.screens and adds dark/light modifiers for each of them now that v1.2.0 will let plugins add their own config. Wanna give it a try or should I? 😄

[agcty]

@hacknug That's a great idea! I have limited knowledge about plugins at this moment so it's probably a better idea if you gave it a shot. 😅

[nandi95]

@hacknug @agcty
There's already a plugin for that:
tailwindcss-theming

[lukewarlow]

https://tailwindcss.com/docs/dark-mode Tailwind 2+ supports the media query out of the box with a dark variant