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

CSS to compile

The Metro JS modules that you are targeting


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

Used for bounce-directions to tilt on click/move

Accent Colors
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)

Compile Options