abpframework · maliming · Jul 2, 2025 · Jun 25, 2025 · Jun 25, 2025 · Jun 30, 2025
diff --git a/docs/en/tutorials/microservice/images/abp-studio-abp-suite-inside-dark.png b/docs/en/tutorials/microservice/images/abp-studio-abp-suite-inside-dark.png
diff --git a/...als/microservice/images/abp-studio-add-entity-framework-core-migration-dark.png b/...als/microservice/images/abp-studio-add-entity-framework-core-migration-dark.png
diff --git a/...utorials/microservice/images/abp-studio-add-new-microservice-command-2-dark.png b/...utorials/microservice/images/abp-studio-add-new-microservice-command-2-dark.png
diff --git a/.../tutorials/microservice/images/abp-studio-add-new-microservice-command-dark.png b/.../tutorials/microservice/images/abp-studio-add-new-microservice-command-dark.png
diff --git a/...tutorials/microservice/images/abp-studio-add-new-microservice-dialog-2-dark.png b/...tutorials/microservice/images/abp-studio-add-new-microservice-dialog-2-dark.png
diff --git a/.../images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png b/.../images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png
diff --git a/...n/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-dark.png b/...n/tutorials/microservice/images/abp-studio-add-new-microservice-dialog-dark.png
diff --git a/...vice/images/abp-studio-add-new-microservice-dialog-database-management-dark.png b/...vice/images/abp-studio-add-new-microservice-dialog-database-management-dark.png
diff --git a/...croservice/images/abp-studio-add-new-microservice-dialog-database-step-dark.png b/...croservice/images/abp-studio-add-new-microservice-dialog-database-step-dark.png
diff --git a/...vice/images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png b/...vice/images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png
diff --git a/...service/images/abp-studio-add-new-microservice-dialog-integration-step-dark.png b/...service/images/abp-studio-add-new-microservice-dialog-integration-step-dark.png
diff --git a/...vice/images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png b/...vice/images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-browse-catalog-service-dark.png b/docs/en/tutorials/microservice/images/abp-studio-browse-catalog-service-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-browse-ordering-service-dark.png b/docs/en/tutorials/microservice/images/abp-studio-browse-ordering-service-dark.png
diff --git a/...ials/microservice/images/abp-studio-browser-catalog-service-swagger-ui-dark.png b/...ials/microservice/images/abp-studio-browser-catalog-service-swagger-ui-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-catalog-service-start-dark.png b/docs/en/tutorials/microservice/images/abp-studio-catalog-service-start-dark.png
diff --git a/...croservice/images/abp-studio-entity-framework-core-add-migration-order-dark.png b/...croservice/images/abp-studio-entity-framework-core-add-migration-order-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-blazor-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-blazor-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-2-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-blazor-dark.png
diff --git a/...utorials/microservice/images/abp-studio-generate-proxy-blazor-server-2-dark.png b/...utorials/microservice/images/abp-studio-generate-proxy-blazor-server-2-dark.png
diff --git a/.../tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-dark.png b/.../tutorials/microservice/images/abp-studio-generate-proxy-blazor-server-dark.png
diff --git a/...als/microservice/images/abp-studio-generate-proxy-blazor-webapp-server-dark.png b/...als/microservice/images/abp-studio-generate-proxy-blazor-webapp-server-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-dark.png b/docs/en/tutorials/microservice/images/abp-studio-generate-proxy-window-dark.png
diff --git a/...s/microservice/images/abp-studio-generate-proxy-window-ordering-module-dark.png b/...s/microservice/images/abp-studio-generate-proxy-window-ordering-module-dark.png
diff --git a/...icroservice/images/abp-studio-new-catalog-service-in-solution-explorer-dark.png b/...icroservice/images/abp-studio-new-catalog-service-in-solution-explorer-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-dark.png b/docs/en/tutorials/microservice/images/abp-studio-open-abp-suite-dark.png
diff --git a/.../tutorials/microservice/images/abp-studio-open-abp-suite-select-module-dark.png b/.../tutorials/microservice/images/abp-studio-open-abp-suite-select-module-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-open-with-visual-studio-dark.png b/docs/en/tutorials/microservice/images/abp-studio-open-with-visual-studio-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-run-solution-dark.png b/docs/en/tutorials/microservice/images/abp-studio-run-solution-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-run-start-all-dark.png b/docs/en/tutorials/microservice/images/abp-studio-run-start-all-dark.png
diff --git a/...tudio-solution-explorer-initial-cloud-crm-microservice-solution-blazor-dark.png b/...tudio-solution-explorer-initial-cloud-crm-microservice-solution-blazor-dark.png
diff --git a/...s/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-dark.png b/...s/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-dark.png
diff --git a/...bp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng-dark.png b/...bp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng-dark.png
diff --git a/...microservice/images/abp-studio-solution-explorer-ordering-microservice-dark.png b/...microservice/images/abp-studio-solution-explorer-ordering-microservice-dark.png
diff --git a/docs/en/tutorials/microservice/images/abp-studio-solution-runner-play-all-dark.png b/docs/en/tutorials/microservice/images/abp-studio-solution-runner-play-all-dark.png
diff --git a/.../tutorials/microservice/images/add-catalog-service-contracts-reference-dark.png b/.../tutorials/microservice/images/add-catalog-service-contracts-reference-dark.png
diff --git a/...n/tutorials/microservice/images/add-package-reference-ordering-service-dark.png b/...n/tutorials/microservice/images/add-package-reference-ordering-service-dark.png
diff --git a/docs/en/tutorials/microservice/images/catalog-service-dependency-dark.png b/docs/en/tutorials/microservice/images/catalog-service-dependency-dark.png
diff --git a/docs/en/tutorials/microservice/images/create-order-dark.png b/docs/en/tutorials/microservice/images/create-order-dark.png
diff --git a/docs/en/tutorials/microservice/images/generate-catalog-service-proxy-dark.png b/docs/en/tutorials/microservice/images/generate-catalog-service-proxy-dark.png
diff --git a/docs/en/tutorials/microservice/images/generate-proxy-catalog-service-dark.png b/docs/en/tutorials/microservice/images/generate-proxy-catalog-service-dark.png
diff --git a/docs/en/tutorials/microservice/images/import-module-dark.png b/docs/en/tutorials/microservice/images/import-module-dark.png
diff --git a/docs/en/tutorials/microservice/images/import-module-dialog-dark.png b/docs/en/tutorials/microservice/images/import-module-dialog-dark.png
diff --git a/docs/en/tutorials/microservice/images/install-module-dialog-dark.png b/docs/en/tutorials/microservice/images/install-module-dialog-dark.png
diff --git a/docs/en/tutorials/microservice/images/ordering-service-swagger-ui-dark.png b/docs/en/tutorials/microservice/images/ordering-service-swagger-ui-dark.png
diff --git a/docs/en/tutorials/microservice/images/visual-studio-new-migration-class-dark.png b/docs/en/tutorials/microservice/images/visual-studio-new-migration-class-dark.png
diff --git a/...ls/microservice/images/visual-studio-solution-explorer-catalog-service-dark.png b/...ls/microservice/images/visual-studio-solution-explorer-catalog-service-dark.png
diff --git a/docs/en/tutorials/microservice/images/vs-ordering-contracts-dark.png b/docs/en/tutorials/microservice/images/vs-ordering-contracts-dark.png
diff --git a/docs/en/tutorials/microservice/images/vs-ordering-entity-dark.png b/docs/en/tutorials/microservice/images/vs-ordering-entity-dark.png
diff --git a/docs/en/tutorials/microservice/images/web-orders-page-dark.png b/docs/en/tutorials/microservice/images/web-orders-page-dark.png
diff --git a/docs/en/tutorials/microservice/images/web-orders-page-with-product-name-dark.png b/docs/en/tutorials/microservice/images/web-orders-page-with-product-name-dark.png
diff --git a/docs/en/tutorials/microservice/index.md b/docs/en/tutorials/microservice/index.md
@@ -1,5 +1,13 @@
 # Microservice Development Tutorial
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -30,7 +38,7 @@ This tutorial is organized as the following parts:
 
 ## Download the Source Code
 
