Base Theme and Accent Color

Metro JS Themes are based on the default Windows Phone themes. There are two base themes and twenty accent colors. Base themes apply to the entire page; accents only apply to a specific element and its children.

The 'base' theme has two options, 'dark' and 'light'. The dark theme will color the body of the page black and use white font. The 'light' theme uses a white body color and black font.

Base Themes

Accent Colors

Theming Live Tiles

Live tiles in Metro JS get their accent color one of two ways.

An accent color class applied directly to the live-tile.

An accent color class applied to a parent of the live-tile.

If you are using the application bar then you get the themes support for free. (Note: by default the light/dark theme is set on the body and the accent color is applied to a div with the "tiles" class).

In Metro JS the theme colors can be applied to any live-tile/list-tile or to any parent of the tile. By default, when you call $.fn.metrojs.theme.applyTheme with an accent color or use the applicationBar
Metro JS looks for a div with the 'tiles' class to add a color class to. When you choose a color on the applicationBar, the applyTheme method is called for you on the default element ( 'tiles' ). You can override which class is used by passing it in the
applicationBar options or by overriding the theme defaults object ( $.fn.metrojs.theme.defaults )

Example tiles container with color

<div class="tiles mango">
<!-- some live tiles -->
</div>

Example Live Tile with color applied directly

<div class="live-tile red">
<div>A tile! </div>
</div>

You can change between dark and light base themes with the 'dark' and 'light' classes. The default location for this class is on the body element. Again this can be overridden on the defaults option above, passed as an option to the applicationBar, or set using $.fn.metrojs.theme.applyTheme

The Accent Classes

Metro JS also has support for highlighting your content in several ways using a set of 'accent' prefixed classes. The available classes and their effects are detailed below.

Important: These classes affect the current element and any children of that element.

Custom Tile Sizes and Layouts

Starting with version 0.9, Metro JS includes support for custom layouts based off of your default tile size. The default tile size for Metro JS 0.9 is 150x150 pixels with a 5px margin, you can change the
default tile size for Metro JS using the Theme Generator ( more info ). As always you can define your own Live Tile height, width and margin with CSS or JavaScript, but the Theme Generator will lesson the burden
of calculating all of the possible sizes for tile layouts that Metro JS now offers.

All tiles and tile layout classes support #-tall and #-wide modifiers to set the height and width of the tile or container. #-tall and #-wide modifiers support the prefixes half, one, two, three, four, five, six, seven, eight, nine and ten.
Metro JS also includes single tile classes for half-tile (short hand for "half-tall half-wide") and one-tile (useful for wrapping small tiles).

An Example Custom Layout

three-wide

half-tall

half-tall

default

half-tile

half-tile

half-tile

half-tile

two-wide

The Code

Notes:

The .tile-group CSS class is intended to be a wrapper for an entire set of tiles. As an example, each tile section on my home page ( Welcome, Metro JS, Things and Stuff ) has a tile-group class applied to it class="tile-group"

The .tile-strip CSS class is intended to wrap a group of tiles within a tile-group.

Using the Theme Generator

Metro JS offers a fully featured theme generator to make it easy to compile Metro JS based on your size requirements and with only the colors you need. The 'default tile size' is used to
calculate the size of the #-wide and #-tall classes ( two-wide, half-tall, etc. ). Basic steps to use the theme generator are listed below.

Enter the height, width, and margin you would like to use for a single tile in the Size Options section

In the CSS to Compile section, you can choose which Metro JS modules you want to include.

If you have included theme support, choose the Accent Colors that you would like to include

You can add any custom accent colors by adding in the name of the accent color and the color value e.g. red, #ff0000, rgb(255, 0, 0),...

If you don't need to make any further modifications, you can choose to minify the CSS results in the Compile Options section

baseThemeColor: optional. string name of the base theme. More infoaccentColor: optional. string name of the accent color. More infostgs: optional. object containing values to use if no defaults have been set by the user. When null or undefined this points to the metrojs.theme.defaults object.

Appends the current list of base themes to the default container unless an alternate container is specified.

stgs: optional. object containing values to use if no defaults have been set by the user. When null or undefined this points to the metrojs.theme.defaults object.

Options from theme.defaults used

baseThemes: optional. an array of base theme classes to appendbaseThemeListTemplate: optional. HTML template to use for the baseThemes list with {0} used to determine where the base theme will be placed.
e.g. "<li><a href='javascript:;' title='{0}' class='accent {0}'></a></li>" baseThemeListContainer: optional. string selector to decide where baseThemeListTemplate is appended.

Appends the current list of accent colors to the default container unless an alternate container is specified.

stgs: optional. object containing values to use if no defaults have been set by the user. When null or undefined this points to the metrojs.theme.defaults object.

Options from theme.defaults used

accentColors: optional. an array of accent color classes to appendaccentListTemplate: optional. HTML template to use for the accentColors list with {0} used to determine where the accent color will be placed.
e.g. "<li><a href='javascript:;' title='{0}' class='accent {0}'></a></li>" accentListContainer: optional. string selector to decide where accentListTemplate is appended.