Metro JS Theme Generator

This theme generator will let you compile the css files for Metro JS to get the exact sizes you need. This tool uses the .less javascript compiler to compile the Metro JS
.less src files with the settings and modules you choose. The resulting theme along with a preview of your theme will appear below

Size Options

The default tile size and the size the #-wide/#-tall size classes will be based off of

height

width

margin

a new size row. This will generate a media query for the max/min width desired.

tile size for
:
and
:

height

width

margin

CSS to compile

The Metro JS modules that you are targeting

liveTile:

theme:

applicationBar:

Advanced

tileSizes:

Used for tile sizing, layout, and media queries. Uncheck if you plan to separate the responsive CSS from the theming.

bounce:

Used for bounce-directions to tilt on click/move

Accent Colors

select all:

select none:

Custom Colors

Add custom color definitions here to include them in Metro JS. The value field can be any color format supported by browsers e.g. red, #ff0000, rgb(255, 0,0)