abp/docs/en/UI/AspNetCore/Theming.md

ASP.NET Core MVC / Razor Pages: UI Theming

ABP Framework provides a complete UI Theming system with the following goals:

• Reusable application modules are developed theme-independent, so they can work with any UI theme.
• UI theme is decided by the final application.
• The theme is distributed via NuGet/NPM packages, so it is easily upgradable.
• The final application can customize the selected theme.

In order to accomplish these goals, ABP Framework;

• Determines a set of base libraries used and adapted by all the themes. So, module and application developers can depend on and use these libraries without depending on a particular theme.
• Provides a system that consists of navigation menus, toolbars, layout hooks... that is implemented by all the themes. So, the modules and the application to contribute to the layout to compose a consistent application UI.

The Current Themes

Currently, two themes are officially provided:

• The Basic Theme is the minimalist theme with the plain Bootstrap style. It is open source and free.
• The Lepton Theme is a commercial theme developed by the core ABP team and is a part of the ABP Commercial license.

There are also some community-driven themes for the ABP Framework (you can search on the web).

The Base Libraries

All the themes must depend on the @abp/aspnetcore.mvc.ui.theme.shared NPM package, so they are indirectly depending on the following libraries:

• Twitter Bootstrap as the fundamental HTML/CSS framework.
• JQuery for DOM manipulation.
• DataTables.Net for data grids.
• JQuery Validation for client side & unobtrusive validation
• FontAwesome as the fundamental CSS font library.
• SweetAlert to show fancy alert message and confirmation dialogs.
• Toastr to show toast notifications.
• Lodesh as a utility library.
• Luxon for date/time operations.
• JQuery Form for AJAX forms.
• bootstrap-datepicker to show date pickers.
• Select2 for better select/combo boxes.
• Timeago to show automatically updating fuzzy timestamps.
• malihu-custom-scrollbar-plugin for custom scrollbars.

These libraries are selected as the base libraries and available to the applications and modules.

Abstractions / Wrappers

There are some abstractions in the ABP Framework to make your code independent from some of these libraries too. Examples;

• Tag Helpers makes it easy to generate the Bootstrap UIs.
• JavaScript Message and Notification APIs provides abstractions to use the Sweetalert and Toastr.
• Forms & Validation system automatically handles the validation, so you mostly don't directly type any validation code.

The Layouts

The main responsibility of a theme is to provide the layouts. There are three pre-defined layouts must be supported by all the themes:

• Application: The default layout which is used by the main application pages.
• Account: Mostly used by the account module for login, register, forgot password... pages.
• Empty: The Minimal layout that has no layout components at all.

Layout names are constants defined in the Volo.Abp.AspNetCore.Mvc.UI.Theming.StandardLayouts class.

The Application Layout

This is the default layout which is used by the main application pages. The following image shows the user management page in the Basic Theme application layout:

And the same page is shown below with the Lepton Theme application layout:

As you can see, the page is the same, but the look is completely different in the themes above.

TODO...