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
Closed
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

Prev

Change @media color-theme to prefers-ui-theme

  • Loading branch information...
jonathantneal committed Sep 21, 2018
commit e52c17568ab9bb58d04cf02f49c47899b06f5d47
@@ -336,33 +336,33 @@ Script-based Custom Media Queries</h3>
</div>

<!--
██████ ███████ ██ ███████ ████████ ████████ ██ ██ ████████ ██ ██ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██
██ ██ ██ ██ ██ ██ ████████ ███████ ██ █████████ ██████ ██ ███ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ███████ ████████ ███████ ██ ██ ██ ██ ██ ████████ ██ ██ ████████
████████ ███████ ████████ ████████ ████████ ████████ ██████ ██ ██ ████ ████████ ██ ██ ████████ ██ ██ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██
████████ ████████ ██████ ██████ ██████ ████████ ██████ ███████ ██ ██ ██ ███████ ██ █████████ ██████ ██ ███ ██ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ████████ ██ ████████ ██ ██ █████ ███████ ████ ██ ██ ██ ████████ ██ ██ ████████
-->

<h2 id='mf-color-theme'>
Color-Theme Media Features</h2>
<h2 id='mf-prefers-ui-theme'>
Prefers-UI-Theme Media Features</h2>

<h3 id="color-theme">
Detecting the color theme: the 'color-theme' feature</h3>
<h3 id="prefers-ui-theme">
Detecting the preferred user interface theme: the 'prefers-ui-theme' feature</h3>

<pre class='descdef mq'>
Name: color-theme
Name: prefers-ui-theme
Value: light | dark
For: @media
Type: discrete
</pre>

The 'color-theme' media feature is used to query about the color theme used by the operating system,
The 'prefers-ui-theme' media feature is used to query about the user interface theme used by the operating system,
to allow the author to adjust the style of the document in response to the user’s preference.
The following values are valid:

<dl dfn-type=value dfn-for="@media/color-theme">
<dl dfn-type=value dfn-for="@media/prefers-ui-theme">
<dt><dfn>light</dfn>
<dd>
The operating system is being displayed with a light interface.
@@ -383,11 +383,11 @@ Detecting the color theme: the 'color-theme' feature</h3>

<div class="example">
<pre>
@media (color-theme: light) {
@media (prefers-ui-theme: light) {
html { background: #fff; color: #000 }
a { color: #0000d6 }
}
@media (color-theme: dark) {
@media (prefers-ui-theme: dark) {
html { background: #000; color: #fff }
a { color: #00c0ff }
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.