By choosing a style sheet, a web presentation developer can develop presentations with different color themes. Currently there are 7 built-in color themes. In addition a presentation developer can easily define their own custom color themes and incorporate them into presentations either embedded in the root web page or linked in like the built-in themes.

The code below shows the web presentation for the blue color theme example (blue.html). The other color theme examples are identical except for the href attribute of the theme <link> tag and the title attribute of the ROOT <div>. Each of the examples gets its root content, a table, a list, and a progression from the file example.html

The XHTML file below below provides four <div> tags that are included into the color theme examples.

<link rel="stylesheet" type="text/css" href="/~gshute/jsLib/blue.css"/>

No color theme <link> tag

<link rel="stylesheet" type="text/css" href="/~gshute/jsLib/green.css"/>

<link rel="stylesheet" type="text/css" href="/~gshute/jsLib/tan.css"/>

<link rel="stylesheet" type="text/css" href="/~gshute/jsLib/yellow.css"/>

<link rel="stylesheet" type="text/css" href="/~gshute/jsLib/dark-cyan.css"/>

<link rel="stylesheet" type="text/css" href="/~gshute/jsLib/dark-orange.css"/>

<link rel="stylesheet" type="text/css" href="/~gshute/jsLib/dark-purple.css"/>

Recent browsers support cascading style sheets (CSS) using definitions from other style sheets. This makes it easy to define a color theme for web presentations. You just write a CSS file that defines the following four basic colors values. These values are used in various places in the main web presentation CSS file /~gshute/jsLib/library.css.

• --border-color specifies the color of borders that are added to the root pane and to its layout panes to separate the panes.
• --nav-bg-color specifies the background color in the navigation pane.
• --content-bg-color specifies the basic background color. This color is also used as background for selected menu items, which includes progression menus.
• --text-color specifies the text color. This color is also used for progression widget foreground.
• --table-even-bg-color specifies the background color for even number rows in a table that uses a conforming table style sheet such as /~gshute/common/table.css.
• --table-odd-bg-color specifies the background color for odd number non-header rows in a table that uses a conforming table style sheet such as /~gshute/common/table.css.

The colors specified for these values can use any of the syntax forms described in the <color> web page of the Moz://a (Mozilla) Web technology for developers web site.

The example in the menu to the left has a link to an utterly tasteless custom theme.