Skip to content
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 @media (prefers-ui-theme: light|dark) #2742

Closed
wants to merge 4 commits into from

Conversation

@jonathantneal
Copy link
Contributor

commented Jun 6, 2018

This is a rough-draft proposal of a new media feature used to query about the color scheme being used by the operating system.

/* when the system color theme is light (a light background with dark text) */
@media (color-theme: light) {
  html { background: #fff; color: #000 }
  a { color: #0000d6 }
}

/* when the system color theme is dark (a dark background with light text) */
@media (color-theme: dark) {
  html { background: #000; color: #fff }
  a { color: #00c0ff }
}

Applications will respond to these interface changes, and so it will be helpful if webapps can as well.

Related to #2735.


JUNE 15, 2018: I changed the proposal from @media (interface: light|dark) to @media (color-theme: light|dark) based upon @AmeliaBR’s comment.

ORIGINAL REQUEST:

/* define colors when the interface is light (dark text on a light background) */
@media (interface: light) {
  html { background: #fff; color: #000 }
  a { color: #0000d6 }
}

/* define colors when the interface is dark (light text on a dark background) */
@media (interface: dark) {
  html { background: #000; color: #fff }
  a { color: #00c0ff }
}
@jonathantneal

This comment has been minimized.

Copy link
Contributor Author

commented Jun 6, 2018

While this is a very rough draft (note the “IN THAT BIG FANCY TYPE” written to demonstrate things I cannot yet replicate from your specs), I would be open to modifying this PR continually into something workable with your feedback.

@dontcallmedom

This comment has been minimized.

Copy link
Member

commented Jun 6, 2018

Marked as substantive for IPR from ash-nazg.

@frivoal frivoal self-assigned this Jun 6, 2018

@frivoal

This comment has been minimized.

Copy link
Collaborator

commented Jun 6, 2018

There's a clear need to address this problem, but for the reasons I explained in #2735 (comment), I think this pull request is premature.

This particular problem is part of a tangled nest of related questions, and we need to consider the whole thing before we dive in. Maybe we don't need to (or cannot) solve everything in one go, but we do need to consider how these various things collide and interact.

I absolutely don't want to discourage you from working on this. We've been collectively struggling for a while on how to slice the problem, and suggestions on how to cope with that would be very much welcome.

@jonathantneal

This comment has been minimized.

Copy link
Contributor Author

commented Jun 12, 2018

What may I do to “make IPR commitments for this group”, so that this check in the PR will not fail?

@ewilligers

This comment has been minimized.

Copy link
Contributor

commented Jun 13, 2018

What may I do to “make IPR commitments for this group”, so that this check in the PR will not fail?

As a first step, perhaps request a W3C account?

@jonathantneal

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2018

Thanks, @ewilligers. I do have a W3C account. I tried linking that account to my GitHub account, but that failed because it says it is already linked. I can see my W3C ID in the repo manager, and I was able to “add” the CSSWG to my user, though I’m not sure what that means. I clicked around a few places, and I failed to find definitive answers.

@ewilligers

This comment has been minimized.

Copy link
Contributor

commented Jun 15, 2018

@astearns @atanassov, Jonathan would like to be able to "make IPR commitments".

@jonathantneal jonathantneal changed the title Add @media (interface) Add @media (color-theme: light|dark) Jun 15, 2018

@jonathantneal

This comment has been minimized.

Copy link
Contributor Author

commented Jun 15, 2018

I’ve amended this PR today, based upon the comments in #2735.

@jonathantneal

This comment has been minimized.

Copy link
Contributor Author

commented Sep 21, 2018

I’ve updated my PR based upon a consensus happening around prefers-ui-theme.

#2735

I have kept the dark and light variations rather than light-on-dark and dark-on-light because I softly agree with the later being “unnecessarily verbose”, and also because @AmeliaBR used the shorter style in a recent comment.


Also, I’m still flagged for “contribution issues”, and I would like to be able to "make IPR commitments". @astearns @atanassov. Would you be able to help me resolve this?

@jonathantneal jonathantneal changed the title Add @media (color-theme: light|dark) Add @media (prefers-ui-theme: light|dark) Sep 21, 2018

@AmeliaBR

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2018

also because @AmeliaBR used the shorter style in a recent comment.

Well, I'm hardly the arbiter of all things syntactical, but I do agree with the arguments that

  1. Shorter is better so long as the meaning is still clear.
  2. The established terminology used in websites and operating systems is "dark theme/mode" vs "light theme/mode", not "dark-on-light mode" vs "light-on-dark mode".
@grorg

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2018

@jonathantneal

This comment has been minimized.

Copy link
Contributor Author

commented Sep 22, 2018

@grorg, no, this is the first I’ve heard of it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.