docs(theme): typo demo (#1784)

ng-alain · Mar 15, 2024 · f3b3325 · f3b3325
1 parent c74c639
commit f3b3325
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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` 或第三方组件，可能需要手动修改组件来支持相应的主题。
 
 ## 组件开发问题