Skip to content

Instantly share code, notes, and snippets.

@piroor

piroor/demo.html

Last active January 17, 2022 02:55
Show Gist options
  • Save piroor/0954d176334babb388e7df9eb5421ac3 to your computer and use it in GitHub Desktop.
Save piroor/0954d176334babb388e7df9eb5421ac3 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Sytem Color Demo
Raw
demo.html
<html>
<head>
<title></title>
<style type="text/css">
:root, body {
color-scheme: light dark;
font: message-box; /* this is same to Firefox's UI. */
line-height: 1;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
li {
clear: both;
color: black;
padding: 0.2em 1em;
text-shadow: white 0 0 5px, white 0 0 5px, white 0 0 5px, white 0 0 5px, white 0 0 5px, white 0 0 5px, white 0 0 5px, white 0 0 5px, white 0 0 5px;
width: 100%;
}
li span {
float: right;
padding-right: 1em;
}
li span[style] {
text-shadow: none;
}
</style>
</head>
<body>
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS System Color</a> Demo</h1>
<ul>
<li style="background:ActiveText">ActiveText <span style="color:Canvas">Canvas</span></li>
<li style="background:ButtonBorder">ButtonBorder <span>-</span></li>
<li style="background:ButtonFace">ButtonFace <span style="color:ButtonText">ButtonText</span></li>
<li style="background:ButtonText">ButtonText <span style="color:ButtonFace">ButtonFace</span></li>
<li style="background:Canvas">Canvas <span style="color:CanvasText">CanvasText</span></li>
<li style="background:CanvasText">CanvasText <span style="color:Canvas">Canvas</span></li>
<li style="background:Field">Field <span style="color:FieldText">FieldText</span></li>
<li style="background:FieldText">FieldText <span style="color:Field">Field</span></li>
<li style="background:GrayText">GrayText <span style="color:Canvas">Canvas</span></li>
<li style="background:Highlight">Highlight <span style="color:HighlightText">HighlightText</span></li>
<li style="background:HighlightText">HighlightText <span style="color:Highlight">Highlight</span></li>
<li style="background:LinkText">LinkText <span style="color:Canvas">Canvas</span></li>
<li style="background:Mark">Mark <span style="color:MarkText">MarkText</span></li>
<li style="background:MarkText">MarkText <span style="color:Mark">Mark</span></li>
<li style="background:VisitedText">VisitedText <span style="color:Canvas">Canvas</span></li>
<li style="background:ActiveBorder">ActiveBorder <span>-</span></li>
<li style="background:ActiveCaption">ActiveCaption <span style="color:CaptionText">CaptionText</span></li>
<li style="background:AppWorkspace">AppWorkspace <span style="color:CanvasText">CanvasText</span></li>
<li style="background:Background">Background <span>-</span></li>
<li style="background:ButtonHighlight">ButtonHighlight <span>-</span></li>
<li style="background:ButtonShadow">ButtonShadow <span>-</span></li>
<li style="background:CaptionText">CaptionText <span style="color:ActiveCaption">ActiveCaption</span></li>
<li style="background:InactiveBorder">InactiveBorder <span>-</span></li>
<li style="background:InactiveCaption">InactiveCaption <span style="color:InactiveCaptionText">InactiveCaptionText</span></li>
<li style="background:InactiveCaptionText">InactiveCaptionText <span style="color:InactiveCaption">InactiveCaption</span></li>
<li style="background:InfoBackground">InfoBackground <span style="color:InfoText">InfoText</span></li>
<li style="background:InfoText">InfoText <span style="color:InfoBackground">InfoBackground</span></li>
<li style="background:Menu">Menu <span style="color:MenuText">MenuText</span></li>
<li style="background:MenuText">MenuText <span style="color:Menu">Menu</span></li>
<li style="background:Scrollbar">Scrollbar <span>-</span></li>
<li style="background:ThreeDDarkShadow">ThreeDDarkShadow <span>-</span></li>
<li style="background:ThreeDFace">ThreeDFace <span style="color:ButtonText">ButtonText</span></li>
<li style="background:ThreeDHighlight">ThreeDHighlight <span>-</span></li>
<li style="background:ThreeDLightShadow">ThreeDLightShadow <span>-</span></li>
<li style="background:ThreeDShadow">ThreeDShadow <span>-</span></li>
<li style="background:Window">Window <span style="color:WindowText">WindowText</span></li>
<li style="background:WindowFrame">WindowFrame <span>-</span></li>
<li style="background:WindowText">WindowText <span style="color:Window">Window</span></li>
<li style="background:-moz-ButtonDefault">-moz-ButtonDefault <span>-</span></li>
<li style="background:-moz-ButtonHoverFace">-moz-ButtonHoverFace <span style="color:-moz-ButtonHoverText">-moz-ButtonHoverText</span></li>
<li style="background:-moz-ButtonHoverText">-moz-ButtonHoverText <span style="color:-moz-ButtonHoverFace">-moz-ButtonHoverFace</span></li>
<li style="background:-moz-CellHighlight">-moz-CellHighlight <span style="color:-moz-CellHighlightText">-moz-CellHighlightText</span></li>
<li style="background:-moz-CellHighlightText">-moz-CellHighlightText <span style="color:-moz-CellHighlight">-moz-CellHighlight</span></li>
<li style="background:-moz-Combobox">-moz-Combobox <span style="color:-moz-ComboboxText">-moz-ComboboxText</span></li>
<li style="background:-moz-ComboboxText">-moz-ComboboxText <span style="color:-moz-Combobox">-moz-Combobox</span></li>
<li style="background:-moz-Dialog">-moz-Dialog <span style="color:-moz-DialogText">-moz-DialogText</span></li>
<li style="background:-moz-DialogText">-moz-DialogText <span style="color:-moz-Dialog">-moz-Dialog</span></li>
<li style="background:-moz-dragtargetzone">-moz-dragtargetzone <span style="color:-moz-FieldText">-moz-FieldText</span></li>
<li style="background:-moz-EvenTreeRow">-moz-EvenTreeRow <span style="color:-moz-FieldText">-moz-FieldText</span></li>
<li style="background:-moz-html-CellHighlight">-moz-html-CellHighlight <span style="color:-moz-html-CellHighlightText">-moz-html-CellHighlightText</span></li>
<li style="background:-moz-html-CellHighlightText">-moz-html-CellHighlightText <span style="color:-moz-html-CellHighlight">-moz-html-CellHighlight</span></li>
<li style="background:-moz-mac-accentdarkestshadow">-moz-mac-accentdarkestshadow <span>-</span></li>
<li style="background:-moz-mac-accentdarkshadow">-moz-mac-accentdarkshadow <span>-</span></li>
<li style="background:-moz-mac-accentface">-moz-mac-accentface <span>-</span></li>
<li style="background:-moz-mac-accentlightesthighlight">-moz-mac-accentlightesthighlight <span>-</span></li>
<li style="background:-moz-mac-accentlightshadow">-moz-mac-accentlightshadow <span>-</span></li>
<li style="background:-moz-mac-accentregularhighlight">-moz-mac-accentregularhighlight <span>-</span></li>
<li style="background:-moz-mac-accentregularshadow">-moz-mac-accentregularshadow <span>-</span></li>
<li style="background:-moz-mac-chrome-active">-moz-mac-chrome-active <span>-</span></li>
<li style="background:-moz-mac-chrome-inactive">-moz-mac-chrome-inactive <span>-</span></li>
<li style="background:-moz-mac-focusring">-moz-mac-focusring <span style="color:-moz-MenuBarHoverText">-moz-MenuBarHoverText</span></li>
<li style="background:-moz-mac-menuselect">-moz-mac-menuselect <span style="color:-moz-MenuHoverText">-moz-MenuHoverText</span></li>
<li style="background:-moz-mac-menushadow">-moz-mac-menushadow <span style="color:-moz-MenuHoverText">-moz-MenuHoverText</span></li>
<li style="background:-moz-mac-menutextselect">-moz-mac-menutextselect <span style="color:-moz-MenuHoverText">-moz-MenuHoverText</span></li>
<li style="background:-moz-MenuHover">-moz-MenuHover <span style="color:-moz-MenuHoverText">-moz-MenuHoverText</span></li>
<li style="background:-moz-MenuHoverText">-moz-MenuHoverText <span style="color:-moz-MenuHover">-moz-MenuHover</span></li>
<li style="background:-moz-MenuBarText">-moz-MenuBarText <span style="color:-moz-MenuBarHoverText">-moz-MenuBarHoverText</span></li>
<li style="background:-moz-MenuBarHoverText">-moz-MenuBarHoverText <span style="color:-moz-MenuBarText">-moz-MenuBarText</span></li>
<li style="background:-moz-nativehyperlinktext">-moz-nativehyperlinktext <span style="color:Canvas">Canvas</span></li>
<li style="background:-moz-OddTreeRow">-moz-OddTreeRow <span style="color:-moz-FieldText ">-moz-FieldText </span></li>
<li style="background:-moz-win-communicationstext">-moz-win-communicationstext <span>-</span></li>
<li style="background:-moz-win-mediatext">-moz-win-mediatext <span>-</span></li>
<li style="background:-moz-win-accentcolor">-moz-win-accentcolor <span style="color:-moz-win-accentcolortext">-moz-win-accentcolortext</span></li>
<li style="background:-moz-win-accentcolortext">-moz-win-accentcolortext <span style="color:-moz-win-accentcolor">-moz-win-accentcolor</span></li>
<li style="background:-moz-activehyperlinktext">-moz-activehyperlinktext <span style="color:Canvas">Canvas</span></li>
<li style="background:-moz-default-background-color">-moz-default-background-color <span style="color:-moz-default-color">-moz-default-color</span></li>
<li style="background:-moz-default-color">-moz-default-color <span style="color:-moz-default-background-color">-moz-default-background-color</span></li>
<li style="background:-moz-hyperlinktext">-moz-hyperlinktext <span style="color:Canvas">Canvas</span></li>
<li style="background:-moz-visitedhyperlinktext">-moz-visitedhyperlinktext <span style="color:Canvas">Canvas</span></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment