tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Add CSS `color-scheme` utilities

Open lukewarlow opened this issue 11 months ago • 6 comments

This PR adds utilities for the color-scheme CSS property.

(Ignore the browser support for the only word it doesn't break functionality in any browser and definitely works in Chrome)

lukewarlow avatar May 22 '23 14:05 lukewarlow

Funny, I've the same code in my projects

jonnitto avatar Jul 26 '23 07:07 jonnitto

Thanks for the information.

elizabethmitchell00 avatar Oct 04 '23 09:10 elizabethmitchell00

Hey!

You might have noticed that I forced pushed to this branch. The reason is because the PR now uses next as the base branch which is our working branch for Tailwind CSS v4. In other words, the feature you implemented here is now written in the new codebase.

The code is ported as-is, so no API changes of your feature happened while moving it to the new codebase.

I also made sure to add you as a co-author because you still deserve all the credit 💪

RobinMalfait avatar Apr 17 '24 21:04 RobinMalfait

@lukewarlow @RobinMalfait How would you feel about using shorter utility names?

  • color-scheme-dark or scheme-dark or dark (dark in a util context would be different from its dark: variant context)
  • color-scheme-dark-only or scheme-dark-only or dark-only

I could see an argument for the verbose names as these would not be so commonly used and would be simpler to understand when encountered if they are 1:1 with CSS, but I could also see it being helpful to have shorter names if a codebase has a common practice of making certain sections dark vs. light in different contexts.

brandonmcconnell avatar Apr 20 '24 01:04 brandonmcconnell

My thinking on this is that more verbosity is better, makes them easily discoverable. dark-only might make someone think this hides this element in dark mode.

For an existing example there's the file: pseudo instead of file-selector-button which admittedly is a bit verbose but people didn't realise tailwind had this variant I think in part because it wasn't a match to the pseudo name. (file might also end up being a future compat issue if other file element pseudos are ever added but that's a separate discussion).

All that being said I trust in the framework authors to weigh up tradeoffs and come to a decision that's right for them :)

lukewarlow avatar Apr 20 '24 08:04 lukewarlow

@lukewarlow Absolutely! I'm with it 🙂

brandonmcconnell avatar Apr 20 '24 16:04 brandonmcconnell