diff --git a/abp_io/AbpIoLocalization/AbpIoLocalization/Base/Localization/Resources/en.json b/abp_io/AbpIoLocalization/AbpIoLocalization/Base/Localization/Resources/en.json
index fb6207f8f8..45d2b733ac 100644
--- a/abp_io/AbpIoLocalization/AbpIoLocalization/Base/Localization/Resources/en.json
+++ b/abp_io/AbpIoLocalization/AbpIoLocalization/Base/Localization/Resources/en.json
@@ -218,7 +218,8 @@
"DetailedChangeNotes" : "Detailed Change Notes",
"SeeTrainings": "See Trainings",
"NoContent": "No content",
- "ABPStudioBeta": "ABP Studio BETA",
- "More": "More"
+ "More": "More",
+ "WhyABPIOPlatform": "Why ABP.IO Platform",
+ "AbpStudio": "ABP Studio"
}
}
diff --git a/abp_io/AbpIoLocalization/AbpIoLocalization/Commercial/Localization/Resources/en.json b/abp_io/AbpIoLocalization/AbpIoLocalization/Commercial/Localization/Resources/en.json
index abd93b4547..1d977e3351 100644
--- a/abp_io/AbpIoLocalization/AbpIoLocalization/Commercial/Localization/Resources/en.json
+++ b/abp_io/AbpIoLocalization/AbpIoLocalization/Commercial/Localization/Resources/en.json
@@ -600,7 +600,7 @@
"TotalDeveloperPrice": "Total Developer Price",
"Purchase_PricePerDeveloper": "{0} {1} per developer",
"Purchase_IncludedDeveloperInfo": "{0} {1} included.",
- "Purchase_LicenseExtraDeveloperPurchaseMessage": "The {0} license contains {1} developer(s). You can add additional developers now or later.",
+ "Purchase_LicenseExtraDeveloperPurchaseMessage": "The {0} License includes {1} developers. You can add additional developers.",
"StartupTemplates_Page_Title": "ABP Startup Templates",
"StartupTemplates_Page_Description": "ABP Commercial allows you to build solutions with any level of complexity. It provides two main pre-built startup solutions. You can select the one close to your requirements and build your own custom solution on top of it.",
"MicroserviceStartupSolutionForDotnet": "Microservice Startup Solution for .NET",
@@ -907,8 +907,12 @@
"ExtraQuestionCreditsFaqExplanation": "Yes, you can. To buy extra question credits, send an e-mail to info@abp.io with your organization's name. Here's the price list for the extra question credits:
50 questions pack $999
25 questions pack $625
15 questions pack $450
",
"AlreadyBetaTester": "You have already joined the beta tester program.",
"AbpStudio": "ABP Studio",
+ "AbpStudio_Description": "ABP Studio is still under development. You can fill out the form below to be one of the first users.",
"AbpStudio_Description1": "ABP Studio is a cross-platform desktop application for ABP developers.",
"AbpStudio_Description2": "It is well integrated to the ABP Framework and aims to provide a comfortable development environment for you by automating things, providing insights about your solution, making develop, run and deploy your solutions much easier.",
+ "AbpStudio_ComingSoon": "Coming Soon Planned beta release date: Q4 of 2023.",
+ "AbpStudio_PlannedPreviewDate": "Planned preview release date: Q4 of 2023.",
+ "BetaRequest": "Beta Request",
"CreateNewSolutions": "Create New Solutions",
"CreateNewSolutions_Description1": "You can create from simple applications to modular monolith or microservice solutions easily with a lot of options. You get a full production-ready base software solution for your business.",
"ArchitectYourSolutions": "Architect Your Solutions",
@@ -963,6 +967,97 @@
"OneCodeBaseMultipleDevices": "One Code-Base Multiple Devices",
"OneCodeBaseMultipleDevices_Description": "ABP Mobile applications are cross-platform. They are ready to be installed and run on iOS and Android devices, and they adapt to different form-factors using a single code base. Developers only need to create the UI and front-end code once, there is no need to adapt the code for each device you want to support.",
"ComesWithTheSourceCode": "Comes with the Source-Code",
- "ComesWithTheSourceCode_Description": "The mobile apps are provided with the source-code. Easily customize the UX/UI of your apps to meet branding guidelines."
+ "ComesWithTheSourceCode_Description": "The mobile apps are provided with the source-code. Easily customize the UX/UI of your apps to meet branding guidelines.",
+ "Purchase_OneYearPrice": "1 Year Price",
+ "Purchase_DeveloperSeatCount": "Developer Seat Count",
+ "Purchase_DevelopersAlreadyIncluded": "{0} developers already included",
+ "1Year": "1 year",
+ "{0}Years": "{0} years",
+ "1YearLicense": "1 year license",
+ "{0}YearsLicense": "{0} years license",
+ "1AdditionalDeveloper": "1 additional developer",
+ "{0}AdditionalDevelopers": "{0} additional developers",
+ "Discount": "Discount ({0}%)",
+ "Summary": "Summary",
+ "TrainingPack": "Training pack",
+ "TrainingPackDiscount": "Training pack discount",
+ "Purchase_OnboardingTraining_Description": "This live training package is discounted when purchase with the new license. This discounted price is valid only for new license purchases. Learn more ",
+ "Purchase_Save": "{0}% Save {1} {2}",
+ "RemoveBasket": "Remove from basket",
+ "WhyABPIOPlatform?": "Why ABP.IO Platform?",
+ "DocumentAim": "This document aims to answer the big question:",
+ "DocumentAim_Description": "\"Why should you use the ABP.IO Platform instead of creating a new solution from scratch?\"",
+ "DocumentAim_Description2": "The document introduces the challenges of building a modern software solution and explains how ABP addresses these challenges.",
+ "CreatingANewSolution": "Creating a New Solution",
+ "CreatingANewSolution_Description": "When you need to start a new solution, there are a lot of questions you need to ask yourself, and you should spend a lot of time before starting to write your very first business code.",
+ "CreatingAnEmptySolution": "Creating an Empty Solution",
+ "THEPROBLEM": "THE PROBLEM",
+ "CreatingAnEmptySolution_THEPROBLEM_Description": "Even creating an almost-empty solution is challenging;",
+ "CreatingAnEmptySolution_THEPROBLEM_Description2": "How do you organize your codebase across projects?",
+ "CreatingAnEmptySolution_THEPROBLEM_Description3": "What are the layers and how do they interact?",
+ "CreatingAnEmptySolution_THEPROBLEM_Description4": "How do you integrate to 3rd-party library and systems?",
+ "CreatingAnEmptySolution_THEPROBLEM_Description5": "How to set up the automated tests?",
+ "ABPSOLUTION": "ABP SOLUTION",
+ "CreatingAnEmptySolution_ABPSOLUTION_Description": "ABP provides a well-architected, layered and production-ready startup solution based on the Domain Driven Design principles. The solution also includes a pre-configured unit and integration test projects for each layer.",
+ "CommonLibraries": "Common Libraries",
+ "CommonLibraries_THEPROBLEM_Description": "Which libraries should you use to implement common requirements? The software development ecosystem is highly dynamic and it is hard to follow the latest tools, libraries, trends and approaches.",
+ "CommonLibraries_ABPSOLUTION_Description": "ABP pre-integrates the popular, mature and up-to-date libraries into the solution. You don't spend time integrating them and talking to each other. They properly work out of the box.",
+ "UITheme&Layout": "UI Theme & Layout",
+ "UITheme&Layout_THEPROBLEM_Description": "When it comes to the UI, there are a lot of challenges, including preparing a foundation to create a responsive, modern and flexible UI kit with a consistent look & feel and tons of features (like left/top navigation menu, header, toolbar, footer, widgets and so.).",
+ "UITheme&Layout_THEPROBLEM_Description2": "Even if you buy a pre-built theme, integrating it into your solution may take days of development. Upgrading such a theme is another problem. Most of the time, the theme's HTML/CSS structure is mixed with your UI code, and it is not easy to upgrade or change the theme later.",
+ "UITheme&Layout_ABPSOLUTION_Description": "ABP Framework provides a theming system that makes your UI code independent from the theme. Themes are isolated, and they are NuGet/NPM packages. Installing or upgrading a theme is just a minute. While you can build your theme (or integrate an existing theme), ABP Commercial offers professional and modern themes.There are also UI component providers (like Telerik and DevExpress). But they only provide individual components. You are responsible for creating your own layout system. You can use such libraries in your ABP-based solutions just like in any other project.",
+ "TestInfrastructure": "Test Infrastructure",
+ "TestInfrastructure_THEPROBLEM_Description": "Which libraries should you use to implement common requirements? The software development ecosystem is highly dynamic and it is hard to follow the latest tools, libraries, trends and approaches.",
+ "TestInfrastructure_ABPSOLUTION_Description": "ABP Startup Templates comes with the test projects already configured for you, and you can immediately write your first unit or integration test code on day 1. Writing unit tests is very clear with the ABP Framework; see how to write tests.",
+ "CodingStandards&Training": "Coding Standards & Training",
+ "CodingStandards&Training_THEPROBLEM_Description": "Once you create the development-ready solution, you typically need to train the developers to explain the system and develop it with the same conventions in a standard and consistent way. Even if you train the developers, it is hard to prepare and maintain your documentation. Over time, every developer will write the code differently, and coding standards will begin to diverge.",
+ "CodingStandards&Training_ABPSOLUTION_Description": "ABP solution is already well-defined and well-documented. Tutorials and best practice guides clearly explain how to make development on an ABP project.",
+ "KeepingYourSolutionUpToDate": "Keeping Your Solution Up to Date",
+ "KeepingYourSolutionUpToDate_THEPROBLEM_Description": "After you start your development, you must keep track of the new versions of the libraries you use for upgrades & patches. We regularly update all packages to the latest versions and test them before the stable release. When you update the ABP Framework, all its dependencies are upgraded to edge technology.",
+ "KeepingYourSolutionUpToDate_ABPSOLUTION_Description": "Abp updateCLI command automatically discovers and upgrades all ABP-dependant NuGet and NPM packages in a solution. With ABP, it is easier to stay with the latest versions.",
+ "DRY": "Don't Repeat Yourself!",
+ "DRY_Description": "Creating a base solution takes significant time and requires well architectural experience. However, this is just the beginning! As you start developing, you will likely have to write lots of repetitive code; that would be great if all this could be handled automatically.",
+ "DRY_Description2": "ABP automates and simplifies repeating code as much as possible by following the convention over configuration principle. However, it doesn't restrict you when you need to switch to manual gear. The control is always in your hands.",
+ "Authentication": "Authentication",
+ "Authentication_THEPROBLEM_Description": "Single Sign On, Active Directory / LDAP Integration, OpenIddict integration, social logins, two-factor authentication, forgot/reset password, email activation, new user registration, password complexity control, locking account on failed attempts, showing failed login attemps ... etc. We know that all these generic requirements are familiar to you. You are not alone!",
+ "Authentication_ABPSOLUTION_Description": "ABP Framework and the commercial version provide all these standard stuff pre-implemented for you as a re-usable account module. You just enable and configure what you need.",
+ "CrossCuttingConcerns": "Cross-Cutting Concerns",
+ "CrossCuttingConcerns_THEPROBLEM_Description": "Cross-Cutting Concerns are the fundamental repeating logic that should be implementedfor each use case. Some examples;",
+ "CrossCuttingConcerns_ABPSOLUTION_Description": "ABP Framework automates or simplifies all the common cross-cutting concerns. You only write code that matters for your business and ABP handles the rest by conventions.",
+ "ArchitecturalInfrastructure": "Architectural Infrastructure",
+ "ArchitecturalInfrastructure_THEPROBLEM_Description": "You typically need to build infrastructure to implement your architecture properly. For example, you generally implement the Repository pattern. You define some base classes to simplify and standardize to create entities, services, controllers and other objects.",
+ "ArchitecturalInfrastructure_ABPSOLUTION_Description": "ABP Framework provides all these and more out of the box. It is mature and well-documented.",
+ "EnterpriseApplicationRequirements": "Enterprise Application Requirements",
+ "EnterpriseApplicationRequirements_THEPROBLEM_Description": "There are a lot of requirements you repeatedly implement in every business application;",
+ "EnterpriseApplicationRequirements_ABPSOLUTION_Description": "There is much more. ABP provides infrastructure to implement such requirements easily. Again, you don't spend your valuable time to re-implement all these again and again.",
+ "GeneratingInitialCode&Tooling": "Generating Initial Code & Tooling",
+ "GeneratingInitialCode&Tooling_THEPROBLEM_Description": "ABP Suite can generate a full-stack CRUD page for your entities in seconds. The generated code is layered and clean. All the standard validation and authorization requirements are implemented. Plus, unit test classes are generated. Once you get a fully running page, you can modify it according to your business requirements.",
+ "GeneratingInitialCode&Tooling_ABPSOLUTION_Description": "ABP Framework provides all these and more out of the box. It is mature and well-documented.",
+ "IntegratingTo3rdPartyLibrariesAndSystems": "Integrating to 3rd-Party Libraries and Systems",
+ "IntegratingTo3rdPartyLibrariesAndSystems_THEPROBLEM_Description": "Most libraries are designed as low level, and you typically do some work to integrate them properly without repeating the same integration and configuration code everywhere in your solution. For example, assume you must use RabbitMQ to implement your distributed event bus. All you want to do is; send a message to a queue and handle the incoming messages. But you need to understand messaging patterns, queue and exchange details. To write an efficient code, you must create a pool to manage connections, clients and channels. You also must deal with exceptions, ACK messages, re-connecting to RabbitMQ on failures and more.",
+ "IntegratingTo3rdPartyLibrariesAndSystems_ABPSOLUTION_Description": "ABP's RabbitMQ Distributed Event Bus integration abstracts all these details. You send and receive messages without the hustle and bustle. Do you need to write low-level code? No problem, you can always do that. ABP doesn't restrict you when you need to use low-level features of the library you are using.",
+ "WhyNotBuildYourOwnFramework?": "Why Not Build Your Own Framework?",
+ "WhyNotBuildYourOwnFramework_THEPROBLEM_Description": "All the infrastructure, even in the most simple way, takes a lot of time to build, maintain and document. It gets bigger over time, and it becomes hard to maintain it in your solution. Separating these into a re-usable project is the starting point for building your own internal framework.",
+ "WhyNotBuildYourOwnFramework_ABPSOLUTION_Description": "Building, documenting, training and maintaining an internal framework is really hard. If you don't have an experienced, dedicated framework team, your internal framework rapidly becomes an undocumented legacy code that no one can understand and maintain anymore. On the other hand, these frameworks are generally developed by one or two developers in the team. And these fellows are becoming a knowledge silo. It is good for them but bad for the company because they are the project's single point of failure -SPOF-. Once they leave the company, the project dramatically goes down.",
+ "TonsOfFeatures": "Tons of Features",
+ "TonesOfFeatures_Description": "Tag helpers, dynamic forms, BLOB storing system and many other ABP features help you keep DRY (don't repeat yourself) and focus on your business.",
+ "ArchitecturalInfrastructure_Description": "SaaS applications, modular or microservice systems are most used enterprise software models. Building such systems not only requires a good understanding and experience, but also requires a strong software infrastructure. Otherwise, you will find yourself spending a great effort to support these architectural details in your codebase.",
+ "Modularity": "Modularity",
+ "Modularity_THEPROBLEM_Description": "Building a truly modular system is not easy! All the aspects of the system (database, entities, APIs, UI pages/components) can be split into modules, and each module can be re-usable without others. The plain ASP.NET Core doesn't provide such a modular architecture. If you need it, you should think about it from scratch.",
+ "Modularity_ABPSOLUTION_Description": "The ABP Framework is born to be a modular application development structure. Every feature in the framework is developed to be compatible with modularity. Documentation and guides explain how to develop re-usable modules in a standard way.",
+ "SaaSMultiTenancy": "SaaS / Multi-Tenancy",
+ "SaaSMultiTenancy_THEPROBLEM_Description": "Multi-Tenancy is a common way to implement SaaS systems. However, implementing a consistent multi-tenant infrastructure may become complicated.",
+ "SaaSMultiTenancy_ABPSOLUTION_Description": "ABP Framework provides a complete multi-tenant infrastructure and abstract complexity from your business code. Your application code will be mostly multi-tenancy aware while the ABP Framework automatically isolates the database, cache and other details of the tenants from each other. It supports single database, per tenant database and hybrid approaches. It properly configures the libraries like Microsoft Identity, IdentityServer, OpenIddict, which are not normally multi-tenancy compatible.",
+ "Microservices": "Microservices",
+ "Microservices_THEPROBLEM_Description": "Building a microservice system requires many infrastructure details: Authenticating and authorizing applications and microservices and implementing asynchronous messaging and synchronous (Rest/GRPC) communication patterns between microservices are the most fundamental issues.",
+ "Microservices_ABPSOLUTION_Description": "The ABP Framework provides services, guides, and samples to help you implement your microservice solution using the industry standard tools. ABP Commercial even goes one step further and provides a complete startup template to kick-start your microservice solution.",
+ "PreBuiltModules": "Pre-Built Modules",
+ "PreBuiltModules_THEPROBLEM_Description": "All of us have similar but slightly different business requirements. However, we all should re-invent the wheel since no one's code can directly work in our solution. They are all embedded parts of a larger solution.",
+ "PreBuiltModules_ABPSOLUTION_Description":"ABP Commercial modules provides a lot of re-usable application modules like payment, chat, file management, audit log reporting... etc. All of these modules are easily installed into your solution and directly work. We are constantly adding more modules.",
+ "PreBuiltModules_ABPSOLUTION_Description2": "All modules are designed as customizable for your business requirements. If you need complete control, you can download the full source code of any module and completely customize based on your specific business requirements.",
+ "ABPCommunity": "ABP Community",
+ "ABPCommunity_Description": "Being in a big community where everyone follows similar coding styles and principles and shares a common infrastructure brings power when you have troubles or need help with design decisions. Since we write code similarly, we can help each other much better. ABP is a community-backed project with almost 10K stars on GitHub.",
+ "ABPCommunity_Description2": "It is easy to share code or even re-usable libraries between ABP developers. A code snippet that works for you will also work for others. There are a lot of samples and tutorials that you can directly implement for your application.",
+ "ABPCommunity_Description3": "When you hire a developer who worked before with the ABP architecture will immediately understand your solution and start development in a very short time."
}
}
diff --git a/docs/en/Best-Practices/Entities.md b/docs/en/Best-Practices/Entities.md
index 1c76469cb7..5a8c07c075 100644
--- a/docs/en/Best-Practices/Entities.md
+++ b/docs/en/Best-Practices/Entities.md
@@ -28,6 +28,7 @@ Every aggregate root is also an entity. So, these rules are valid for aggregate
- **Do** keep the entity as always **valid** and **consistent** within its own boundary.
- **Do** define properties with `private`, `protected`, `internal ` or `protected internal` setter where it is needed to protect the entity consistency and validity.
- **Do** define `public `, `internal` or `protected internal` (virtual) **methods** to change the properties (with non-public setters) if necessary.
+ - **Do** return the entity object (`this`) from the setter methods.
### Aggregate Roots
@@ -86,15 +87,16 @@ public class Issue : FullAuditedAggregateRoot //Using Guid as the key/iden
Labels = new Collection(); //Always initialize the collection
}
- public virtual void SetTitle([NotNull] string title)
+ public virtual Issue SetTitle([NotNull] string title)
{
Title = Check.NotNullOrWhiteSpace(title, nameof(title)); //Validate
+ return this;
}
/* AddLabel & RemoveLabel methods manages the Labels collection
* in a safe way (prevents adding the same label twice) */
- public virtual void AddLabel(Guid labelId)
+ public virtual Issue AddLabel(Guid labelId)
{
if (Labels.Any(l => l.LabelId == labelId))
{
@@ -102,11 +104,13 @@ public class Issue : FullAuditedAggregateRoot //Using Guid as the key/iden
}
Labels.Add(new IssueLabel(Id, labelId));
+ return this;
}
- public virtual void RemoveLabel(Guid labelId)
+ public virtual Issue RemoveLabel(Guid labelId)
{
Labels.RemoveAll(l => l.LabelId == labelId);
+ return this;
}
/* Close & ReOpen methods protect the consistency
diff --git a/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/POST.md b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/POST.md
new file mode 100644
index 0000000000..00325751ef
--- /dev/null
+++ b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/POST.md
@@ -0,0 +1,125 @@
+# Adding Dark Mode Support to the Basic Theme
+Basic Theme uses plain bootstrap and does not have any custom colors & styles. This article will show you how to add dark mode support to the [Basic Theme](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Basic-Theme).
+
+Bootstrap brings the [Color Modes](https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode) feature with version **5.3**. This feature allows you to add dark mode support to your website with a single line of code. Adding the `data-bs-theme="dark"` attribute changes the color mode of the element to dark mode.
+
+## Instructions
+
+1. Create a new project with the following command:
+ ```bash
+ abp new BasicThemeDarkMode -t app --theme basic
+ ```
+
+2. Create a component that toggles the color mode.
+
+ - Create a new file named `Components/ChangeTheme/Default.cshtml`:
+ ```html
+
+
+
+ ```
+
+ - Create a new file named `Components/ChangeTheme/ChangeThemeViewComponent.cs`:
+ ```csharp
+ using Microsoft.AspNetCore.Mvc;
+ using Volo.Abp.AspNetCore.Mvc;
+
+ namespace BasicThemeDarkMode.Web.Components.ChangeTheme;
+
+ [Widget(ScriptFiles = new[]{"/Components/ChangeTheme/ChangeTheme.js"})]
+ public class ChangeThemeViewComponent : AbpViewComponent
+ {
+ public IViewComponentResult Invoke()
+ {
+ return View("~/Components/ChangeTheme/Default.cshtml");
+ }
+ }
+ ```
+
+ - Create a JavaScript that manages the last selected theme and toggles the color mode. It stores the last selected theme in the *local storage*. So, you don't need to store it in the database.
+
+ - Create a new file named `Components/ChangeTheme/ChangeTheme.js`:
+ ```js
+ $(function () {
+ function changeTheme(theme) {
+ window.localStorage.setItem('theme', theme);
+ document.getElementsByTagName('body')[0].setAttribute('data-bs-theme', theme);
+ }
+
+ function toggleTheme(){
+ getTheme() == 'light' ? changeTheme('dark') : changeTheme('light');
+ }
+
+ function getTheme(){
+ return window.localStorage.getItem('theme') ?? 'dark';
+ }
+
+ function init(){
+ let theme = getTheme();
+ if(theme){
+ changeTheme(theme);
+ }
+ }
+
+ document.getElementById('ToolbarChangeTheme').addEventListener('click', () => {
+ toggleTheme();
+ });
+
+ init();
+ });
+ ```
+
+3. Create a new [Toolbar Contributor](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Toolbars) and add a newly created view component to the application toolbar.
+
+ - Create a new class named `BasicThemeDarkModeToolbarContributor.cs`:
+ ```csharp
+ using BasicThemeDarkMode.Web.Components.ChangeTheme;
+ using System.Threading.Tasks;
+ using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Toolbars;
+
+ namespace BasicThemeDarkMode.Web;
+
+ public class BasicThemeDarkModeToolbarContributor : IToolbarContributor
+ {
+ public Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+ {
+ if (context.Toolbar.Name == StandardToolbars.Main)
+ {
+ context.Toolbar.Items
+ .Add(new ToolbarItem(typeof(ChangeThemeViewComponent)));
+ }
+
+ return Task.CompletedTask;
+ }
+ }
+ ```
+
+ - Configure [Toolbar Options](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Toolbars) and add a newly created contributor:
+ ```csharp
+ Configure(options =>
+ {
+ options.Contributors.Add(new BasicThemeDarkModeToolbarContributor());
+ });
+ ```
+
+That's it! Now, you can toggle the color mode by clicking the sun icon in the toolbar:
+
+
+
+- Users Page in Dark Mode:
+
+ 
+
+- Settings Page in Dark Mode:
+
+ 
+
+- Login Page in Dark Mode:
+
+ 
+
+## Conclusion
+
+The theme is stored in **local storage** and it's initialized on the client-side. You can use **Cookies** to render the page in the last selected theme on **server-side** to prevent the flash effect while navigating pages. This document shows the concept of adding dark mode support of bootstrap to the Basic Theme.
diff --git a/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-login.png b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-login.png
new file mode 100644
index 0000000000..0ee18b54b9
Binary files /dev/null and b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-login.png differ
diff --git a/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-settings.png b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-settings.png
new file mode 100644
index 0000000000..6d32677c4c
Binary files /dev/null and b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-settings.png differ
diff --git a/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-users.png b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-users.png
new file mode 100644
index 0000000000..67973f8a10
Binary files /dev/null and b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-dark-users.png differ
diff --git a/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-toggle-demo.gif b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-toggle-demo.gif
new file mode 100644
index 0000000000..536b30e6ee
Binary files /dev/null and b/docs/en/Community-Articles/2023-08-07-Basic-Theme-Dark-Mode/basictheme-toggle-demo.gif differ
diff --git a/docs/en/Modules/Docs.md b/docs/en/Modules/Docs.md
index 143ec7168d..58dd811397 100644
--- a/docs/en/Modules/Docs.md
+++ b/docs/en/Modules/Docs.md
@@ -22,22 +22,16 @@ When you use GitHub to store your docs, Docs Module supports versioning. If you
## Installation
-### 1- Download
+This document covers `Entity Framework Core` provider but you can also select `MongoDB` as your database provider.
-If you do not have an existing ABP project, this step shows you how to create a new project from [abp.io](https://abp.io) to add the Docs Module. If you already have an ABP project, you can skip this step.
+### 1- Creating an application
-It is recommended to use ABP CLI to create new projects. Use the following command:
+If you do not have an existing ABP project, you can either [generate a CLI command from the get started page of the abp.io website](https://abp.io/get-started) and runs it or run the command below:
```bash
abp new Acme.MyProject
```
-You can also generate a CLI command from [get started page](https://abp.io/get-started). Enter your project name as `Acme.MyProject`, other use default options.
-
-Note that this document covers `Entity Framework Core` provider but you can also select `MongoDB` as your database provider.
-
-
-
### 2- Running The Empty Application
After you download the project, extract the ZIP file and open `Acme.MyProject.sln`. You will see that the solution consists of `Application`, `Application.Contracts`, `DbMigrator`, `Domain`, `Domain.Shared`, `EntityFrameworkCore`, `HttpApi`, `HttpApi.Client` and `Web` projects. Right click on `Acme.MyProject.Web` project and **Set as StartUp Project**.
diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md
new file mode 100644
index 0000000000..64a3fc42ca
--- /dev/null
+++ b/docs/en/UI/Angular/CapsLock.directive.md
@@ -0,0 +1,80 @@
+# Caps Lock Directive
+
+In password inputs, You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package.
+
+
+## Getting Started
+
+`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component:
+
+**Importing to NgModule**
+```ts
+import { TrackCapsLockDirective } from '@abp/ng.core';
+
+@NgModule({
+ //...
+ declarations: [
+ ...,
+ TestComponent
+ ],
+ imports: [
+ ...,
+ TrackCapsLockDirective
+ ],
+})
+export class MyFeatureModule {}
+```
+
+## Usage
+
+The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user.
+
+See an example usage:
+
+**NgModule Component usage**
+```ts
+@Component({
+ selector: 'test-component',
+ template: `
+
+ `,
+ imports: [TrackCapsLockDirective]
+})
+export class StandaloneComponent{
+ capsLock = false;
+}
+```
+
+The `abpCapsLock` event has been added to the `` element. Press Caps Lock to activate the `TrackCapsLockDirective`.
+
+See the result:
+
+
+
+To see Caps Lock icon press Caps Lock.
+
+
diff --git a/docs/en/UI/Angular/Show-Password-Directive.md b/docs/en/UI/Angular/Show-Password-Directive.md
new file mode 100644
index 0000000000..c19c8073bd
--- /dev/null
+++ b/docs/en/UI/Angular/Show-Password-Directive.md
@@ -0,0 +1,77 @@
+# Show Password Directive
+
+In password input, text can be shown easily via changing input type attribute to `text`. To make this even easier, you can use the `ShowPasswordDirective` which has been exposed by the `@abp/ng.core` package.
+
+
+## Getting Started
+`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component:
+
+**Importing to NgModule**
+```ts
+import { ShowPasswordDirective } from '@abp/ng.core';
+
+@NgModule({
+ //...
+ declarations: [
+ ...,
+ TestComponent
+ ],
+ imports: [
+ ...,
+ ShowPasswordDirective
+ ],
+})
+export class MyFeatureModule {}
+```
+
+## Usage
+
+The `ShowPasswordDirective` is very easy to use. The directive's selector is **`abpShowPassword`**. By adding the `abpShowPassword` attribute to an input element, you can activate the `ShowPasswordDirective` for the input element.
+
+See an example usage:
+
+**NgModule Component usage**
+```ts
+@Component({
+ selector: 'test-component',
+ template: `
+