Users want control. They want content, but they also want to be able to view it in the way that best meets their needs. My Yahoo! is a great example, and one that I use everyday. I can select which modules I want, drag and drop to reorder them, provide my own RSS feeds and more. I can even pick the color scheme that fits my mood.
Color is an important and often overlooked aspect of Web Programming as well, Richard. I quickly searched and found a good article for web designers on the value of choosing the right color scheme. But what if we want to ensure that each user experiences colors that fit into his/her own predefined environment? There is a way that we can do this without prompting them to pick a “skin” or “theme.”
Did you know Cascading Style Sheets (CSS) Level 2 provides for user-defined color preferences? Implementation is as easy as: P { color: WindowText; background-color: Window }.
Browser support in Windows is excellent, as highlighted by Jeff Howden’s Colors, Fonts, & Cursors matrix. You’ll have to do your own testing in other operating systems but remember; the CSS2 Specification was a formal recommendation way back in May, 1998, so it's universally well-supported. After viewing the table below (a subset of Jeff's), try changing your theme/color scheme. The colors below should update to incorporate your own defined look and feel. In fact, defaulting to the user’s settings may even increase accessibility.
| CSS | Example | Description |
|---|---|---|
| background: activeborder | Active window border | |
| background: activecaption | Active window caption background | |
| background: appworkspace | Background color of multiple document interface applications | |
| background: background | Desktop background | |
| background: buttonface | Button background | |
| background: buttonhighlight | Button highlight | |
| background: buttonshadow | Button shadow | |
| background: buttontext | Button foreground | |
| background: captiontext | Caption foreground | |
| background: graytext | Gray foreground (Disabled items) | |
| background: highlight | Highlight background | |
| background: highlighttext | Highlight foreground | |
| background: inactiveborder | Inactive window border | |
| background: inactivecaption | Inactive window caption background | |
| background: inactivecaptiontext | Inactive caption foreground | |
| background: infobackground | Tooltip background | |
| background: infotext | Tooltip foreground | |
| background: menu | Menu background | |
| background: menutext | Menu foreground | |
| background: scrollbar | Scrollbar background | |
| background: threeddarkshadow | 3D element dark shadow | |
| background: threedface | 3D element background | |
| background: threedhighlight | 3D element highlight | |
| background: threedlightshadow | 3D element light shadow | |
| background: threedshadow | 3D element shadow | |
| background: window | Window background | |
| background: windowframe | Window border | |
| background: windowtext | Window foreground |