A theme is a collection of GUI details including colors, fonts, images and skins that you can apply to customize the appearance of your control. MVC Edition supports an array of built-in themes that you can either directly select at the time of creating an MVC application, or set at the time of registering resources. In addition, you can also set the Material themes while registering resources for your MVC application.
By default, when you create an MVC application, it uses a common default theme. The appearance is implemented using a specific C1 theme called "default". ASP.NET MVC controls are provided with many different predefined visual themes, that allows the user to provide a consistent appearance to all the MVC controls within your website pages. These predefined themes are defined in C1.Web.Mvc.Themes static class.
There are two ways by which you can apply themes to your MVC control.
_Layout.cshtml |
Copy Code
|
---|---|
//Set C1 Theme @Html.C1().Styles().Theme("cocoa") //Set using Theme Enum @Html.C1().Styles().Theme(C1.Web.Mvc.Themes.Cocoa) //Set Material Theme @Html.C1().Styles().Theme("material.deep_orange-red") |
The complete list of material themes supported with ComponentOne MVC Controls are provided below.
Material Themes
material.amber-blue | material.cyan-pink | material.indigo-light_blue | material.pink-deep_orange |
material.amber-cyan | material.cyan-purple | material.indigo-light_green | material.pink-deep_purple |
material.amber-deep_orange | material.cyan-red | material.indigo-lime | material.pink-green |
material.amber-deep_purple | material.cyan-teal | material.indigo-orange | material.pink-indigo |
material.amber-green | material.cyan-yellow | material.indigo-pink | material.pink-light_blue |
material.amber-indigo | material.deep_orange-amber | material.indigo-purple | material.pink-light_green |
material.amber-light_blue | material.deep_orange-blue | material.indigo-red | material.pink-lime |
material.amber-light_green | material.deep_orange-cyan | material.indigo-teal | material.pink-orange |
material.amber-lime | material.deep_orange-deep_purple | material.indigo-yellow | material.pink-purple |
material.amber-orange | material.deep_orange-green | material.light_blue-amber | material.pink-red |
material.amber-pink | material.deep_orange-indigo | material.light_blue-blue | material.pink-teal |
material.amber-purple | material.deep_orange-light_blue | material.light_blue-cyan | material.pink-yellow |
material.amber-red | material.deep_orange-light_green | material.light_blue-deep_orange | material.purple-amber |
material.amber-teal | material.deep_orange-lime | material.light_blue-deep_purple | material.purple-blue |
material.amber-yellow | material.deep_orange-orange | material.light_blue-green | material.purple-cyan |
material.blue_grey-amber | material.deep_orange-pink | material.light_blue-indigo | material.purple-deep_orange |
material.blue_grey-blue | material.deep_orange-purple | material.light_blue-light_green | material.purple-deep_purple |
material.blue_grey-cyan | material.deep_orange-red | material.light_blue-lime | material.purple-green |
material.blue_grey-deep_orange | material.deep_orange-teal | material.light_blue-orange | material.purple-indigo |
material.blue_grey-deep_purple | material.deep_orange-yellow | material.light_blue-pink | material.purple-light_blue |
material.blue_grey-green | material.deep_purple-amber | material.light_blue-purple | material.purple-light_green |
material.blue_grey-indigo | material.deep_purple-blue | material.light_blue-red | material.purple-lime |
material.blue_grey-light_blue | material.deep_purple-cyan | material.light_blue-teal | material.purple-orange |
material.blue_grey-light_green | material.deep_purple-deep_orange | material.light_blue-yellow | material.purple-pink |
material.blue_grey-lime | material.deep_purple-green | material.light_green-amber | material.purple-red |
material.blue_grey-orange | material.deep_purple-indigo | material.light_green-blue | material.purple-teal |
material.blue_grey-pink | material.deep_purple-light_blue | material.light_green-cyan | material.purple-yellow |
material.blue_grey-purple | material.deep_purple-light_green | material.light_green-deep_orange | material.red-amber |
material.blue_grey-red | material.deep_purple-lime | material.light_green-deep_purple | material.red-blue |
material.blue_grey-teal | material.deep_purple-orange | material.light_green-green | material.red-cyan |
material.blue_grey-yellow | material.deep_purple-pink | material.light_green-indigo | material.red-deep_orange |
material.blue-amber | material.deep_purple-purple | material.light_green-light_blue | material.red-deep_purple |
material.blue-cyan | material.deep_purple-red | material.light_green-lime | material.red-green |
material.blue-deep_orange | material.deep_purple-teal | material.light_green-orange | material.red-indigo |
material.blue-deep_purple | material.deep_purple-yellow | material.light_green-pink | material.red-light_blue |
material.blue-green | material.green-amber | material.light_green-purple | material.red-light_green |
material.blue-indigo | material.green-blue | material.light_green-red | material.red-lime |
material.blue-light_blue | material.green-cyan | material.light_green-teal | material.red-orange |
material.blue-light_green | material.green-deep_orange | material.light_green-yellow | material.red-pink |
material.blue-lime | material.green-deep_purple | material.lime-amber | material.red-purple |
material.blue-orange | material.green-indigo | material.lime-blue | material.red-teal |
material.blue-pink | material.green-light_blue | material.lime-cyan | material.red-yellow |
material.blue-purple | material.green-light_green | material.lime-deep_orange | material.teal-amber |
material.blue-red | material.green-lime | material.lime-deep_purple | material.teal-blue |
material.blue-teal | material.green-orange | material.lime-green | material.teal-cyan |
material.blue-yellow | material.green-pink | material.lime-indigo | material.teal-deep_orange |
material.brown-amber | material.green-purple | material.lime-light_blue | material.teal-deep_purple |
material.brown-blue | material.green-red | material.lime-light_green | material.teal-green |
material.brown-cyan | material.green-teal | material.lime-orange | material.teal-indigo |
material.brown-deep_orange | material.green-yellow | material.lime-pink | material.teal-light_blue |
material.brown-deep_purple | material.grey-amber | material.lime-purple | material.teal-light_green |
material.brown-green | material.grey-blue | material.lime-red | material.teal-lime |
material.brown-indigo | material.grey-cyan | material.lime-teal | material.teal-orange |
material.brown-light_blue | material.grey-deep_orange | material.lime-yellow | material.teal-pink |
material.brown-light_green | material.grey-deep_purple | material.orange-amber | material.teal-purple |
material.brown-lime | material.grey-green | material.orange-blue | material.teal-red |
material.brown-orange | material.grey-indigo | material.orange-cyan | material.teal-yellow |
material.brown-pink | material.grey-light_blue | material.orange-deep_orange | material.yellow-amber |
material.brown-purple | material.grey-light_green | material.orange-deep_purple | material.yellow-blue |
material.brown-red | material.grey-lime | material.orange-green | material.yellow-cyan |
material.brown-teal | material.grey-orange | material.orange-indigo | material.yellow-deep_orange |
material.brown-yellow | material.grey-pink | material.orange-light_blue | material.yellow-deep_purple |
material.cyan-amber | material.grey-purple | material.orange-light_green | material.yellow-green |
material.cyan-blue | material.grey-red | material.orange-lime | material.yellow-indigo |
material.cyan-deep_orange | material.grey-teal | material.orange-pink | material.yellow-light_blue |
material.cyan-deep_purple | material.grey-yellow | material.orange-purple | material.yellow-light_green |
material.cyan-green | material.indigo-amber | material.orange-red | material.yellow-lime |
material.cyan-indigo | material.indigo-blue | material.orange-teal | material.yellow-orange |
material.cyan-light_blue | material.indigo-cyan | material.orange-yellow | material.yellow-pink |
material.cyan-light_green | material.indigo-deep_orange | material.pink-amber | material.yellow-purple |
material.cyan-lime | material.indigo-deep_purple | material.pink-blue | material.yellow-red |
material.cyan-orange | material.indigo-green | material.pink-cyan | material.yellow-teal |