ASP.NET Core MVC Controls | ComponentOne
Styling / Themes
In This Topic
    Themes
    In This Topic

    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
<c1-styles theme="cocoa" />

// Set using Theme Enum
<c1-styles theme="@Themes.Cocoa" />
        
//Set Material Theme
<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