Skip to content

Conversation

@adamwathan
Copy link
Member

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.

adamwathan and others added 2 commits October 1, 2024 21:18
Co-Authored-By: Luke Warlow <[email protected]>
Co-Authored-By: Luke Warlow <[email protected]>
Copy link
Member

@philipp-spiess philipp-spiess left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's gooo! I’m glad we figured it all out 😄

@adamwathan adamwathan merged commit dae178e into next Oct 2, 2024
@adamwathan adamwathan deleted the feat/color-scheme-utilities branch October 2, 2024 10:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants