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

In this document