-After logging in to the ABP website, you can download the source code from [here](https://abp.io/api/download/samples/cloud-crm-mvc-ef).
+After logging in to the ABP website, you can download the source code from {{if UI == "MVC"}} [here](https://abp.io/api/download/samples/cloud-crm-mvc-ef) {{else if UI == "NG"}} [here](https://abp.io/api/download/samples/cloud-crm-ng-ef) {{else if UI == "Blazor"}} [here](https://abp.io/api/download/samples/cloud-crm-blazor-wasm-ef) {{else if UI == "BlazorServer"}} [here](https://abp.io/api/download/samples/cloud-crm-blazor-server-ef) {{else if UI == "BlazorWebApp"}} [here](https://abp.io/api/download/samples/cloud-crm-blazor-webapp-ef) {{end}}.
 
 ## See Also
 

diff --git a/docs/en/tutorials/microservice/part-01.md b/docs/en/tutorials/microservice/part-01.md
@@ -1,5 +1,13 @@
 # Microservice Tutorial Part 01: Creating the Initial Solution
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -13,19 +21,49 @@
 Follow the *[Get Started](../../get-started/microservice.md)* guide to create a new layered web application with the following configurations:
 
 * **Solution name**: `CloudCrm`
+{{if DB == "EF"}}
 * **Database Provider**: Entity Framework Core
-* **Database Management System**: SQL Server
+{{end}}
+{{if DB == "Mongo"}}
+* **Database Provider**: MongoDB
+{{end}}
+{{if UI == "MVC"}}
 * **UI Framework**: MVC / Razor Pages
+{{end}}
+{{if UI == "Blazor"}}
+* **UI Framework**: Blazor WebAssembly
+{{end}}
+{{if UI == "BlazorServer"}}
+* **UI Framework**: Blazor Server
+{{end}}
+{{if UI == "BlazorWebApp"}}
+* **UI Framework**: Blazor Web App
+{{end}}
+{{if UI == "NG"}}
+* **UI Framework**: Angular
+{{end}}
 * **Mobile framework**: None
 * **Public website**: Selected
 
 You can select the other options based on your preference.
 
-> **Please complete the *[Get Started](../../get-started/microservice.md)* guide and run the applications before going further.** You can skip the sections after the *Running the Solution* section, if you don't prefer to complete all.
+> **Please complete the *[Get Started](../../get-started/layered-web-application.md)* guide and run the web application before going further.** You can skip the sections after the *Running the Solution* section, if you don't prefer to complete all.
 
 The initial solution structure should be like the following in ABP Studio's *[Solution Explorer](../../studio/solution-explorer.md)*:
 
-![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution.png)
+{{if UI == "MVC"}}
+
+![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-dark.png)
+
+{{else if UI == "NG"}}
+
+![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-ng-dark.png)
+
+{{else}}
+
+![abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor](images/abp-studio-solution-explorer-initial-cloud-crm-microservice-solution-blazor-dark.png)
+
+{{end}}
 
 > ABP Studio will perform a few additional steps after creating your solution. **Please wait until all the background tasks are completed** before going further.
 
@@ -37,4 +75,4 @@ You can see the *[Microservice Solution Template](../../solution-templates/micro
 
 ## Summary
 
-In this part, you've created the initial microservice solution, which already contains a few infrastructure services. We will create our first business service in the [next part](part-02.md).
+In this part, you've created the initial microservice solution, which already contains a few infrastructure services. We will create our first business service in the [next part](part-02.md).
diff --git a/docs/en/tutorials/microservice/part-02.md b/docs/en/tutorials/microservice/part-02.md
@@ -1,5 +1,13 @@
 # Microservice Tutorial Part 02: Creating the initial Catalog service
 
+````json
+//[doc-params]
+{
+    "UI": ["MVC","Blazor","BlazorServer", "BlazorWebApp", "NG"],
+    "DB": ["EF","Mongo"]
+}
+````
+
 ````json
 //[doc-nav]
 {
@@ -20,40 +28,61 @@ In this tutorial, you will create a new Catalog service and integrate it to the
 
 Right-click the `services` folder in the *Solution Explorer* panel, select the *Add* -> *New Module* -> *Microservice* command:
 
-![abp-studio-add-new-microservice-command](images/abp-studio-add-new-microservice-command.png)
+![abp-studio-add-new-microservice-command](images/abp-studio-add-new-microservice-command-dark.png)
 
 This command opens a new dialog to define the properties of the new microservice. You can use the following values to create a new microservice named `CatalogService`:
 
-![abp-studio-add-new-microservice-dialog](images/abp-studio-add-new-microservice-dialog.png)
+![abp-studio-add-new-microservice-dialog](images/abp-studio-add-new-microservice-dialog-dark.png)
 
 When you click the *Next* button, you are redirected to the database provider selection step.
 
 ### Selecting the Database Type
 
 Here, you can select the database provider to be used by the new microservice:
 
-![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step.png)
+{{if DB == "Mongo"}}
 
-Select *Entity Framework Core* option and proceed the *Next* step.
+![abp-studio-add-new-microservice-dialog-database-step-mongo](images/abp-studio-add-new-microservice-dialog-database-step-mongo-dark.png)
 
-### Integrating to the Solution
+Select *MongoDB* option and proceed the *Next* step.
+{{end}}
 
-In this step, we can select the options for integrating the new microservice to the rest of the solution components:
+{{if DB == "EF"}}
 
-![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step.png)
+![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-step-dark.png)
 
-ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.
+Select *Entity Framework Core* option and proceed the *Next* step.
 
-**Ensure the options are configured the same as in the preceding figure**, and click the *Next* button.
+### Selecting Database Management System
+
+![abp-studio-add-new-microservice-dialog-database-step](images/abp-studio-add-new-microservice-dialog-database-management-dark.png)
+
+Select the desired option and proceed to the next step.
+
+{{end}}
 
 ### Additional Options
 
-![abp-studio-add-new-microservice-dialog-additional-options-step](images/abp-studio-add-new-microservice-dialog-additional-options-step.png)
+![abp-studio-add-new-microservice-dialog-additional-options-step](images/abp-studio-add-new-microservice-dialog-additional-options-step-dark.png)
 
 In this step, you can select additional options for the new microservice. You can leave them as default and click the *Create* button.
 
 That's all, ABP Studio creates the new microservice and arranges all the integration and configuration for you.
 
+### Integrating to the Solution
+
+In this step, we can select the options for integrating the new microservice to the rest of the solution components:
+
+{{if UI == "NG"}}
+![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step-ng-dark.png)
+{{else}}
+![abp-studio-add-new-microservice-dialog-integration-step](images/abp-studio-add-new-microservice-dialog-integration-step-dark.png)
+{{end}}
+
+ABP Studio intelligently selects the right values for you, but you should still check them carefully since they directly affect what we will do in the next parts of this tutorial.
+
+**Ensure the options are configured the same as in the preceding figure**, and click the *Next* button.
+
 ## Exploring the New Catalog Microservice
 
 In this section, we will investigate the new microservice in overall.
@@ -62,7 +91,7 @@ In this section, we will investigate the new microservice in overall.
 
 The new microservice is added under the `services` folder in the `CloudCrm` ABP Studio solution:
 
-![abp-studio-new-catalog-service-in-solution-explorer](images/abp-studio-new-catalog-service-in-solution-explorer.png)
+![abp-studio-new-catalog-service-in-solution-explorer](images/abp-studio-new-catalog-service-in-solution-explorer-dark.png)
 
 The new microservice has its own separate .NET solution that includes three packages (.NET projects):
 
@@ -74,11 +103,11 @@ The new microservice has its own separate .NET solution that includes three pack
 
 You can open the new microservice in your favorite IDE for development. As a shortcut, you can right-click it in ABP Studio, select the *Open with* -> *Visual Studio* command for example:
 
-![abp-studio-open-with-visual-studio](images/abp-studio-open-with-visual-studio.png)
+![abp-studio-open-with-visual-studio](images/abp-studio-open-with-visual-studio-dark.png)
 
 Here is the `CloudCrm.CatalogService` .NET solution in Visual Studio:
 
-![visual-studio-solution-explorer-catalog-service](images/visual-studio-solution-explorer-catalog-service.png)
+![visual-studio-solution-explorer-catalog-service](images/visual-studio-solution-explorer-catalog-service-dark.png)
 
 ### Running the New Service
 
@@ -88,17 +117,17 @@ You can run the solution using ABP Studio's *Solution Runner*. It will also run
 
 Click the *Play* button near to the solution root:
 
-![abp-studio-solution-runner-play-all](images/abp-studio-solution-runner-play-all.png)
+![abp-studio-solution-runner-play-all](images/abp-studio-solution-runner-play-all-dark.png)
 
 ### Browsing the Catalog Service
 
 Once all of the applications have started, right-click the Catalog service and select the *Browse* command:
 
-![abp-studio-browse-catalog-service](images/abp-studio-browse-catalog-service.png)
+![abp-studio-browse-catalog-service](images/abp-studio-browse-catalog-service-dark.png)
 
 It will open the built-in browser and you will see the Swagger UI for the Catalog service:
 
-![abp-studio-browser-catalog-service-swagger-ui](images/abp-studio-browser-catalog-service-swagger-ui.png)
+![abp-studio-browser-catalog-service-swagger-ui](images/abp-studio-browser-catalog-service-swagger-ui-dark.png)
 
 You can test the APIs on the Swagger UI to see if the new microservice is properly working.