@@ -67,7 +86,13 @@ If you prefer to use code-behind file for the C# code of your component, you can
**MyBlazor.razor.cs**
````csharp
+{{if UI == "BlazorServer"}}
+using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic;
+{{end}}
+{{if UI == "Blazor"}}
using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic;
+{{end}}
+
using Volo.Abp.DependencyInjection;
namespace MyProject.Blazor.Components
diff --git a/docs/en/UI/Blazor/Error-Handling.md b/docs/en/UI/Blazor/Error-Handling.md
index 35aff041af..6582ee0c8e 100644
--- a/docs/en/UI/Blazor/Error-Handling.md
+++ b/docs/en/UI/Blazor/Error-Handling.md
@@ -1,5 +1,12 @@
# Blazor UI: Error Handling
+````json
+//[doc-params]
+{
+ "UI": ["Blazor", "BlazorServer"]
+}
+````
+
Blazor, by default, shows a yellow line at the bottom of the page if any unhandled exception occurs. However, this is not useful in a real application.
ABP provides an automatic error handling system for the Blazor UI.
@@ -20,6 +27,8 @@ There are different type of `Exception` classes handled differently by the ABP F
**Example**
+{{if UI == "BlazorServer"}}
+
````csharp
@page "/"
@using Volo.Abp
@@ -28,13 +37,6 @@ There are different type of `Exception` classes handled differently by the ABP F
@code
{
- //for Blazor WASM
- private void TestException()
- {
- throw new UserFriendlyException("A user friendly error message!");
- }
-
- //for Blazor Server
private async Task TestException()
{
try
@@ -49,6 +51,26 @@ There are different type of `Exception` classes handled differently by the ABP F
}
````
+{{end}}
+
+{{if UI == "Blazor"}}
+
+````csharp
+@page "/"
+@using Volo.Abp
+
+
+
+@code
+{
+ private void TestException()
+ {
+ throw new UserFriendlyException("A user friendly error message!");
+ }
+}
+````
+{{end}}
+
ABP automatically handle the exception and show an error message to the user:

diff --git a/docs/en/UI/Blazor/Theming.md b/docs/en/UI/Blazor/Theming.md
index 067052e322..c7f92189de 100644
--- a/docs/en/UI/Blazor/Theming.md
+++ b/docs/en/UI/Blazor/Theming.md
@@ -1,5 +1,12 @@
# Blazor UI: Theming
+````json
+//[doc-params]
+{
+ "UI": ["Blazor", "BlazorServer"]
+}
+````
+
## Introduction
ABP Framework provides a complete **UI Theming** system with the following goals:
@@ -16,17 +23,28 @@ In order to accomplish these goals, ABP Framework;
### Current Themes
-Currently, two themes are **officially provided**:
+Currently, three themes are **officially provided**:
* The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**.
* The [Lepton Theme](https://commercial.abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP Commercial](https://commercial.abp.io/) license.
+* The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has a [commercial](https://docs.abp.io/en/commercial/latest/themes/lepton-x/commercial/blazor) and a [lite](../../Themes/LeptonXLite/blazor.md) version.
## Overall
### The Base Libraries
+{{if UI == "Blazor"}}
+
All the themes must depend on the [Volo.Abp.AspNetCore.Components.WebAssembly.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.Theming) NuGet package, so they are indirectly depending on the following libraries:
+{{end}}
+
+{{if UI == "BlazorServer"}}
+
+All the themes must depend on the [Volo.Abp.AspNetCore.Components.Server.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.Theming) NuGet package, so they are indirectly depending on the following libraries:
+
+{{end}}
+
* [Twitter Bootstrap](https://getbootstrap.com/) as the fundamental HTML/CSS framework.
* [Blazorise](https://github.com/stsrki/Blazorise) as a component library that supports the Bootstrap and adds extra components like Data Grid and Tree.
* [FontAwesome](https://fontawesome.com/) as the fundamental CSS font library.
@@ -61,9 +79,21 @@ The application layout typically includes the following parts;
A theme is simply a Razor Class Library.
-### The Easy Way
+### The Easiest Way
-The easiest way to create a new theme is to copy the [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) and customize it. Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` NuGet package and reference to the local project.
+The easiest way of creating a new theme is adding [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) module with source codes and customizing it.
+
+{{if UI == "Blazor"}}
+```bash
+abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file
+```
+{{end}}
+
+{{if UI == "BlazorServer"}}
+```bash
+abp add-package Volo.Abp.AspNetCore.Components.Server.BasicTheme --with-source-code --add-to-solution-file
+```
+{{end}}
### Global Styles / Scripts
@@ -165,6 +195,9 @@ Configure