From 05e737d6b81229594cfac945f840b2e26c88c50c Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Wed, 17 Sep 2025 22:06:12 +0300
Subject: [PATCH] Update Angular docs for logo configuration and theming

---
 .../ui/angular/component-replacement.md       | 17 +++++++++
 .../ui/angular/modifying-the-menu.md          | 21 ++++++++++-
 docs/en/ui-themes/lepton-x-lite/angular.md    | 36 ++++++++++++++++++-
 3 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/docs/en/framework/ui/angular/component-replacement.md b/docs/en/framework/ui/angular/component-replacement.md
index e0cda680b9..e547b73531 100644
--- a/docs/en/framework/ui/angular/component-replacement.md
+++ b/docs/en/framework/ui/angular/component-replacement.md
@@ -213,6 +213,23 @@ function configureRoutes() {
 
 ![LogoComponent](./images/logo-component.png)
 
+Note
+- If your goal is only to change the logo image or application name, you don't need to replace the component. Prefer providing the logo via `@abp/ng.theme.shared` so all themes/components consume it consistently:
+
+```ts
+// app.config.ts
+import { provideLogo, withEnvironmentOptions } from '@abp/ng.theme.shared';
+import { environment } from './environments/environment';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideLogo(withEnvironmentOptions(environment)),
+  ],
+};
+```
+
+If you still want to completely replace the logo component UI, follow the steps below:
+
 Run the following command in `angular` folder to create a new component called `LogoComponent`.
 
 ```bash
diff --git a/docs/en/framework/ui/angular/modifying-the-menu.md b/docs/en/framework/ui/angular/modifying-the-menu.md
index 44b2bb0bfd..21e1793c47 100644
--- a/docs/en/framework/ui/angular/modifying-the-menu.md
+++ b/docs/en/framework/ui/angular/modifying-the-menu.md
@@ -5,7 +5,7 @@ The menu is inside the `ApplicationLayoutComponent` in the @abp/ng.theme.basic p
 
 ## How to Add a Logo
 
-The `logoUrl` property in the environment variables is the url of the logo. 
+The `logoUrl` property in the environment variables is the url of the logo.
 
 You can add your logo to `src/assets` folder and set the `logoUrl` as shown below:
 
@@ -20,6 +20,25 @@ export const environment = {
 };
 ```
 
+Then provide the logo at application startup using the Theme Shared provider. This makes the logo (and application name) available to all ABP/Theme components (including LeptonX brand component) via injection tokens.
+
+```ts
+// app.config.ts
+import { provideLogo, withEnvironmentOptions } from '@abp/ng.theme.shared';
+import { environment } from './environments/environment';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ... other providers
+    provideLogo(withEnvironmentOptions(environment)),
+  ],
+};
+```
+
+Notes
+- This approach works across themes. If you are using LeptonX, the brand logo component reads these values automatically; you don't need any theme-specific code.
+- You can still override visuals with CSS variables if desired. See the LeptonX section for CSS overrides.
+
 ## How to Add a Navigation Element
 
 ### Via `RoutesService`
diff --git a/docs/en/ui-themes/lepton-x-lite/angular.md b/docs/en/ui-themes/lepton-x-lite/angular.md
index 2943a78524..153857385e 100644
--- a/docs/en/ui-themes/lepton-x-lite/angular.md
+++ b/docs/en/ui-themes/lepton-x-lite/angular.md
@@ -60,7 +60,39 @@ export const appConfig: ApplicationConfig = {
 
 ```
 
-To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss`
+To change the logos and brand color of `LeptonX`, you have two options:
+
+1) Provide logo and application name via the Theme Shared provider (recommended)
+
+```ts
+// app.config.ts
+import { provideLogo, withEnvironmentOptions } from '@abp/ng.theme.shared';
+import { environment } from './environments/environment';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideLogo(withEnvironmentOptions(environment)),
+  ],
+};
+```
+
+Ensure your environment contains the logo url and app name:
+
+```ts
+// environment.ts
+export const environment = {
+  // ...
+  application: {
+    name: 'MyProjectName',
+    logoUrl: '/assets/images/logo.png',
+  },
+};
+```
+
+The LeptonX brand component reads these values automatically from `@abp/ng.theme.shared`.
+
+2) Or override via CSS variables in `styles.scss`
 
 ```css
 :root {
@@ -74,6 +106,8 @@ To change the logos and brand color of `LeptonX`, simply add the following CSS t
 - `--lpx-logo-icon` is a square icon used when the menu is collapsed.
 - `--lpx-brand` is a color used throughout the application, especially on active elements.
 
+Tip: You can combine both approaches. For example, provide the main logo via `provideLogo(...)` and still fine-tune visuals (sizes, colors) with CSS.
+
 ### Server Side
 
 In order to migrate to LeptonX on your server side projects (Host and/or AuthServer projects), please follow the [Server Side Migration](asp-net-core.md) document.