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

Make system-color a proper data type page #21207

Merged
merged 2 commits into from
Oct 5, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions files/en-us/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -11277,6 +11277,8 @@
/en-US/docs/Web/CSS/color_value/oklch() /en-US/docs/Web/CSS/color_value/oklch
/en-US/docs/Web/CSS/color_value/rgb() /en-US/docs/Web/CSS/color_value/rgb
/en-US/docs/Web/CSS/color_value/rgba() /en-US/docs/Web/CSS/color_value/rgba
/en-US/docs/Web/CSS/color_value/system-color /en-US/docs/Web/CSS/system-color
/en-US/docs/Web/CSS/color_value/system_color_keywords /en-US/docs/Web/CSS/system-color
/en-US/docs/Web/CSS/conic-gradient /en-US/docs/Web/CSS/gradient/conic-gradient
/en-US/docs/Web/CSS/conic-gradient() /en-US/docs/Web/CSS/gradient/conic-gradient
/en-US/docs/Web/CSS/counter() /en-US/docs/Web/CSS/counter
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/named-color/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ tags:
- Reference
- CSS Data Type
- color
browser-compat: css.types.color.color_keywords
browser-compat: css.types.color.named-color
---

{{CSSRef}}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
---
title: System color keywords
slug: Web/CSS/color_value/system_color_keywords
title: <system-color>
slug: Web/CSS/system-color
page-type: css-type
tags:
- Reference
- color
browser-compat: css.types.color.system-color
---

{{CSSRef}}

In _forced colors mode_ (detectable with the [forced-colors](/en-US/docs/Web/CSS/@media/forced-colors) media query), most colors are restricted into a user- and browser-defined palette. These **system colors** are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. These values may also be used in other contexts, but are not widely supported by browsers.
The **`<system-color>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) usually reflects the default color choices used for the different parts of a web page.

The keywords in the following list are defined by the CSS Color Module Level 4 specification.
However, user agents can provide an accessibility feature called _forced colors mode_, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, `<system-color>` exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is [high contrast mode on Windows](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/).

> **Note:** Note that these keywords are _case insensitive_, but are listed here with mixed case for readability.
In forced colors mode, authors should use colors from the `<system-color>` type for all properties that are _not_ in the set of properties whose colors are overridden. This ensures that the page consistently uses the same color palette across all properties.

Authors can detect forced colors mode using the [`forced-colors`](/en-US/docs/Web/CSS/@media/forced-colors) media feature.

A `<system-color>` value can be used anywhere a [`<color>`](/en-US/docs/Web/CSS/color_value) can be used.

## Syntax

Note that these keywords are _case insensitive_, but are listed here with mixed case for readability.

- `ActiveText`
- : Text of active links
- `ButtonBorder`
Expand Down Expand Up @@ -48,7 +55,7 @@ The keywords in the following list are defined by the CSS Color Module Level 4 s
- `VisitedText`
- : Text of visited links

## Deprecated system color keywords
### Deprecated system color keywords

The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated for use on public web pages.

Expand Down Expand Up @@ -99,7 +106,7 @@ The following keywords were defined in earlier versions of the CSS Color Module.
- `WindowText` {{deprecated_inline}}
- : Text in windows. Should be used with the `Window` background color.

## Firefox non-standard system color extensions
### Firefox non-standard system color extensions

Firefox also supports some non-standard extensions to the system color keyword set.

Expand Down Expand Up @@ -152,6 +159,48 @@ Firefox also supports some non-standard extensions to the system color keyword s
- `-moz-win-accentcolortext` {{non-standard_inline}}
- : Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

## Examples

### Using system colors

In this example we have a button that normally gets its contrast using the {{cssxref("box-shadow")}} property. In forced colors mode, `box-shadow` is forced to `none`, so the example uses the `forced-colors` media feature to ensure there is a border of the appropriate color (`ButtonBorder` in this case).
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
In this example we have a button that normally gets its contrast using the {{cssxref("box-shadow")}} property. In forced colors mode, `box-shadow` is forced to `none`, so the example uses the `forced-colors` media feature to ensure there is a border of the appropriate color (`ButtonBorder` in this case).
The button in this example gets its contrast using the {{cssxref("box-shadow")}} property. In the `forced-colors` mode, `box-shadow` is forced to `none`. The example uses the `forced-colors` media feature to ensure that there is a border of the appropriate color (`ButtonBorder` in this case).

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

forced-colors (with code styling and a hyphen) is the name of the media feature, but "forced colors mode" is the name of the abstract feature. So I think "In forced colors mode" is correct here.


#### HTML

```html
<button class="button">Press me!</button>
```

#### CSS

```css
.button {
border: 0;
padding: 10px;
box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
}

@media (forced-colors: active) {
.button {
/* Use a border instead, since box-shadow
is forced to 'none' in forced-colors mode */
border: 2px ButtonBorder solid;
}
}
```

#### Result

{{EmbedLiveSample("Using system colors")}}
Copy link
Collaborator

Choose a reason for hiding this comment

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

This is all good except it would be good to provide links/hints on how to set forced color mode - even better (if possible) would be to make pressing the button force the mode.

Otherwise not much point this being a live example.

I'm going to merge anyway, because this is excellent.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I copied the example from the forced-colors page: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors#examples.

I think you can't make pressing the button enable it, it's an OS setting that's not available to Web pages. The only concrete example I know of is Windows high contrast mode: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ . I just added a reference to that, it's helpful I think.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Works for me/don't have any better ideas :-)


## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- [`<color>`](/en-US/docs/Web/CSS/color_value) data type these keywords belong to.
- [`<color>`](/en-US/docs/Web/CSS/color_value): the data type these keywords belong to.