CODEWITHSUNDEEP
javascripthtmlcsscolors
Ivan
Ivan

Reputation: 64207

Do HTML/CSS/JavaScript define constants representing system theme colours?

Do HTML/CSS/JavaScript define constants representing system theme colours? I mean those colours a user can define in the operating system (or a browser) control panel. Like standard window contents background and text colours etc.

The idea is to make a web site to respect the user preferences by default, showing light text on dark background in case the user uses such a theme in his system (while following the Occam's razor principle by avoiding introducing extra configuration).

Upvotes: 2

Views: 696

Answers (2)

unor
unor

Reputation: 96587

CSS 2.1 specifies "System Colors":

In addition to being able to assign pre-defined color values to text, backgrounds, etc., CSS2 introduced a set of named color values that allows authors to specify colors in a manner that integrates them into the operating system's graphic environment.

Example:

to set the foreground and background colors of a paragraph to the same foreground and background colors of the user's window, write the following:

p { color: WindowText; background-color: Window }

In CSS Color Module Level 3, these system colors are deprecated, "in favor of the CSS3 UI ‘appearance’ property". But it seems that this has been dropped, too (you can still find it in older drafts).

Upvotes: 1

Milche Patern
Milche Patern

Reputation: 20452

Yes you can,

Open firebug and change some css declaration like color : ActiveBorder or see webdesign.about.com/od/colorcharts/l/blsystemcolors.htm or search the net for 'css system colors'

  • ActiveBorder : Active window border.
  • ActiveCaption : Active window caption.
  • AppWorkspace Background color of multiple document interface.
  • Background Desktop background.
  • ButtonFace Face color for three-dimensional display elements.
  • ButtonHighlight Dark shadow for three-dimensional display elements (for edges facing away from the light source).
  • ButtonShadow Shadow color for three-dimensional display elements.
  • ButtonText Text on push buttons.
  • CaptionText Text in caption, size box, and scrollbar arrow box.
  • GrayText Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
  • Highlight Item(s) selected in a control.
  • HighlightText Text of item(s) selected in a control.
  • InactiveBorder Inactive window border.
  • InactiveCaption Inactive window caption.
  • InactiveCaptionText Color of text in an inactive caption.
  • InfoBackground Background color for tooltip controls.
  • InfoText Text color for tooltip controls.
  • Menu Menu background.
  • MenuText Text in menus.
  • Scrollbar Scroll bar gray area.
  • ThreeDDarkShadow Dark shadow for three-dimensional display elements.
  • ThreeDFace Face color for three-dimensional display elements.
  • ThreeDHighlight Highlight color for three-dimensional display elements.
  • ThreeDLightShadow Light color for three-dimensional display elements (for edges facing the light source).
  • ThreeDShadow Dark shadow for three-dimensional display elements.
  • Window Window background.
  • WindowFrame Window frame.
  • WindowText Text in windows.

For a better reference suggested by unor about system colors

Upvotes: 6

Related Questions