From f3b3325c761bca755574eced1c801f52570b1e42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A1=E8=89=B2?= <cipchk@qq.com>
Date: Fri, 15 Mar 2024 13:54:49 +0800
Subject: [PATCH] docs(theme):  typo demo (#1784)

---
 packages/theme/docs/customize-theme.en-US.md | 11 ++++++-----
 packages/theme/docs/customize-theme.zh-CN.md | 13 ++++++-------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/theme/docs/customize-theme.en-US.md b/packages/theme/docs/customize-theme.en-US.md
index 56352176d..22196dd0a 100644
--- a/packages/theme/docs/customize-theme.en-US.md
+++ b/packages/theme/docs/customize-theme.en-US.md
@@ -111,18 +111,19 @@ Dynamically create a `link` tag, dynamically load style files into the applicati
 > You can also use the [theme-btn](https://github.com/ng-alain/delon/tree/master/packages/theme/theme-btn/) component directly.
 
 ```ts
+private readonly doc = inject(DOCUMENT);
 changeTheme(theme: 'default' | 'dark'): void {
+  const el = this.doc.querySelector<HTMLLinkElement>('#dark-theme');
   if (theme === 'dark') {
-    const style = document.createElement('link');
+    if (el) return;
+    const style = this.doc.createElement('link');
     style.type = 'text/css';
     style.rel = 'stylesheet';
     style.id = 'dark-theme';
     style.href = 'assets/style.dark.css';
+    this.doc.head.appendChild(style);
   } else {
-    const dom = document.getElementById('dark-theme');
-    if (dom) {
-      dom.remove();
-    }
+    el?.remove();
   }
 }
 ```
diff --git a/packages/theme/docs/customize-theme.zh-CN.md b/packages/theme/docs/customize-theme.zh-CN.md
index ece8076f4..f4d8b0f5b 100644
--- a/packages/theme/docs/customize-theme.zh-CN.md
+++ b/packages/theme/docs/customize-theme.zh-CN.md
@@ -111,24 +111,23 @@ npx ng-alain-plugin-theme -t=themeCss
 > 也可以直接使用 [theme-btn](https://github.com/ng-alain/delon/tree/master/packages/theme/theme-btn/) 组件。
 
 ```ts
+private readonly doc = inject(DOCUMENT);
 changeTheme(theme: 'default' | 'dark'): void {
+  const el = this.doc.querySelector<HTMLLinkElement>('#dark-theme');
   if (theme === 'dark') {
-    const style = document.createElement('link');
+    if (el) return;
+    const style = this.doc.createElement('link');
     style.type = 'text/css';
     style.rel = 'stylesheet';
     style.id = 'dark-theme';
     style.href = 'assets/style.dark.css';
+    this.doc.head.appendChild(style);
   } else {
-    const dom = document.getElementById('dark-theme');
-    if (dom) {
-      dom.remove();
-    }
+    el?.remove();
   }
 }
 ```
 
-
-
 > 注意：如果你使用 `@delon/chart` 或第三方组件，可能需要手动修改组件来支持相应的主题。
 
 ## 组件开发问题