From b85094cf212e5f56886d34d94c469d0034eddbef Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Thu, 13 Oct 2022 22:18:22 +0200 Subject: [PATCH] 19449 prefers color scheme (#20886) * docs(CSS): prefers-color-scheme for embedded content * docs(CSS): minor fix for coloer-scheme * chore(build) replace Prettier config * docs(CSS): add example of embedded SVG for prefers-color-scheme * docs(CSS): add xrefs for color-scheme & prefers-color-scheme * docs(CSS): improve wording for prefers-color-scheme docs * typo fix * docs(CSS) add details on secure animated mode for SVGs * Update files/en-us/web/css/@media/prefers-color-scheme/index.md Co-authored-by: Estelle Weyl * Update files/en-us/web/css/@media/prefers-color-scheme/index.md Co-authored-by: Estelle Weyl * chore(docs) Clarify embedded SVG details, links to supporting docs * Apply suggestions from code review Co-authored-by: Estelle Weyl * docs(CSS): Link to more appropriate inline SVG example, minor copy fix * grammar Co-authored-by: Estelle Weyl --- .prettierignore | 1 - .../css/@media/prefers-color-scheme/index.md | 67 +++++++++++++++++-- files/en-us/web/css/color-scheme/index.md | 1 + 3 files changed, 61 insertions(+), 8 deletions(-) diff --git a/.prettierignore b/.prettierignore index d013b7c6c7bd2ed..9359c3f3d3c18c9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,4 +2,3 @@ build/ # Ignore markdown files till full pass is made on each folder *.md - diff --git a/files/en-us/web/css/@media/prefers-color-scheme/index.md b/files/en-us/web/css/@media/prefers-color-scheme/index.md index 2cb9f9aa54c362d..f4d3747c25a0ffc 100644 --- a/files/en-us/web/css/@media/prefers-color-scheme/index.md +++ b/files/en-us/web/css/@media/prefers-color-scheme/index.md @@ -14,9 +14,17 @@ browser-compat: css.at-rules.media.prefers-color-scheme {{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}} -The **`prefers-color-scheme`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features) is used to detect if the user has requested a light or dark color theme. +The **`prefers-color-scheme`** [CSS](/en-US/docs/Web/CSS) [media feature](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#targeting_media_features) is used to detect if a user has requested light or dark color themes. +A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting. -The user might indicate this preference through an operating system setting (e.g. light or dark mode) or a user agent setting. +## Embedded elements + +For SVG and iframes, `prefers-color-scheme` lets you set a CSS style for the SVG or iframe based on the [`color-scheme`](/en-US/docs/Web/CSS/color-scheme) of the parent element in the web page. +SVGs must be used embedded (i.e., `circle`) as opposed to [inlined in HTML](/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction#basic_example). +An example of using `prefers-color-scheme` in SVGs can be found in in the [Color scheme inheritance](#color_scheme_inheritance) section. + +Using `prefers-color-scheme` is allowed in [cross-origin](/en-US/docs/Web/Security/Same-origin_policy#cross-origin_network_access) `` and `
Day (initial)
@@ -42,7 +51,7 @@ The elements below have an initial color theme. They can be further themed accor
Night (changes in dark scheme)
``` -### CSS +The following CSS is used to style the elements above: ```css .day { @@ -86,9 +95,53 @@ The elements below have an initial color theme. They can be further themed accor } ``` -### Result +{{EmbedLiveSample("Detecting_a_dark_theme")}} + +### Color scheme inheritance + +The following example shows how to use `prefers-color-scheme` with the [`color-scheme` property](/en-US/docs/Web/CSS/color-scheme) inherited from a parent element. +A script is used to set the source of the `` elements and their `alt` attributes. This would normally be done in HTML as `circle`. + +You should see three circles, with one drawn in a different color. +The first circle inherits the `color-scheme` from the OS and can be toggled using the system OS's theme switcher. + +The second and third circles inherit the `color-scheme` from the embedding element; the `@media` query allows setting styles of the SVG content based on the parent element's `color-scheme`. +In this case, the parent element with a `color-scheme` CSS property is a `
`. + +```html +
+ +
+ +
+ +
+
+ +
+ + + +``` -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Color_scheme_inheritance")}} ## Specifications diff --git a/files/en-us/web/css/color-scheme/index.md b/files/en-us/web/css/color-scheme/index.md index 91120d50a5da545..91f6ab72bf103d1 100644 --- a/files/en-us/web/css/color-scheme/index.md +++ b/files/en-us/web/css/color-scheme/index.md @@ -83,6 +83,7 @@ To opt the entire page into the user's color scheme preferences declare `color-s ## See also +- [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query to detect user preferences for color schemes. - [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color) - Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}} - {{cssxref("background-image")}}