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, openAppConsts.cs
and add new field named ThemeX. -
Go to
*.Web.Core
project.-
Create new UICustomizer named
ThemeXUiCustomizer.cs
. CopyThemeDefaultUiCustomizer.cs
intoThemeXUiCustomizer.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 inGetUiCustomizerInternal
function.... if (theme.Equals(AppConsts.ThemeX, StringComparison.InvariantCultureIgnoreCase)) { return _serviceProvider.GetService<ThemeXUiCustomizer>(); } ...
-
-
Go to
*.Core
project. OpenAppSettingProvider.cs
-
Add a method 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 src-> app -> shared -> layout folder
- Go to themes folder.
- Create a folder named
themeX
and go to themeX folder.- Create components named
themeX-brand
andthemeX-layout
- Copy their body from default theme components (from
default-brand
anddefault-layout
) and change needed changes. - Create
ThemeXThemeAssetContributor
and copy its content fromDefaultThemeAssetContributor
.This class returns additional assets so make needed changes for your new themeX.
- Create components named
- Create a folder named
- Go to theme-selection folder. Open
theme-selection-panel.component.html
and add themeX to list.
- Go to themes folder.
- Go to src -> shared -> helpers and open
ThemeAssetContributorFactory.ts
. AddThemeXThemeAssetContributor
togetCurrent
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 fromdefault-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> </tab>
-
-
Open
ui-customization.module.ts
and addThemeXThemeUiSettingsComponent
to declarations.
-
-
Go to src -> app . Open
app.module.ts
and addThemeXLayoutComponent
andThemeXBrandComponent
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> </div>
-
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.