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.

.Net Part
  • Go to *Application.Shared project, open AppConsts.cs and add 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 function.

      if (theme.Equals(AppConsts.ThemeX, StringComparison.InvariantCultureIgnoreCase))
            return _serviceProvider.GetService<ThemeXUiCustomizer>();
  • Go to *.Core project. Open AppSettingProvider.cs

    • Add a method named GetThemeXSettings which returns ThemeX settings.

    • Call it in GetSettingDefinitions function

      return GetHostSettings().Union(GetTenantSettings()).Union(GetSharedSettings())
                      // theme settings
                      .Union(GetThemeXSettings());//add ThemeXSettings
Angular Part
  • Go to src-> app -> shared -> layout folder
    • Go to themes folder.
      • Create a folder named themeX and go to themeX folder.
        • Create components named themeX-brand and themeX-layout
        • Copy their body from default theme components (from default-brand and default-layout) and change needed changes.
        • Create ThemeXThemeAssetContributor and copy its content from DefaultThemeAssetContributor .This class returns additional assets so make needed changes for your new themeX.
    • Go to theme-selection folder. Open theme-selection-panel.component.html and add themeX to list.
  • Go to src -> shared -> helpers and open ThemeAssetContributorFactory.ts. Add ThemeXThemeAssetContributor to getCurrent function
if (theme === 'themeX') {
	return new ThemeXThemeAssetContributor().getAssetUrls();
  • Go to src -> app -> admin folder

    • Go to ui-customization folder.

      • Create themex-theme-ui-settings component. Copy its content from default-theme-ui-settings component. This is where you select UI settings, If your new ThemeX also have that settings keep them otherwise delete them and add what is needed.

      • Open ui-customization.component.html and add your component.

        <tab *ngFor="let themeSetting of themeSettings" [active]="themeSetting.theme == currentThemeName">
            <themex-theme-ui-settings *ngIf="themeSetting.theme == 'themeX'" [settings]="themeSetting"></themex-theme-ui-settings>
    • Open ui-customization.module.ts and add ThemeXThemeUiSettingsComponentto declarations.

  • Go to src -> app . Open app.module.ts and add ThemeXLayoutComponent and ThemeXBrandComponent to declarations.

  • Go to src -> app. Open app.component.html and add ThemeX code part.

    <div [ngClass]="{'subscription-bar-visible': subscriptionStatusBarVisible()}">
        <themex-layout *ngIf="theme=='themeX'"></themex-layout>
  • If your theme uses dynamic bundles, open the bundle.js and add your bundles.

    ASP.NET Zero has custom CSS file for datepicker in Angular version (bs-datepicker.css). If the default design is not compatible with your theme, you can change the related CSS file.

In this document