-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add CSS color-scheme
utilities
#11271
Conversation
f2a9102
to
f50c05c
Compare
Funny, I've the same code in my projects |
Thanks for the information. |
f50c05c
to
56ae7e6
Compare
Co-authored-by: Luke Warlow <luke@warlow.dev>
56ae7e6
to
6b161f8
Compare
color-scheme
utilities
Hey! You might have noticed that I forced pushed to this branch. The reason is because the PR now uses 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 💪 |
@lukewarlow @RobinMalfait How would you feel about using shorter utility names?
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. |
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 Absolutely! I'm with it 🙂 |
Opened a fresh PR for this one because the merge conflicts were a nightmare for me to try and resolve 😬 Added you as a co-author though @lukewarlow so will still be credited. Thanks! |
Replaces #11271 — the merge conflicts are killing me and it's way easier to just do it again (added you as a co-author though @lukewarlow so you're still credited!) This PR adds the following new utilities for the `color-scheme` property: | Class | CSS | | ------------------- | -------------------------- | | `scheme-normal` | `color-scheme: normal` | | `scheme-dark` | `color-scheme: dark` | | `scheme-light` | `color-scheme: light` | | `scheme-light-dark` | `color-scheme: light dark` | | `scheme-only-dark` | `color-scheme: dark only` | | `scheme-only-light` | `color-scheme: light only` | Went with `scheme-*` for the utilities because there are currently no other CSS properties with the word `scheme` in them and `scheme-light-dark` is going to be a common value which is three words already even with the shortened property name. I considered setting `color-scheme: light dark` by default as part of Preflight for this PR but decided against it, at least for this PR. I think that could still be a useful default but we should think about it a bit more because if you're building a light-mode-only site it'll force you to do some extra work. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Luke Warlow <lwarlow@igalia.com>
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)