ComponentOne ASP.NET MVC Controls
Themes
Styling > Themes

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.

  1. Using ComponentOne Template - You can use the ComponentOne ASP.NET MVC Application Wizard to set a theme to your application using the Theme option. In the image below, you can see the list of themes that are available for ASP.NET MVC application.



  2. Using Visual Studio Template - You can set the above mentioned themes and material themes manually while you are registering resources for your MVC application. To apply a theme in your MVC application, you need to add the following code in _Layout.cshtml file.
    _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

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page