CSS Data Type - <system-color>

The CSS data type <system-color> is commonly linked to the default color selections for different components on a webpage.

  • User agents have the ability to apply forced colors mode, an accessibility function that overrides the author's color selections in particular attributes by limiting colors to a predetermined palette.

  • The <system-color> provides selected colors for integration across the page while in forced colors mode. Windows' high contrast setting acts as an illustration.

  • For characteristics that are not overridden in forced colors mode, writers should use <system-color> to maintain consistency.

  • The forced-colors media feature allows for the detection of forced colors mode. Interestingly, <color> and <system-color> are equivalent.

Syntax

<systemcolorkeyword>

Following system color keywords can be used:

  • AccentColor - Background of accented user interface controls

  • AccentColorText - Text of accented user interface controls

  • ActiveText - Text of active links

  • ButtonBorder - Base border color of controls

  • ButtonFace - Background color of controls

  • ButtonText - Text color of controls

  • Canvas - Background of application content or documents

  • CanvasText - Text color in application content or documents

  • Field - Background of input fields

  • FieldText - Text in input fields

  • GrayText - Text color for disabled items (e.g. a disabled control)

  • Highlight - Background of selected items

  • HighlightText - Text color of selected items

  • LinkText - Text of non-active, non-visited links

  • Mark - Background of text that has been specially marked (such as by the HTML mark element)

  • MarkText - Text that has been specially marked (such as by the HTML mark element)

  • VisitedText - Text of visited links

CSS <system-color> - System Color Keywords

The following example demonstrates the usage of <system-color> keywords such as ButtonFace, ButtonBorder and ActiveText, which are responsible for setting the system colors for face and border of a button and color of an anchor link, respectively. There are two buttons added, one with a user-defined background color and border style and the other one with the value ButtonFace.

<html>
<head>
<style>
   a.linkColor {
      color: ActiveText;
   }
   button{
      background-color: aqua;
      border: 2px inset red;
   }

   button.sysColor {
      background-color: ButtonFace;
      border: 2px ButtonBorder solid;
   }
</style>
</head>
<body>
   <div>
      <h3>Button related keywords</h3>
      <button>User defined Color</button>
      <button class="sysColor">ButtonFace</button>
   </div>
   <div>
      <h3>Link related keywords</h3>
      <a href="#" class="linkColor">ActiveText</a>
   </div>
</body>
</html>
Advertisements