Adding New Metronic Theme

Metronic theme currently has 12 different themes and AspNet Zero includes them all. However, you might want to add a new theme option designed by your team to those options. This document explains step by step to add a new theme option to AspNet Zero. Just note that, the added theme must be a Metronic theme or at least it must be compatible with Metronic.

Rest of the document will use ThemeX as the new theme name.

Go to *Application.Shared project. Open AppConsts.cs and add a new field named ThemeX.
Go to *.Web.Core project.
- Create new UICustomizer named ThemeXUiCustomizer.cs . Copy ThemeDefaultUiCustomizer.cs into ThemeXUiCustomizer.cs and change necessary settings. (It has setting methods, If your new ThemeX also have that settings keep them otherwise delete them)
- Open UiThemeCustomizerFactory.cs and add ThemeX code parts in GetUiCustomizerInternal method.
```
...
if (theme.Equals(AppConsts.ThemeX, StringComparison.InvariantCultureIgnoreCase))
{
      return _serviceProvider.GetService<ThemeXUiCustomizer>();
}
...
```

Go to *.Core project. Open AppSettingProvider.cs

Add a function named GetThemeXSettings which returns ThemeX settings.

Call it in GetSettingDefinitions function

... 
return GetHostSettings().Union(GetTenantSettings()).Union(GetSharedSettings())
                // theme settings
                .Union(GetDefaultThemeSettings())
                .Union(GetTheme2Settings())
                .Union(GetTheme3Settings())
                .Union(GetTheme4Settings())
                .Union(GetTheme5Settings())
                .Union(GetTheme6Settings())
                .Union(GetTheme7Settings())
                .Union(GetTheme8Settings())
                .Union(GetTheme9Settings())
                .Union(GetTheme10Settings())
                .Union(GetTheme11Settings())
                .Union(GetTheme12Settings())
                .Union(GetThemeXSettings());//add ThemeXSettings
...

Go to *.Web.Mvc project

Go to Areas -> App -> Views folder.

Create new view named _ThemeXSettings.cshtml . Copy _DefaultSettings.chtml content into _ThemeXSettings.cshtml. (Make same changes which you did in ThemeXUiCustomizer)
Open Index.cshtml and add your new theme.

<!--Add tab-->
<ul class="nav nav-pills" role="tablist">
...
<!----Add These Part---->
<li class="nav-item">
    <a href="#themeX" class="nav-link @(Model.Theme == AppConsts.ThemeX ? "active" : "")" data-toggle="tab" role="tab">
        <img src="@(ApplicationPath)Common/Images/metronic-themes/themeX.png" width="150" /><!--Your theme image path-->
        <span class="theme-name">@L("Theme_" + AppConsts.ThemeX.ToPascalCase())</span>
    </a>
</li>
<!-------->
<ul>
<div class="tab-content">
...
<!----Add These Part---->
<div id="themeX" class="tab-pane theme-selection @(Model.Theme == AppConsts.ThemeX ? "active show" : "")">
    @await Html.PartialAsync("_ThemeXSettings", Model.GetThemeSettings(AppConsts.ThemeX))
</div>
<!-------->
</div>

Go to **Shared -> Components **folder.

Copy AppAreaNameDefaultBrandViewComponent and **AppAreaNameDefaultFooterViewComponent ** folders. These folders has 2 component Change their name and necessary parts.
Go to wwwroot -> metronic -> themes and create folder named themeX. Copy default folder content here and change what you need (change css, js as you wish).
Open bundle.json and add new bundles that you add wwwroot -> metronic -> themes -> themeX

Adding New Metronic Theme

In this document