ComponentOne
Material Design Lite ComponentOne MVC and Material Design Lite
Customize & Download
12

Custom CSS theme builder

Click on the color wheel to choose a primary (1) and accent (2) color to preview the theme below.

When you’ve selected a color combination you like, either reference our hosted CSS or download the CSS by clicking the button in the middle of the color wheel.

You will need to include MDL’s JavaScript alongside your customised CSS to get the full experience. This is included in MDL's default Download from the Getting Started guide.

Reference the CSS files (MDL and ComponentOne MVC Material) from CDN:

Preview

MDL components

Number Badge Icon Badge
Input is not a number!

ComponentOne MVC + MDL components

Inputs Gauges Grid

Input is not even!
80
80

Name
Outer
Inner
Cyan
rgb(0, 188, 212)
rgb(0, 151, 167)
Teal
rgb(0, 150, 136)
rgb(0, 121, 107)
Green
rgb(76, 175, 80)
rgb(56, 142, 60)
Light Green
rgb(139, 195, 74)
rgb(104, 159, 56)
Lime
rgb(205, 220, 57)
rgb(175, 180, 43)
Yellow
rgb(255, 235, 59)
rgb(251, 192, 45)
Amber
rgb(255, 193, 7)
rgb(255, 160, 0)
Orange
rgb(255, 152, 0)
rgb(245, 124, 0)
Brown
rgb(121, 85, 72)
rgb(93, 64, 55)
Blue Grey
rgb(96, 125, 139)
rgb(69, 90, 100)
Grey
rgb(158, 158, 158)
rgb(97, 97, 97)
Deep Orange
rgb(255, 87, 34)
rgb(230, 74, 25)
Red
rgb(244, 67, 54)
rgb(211, 47, 47)
Pink
rgb(233, 30, 99)
rgb(194, 24, 91)
Purple
rgb(156, 39, 176)
rgb(123, 31, 162)
Deep Purple
rgb(103, 58, 183)
rgb(81, 45, 168)
Indigo
rgb(63, 81, 181)
rgb(48, 63, 159)
Blue
rgb(33, 150, 243)
rgb(25, 118, 210)
Light Blue
rgb(3, 169, 244)
rgb(2, 136, 209)