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(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>
      <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))
    • 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