动态加载darkmodetoggle.js后暗黑模式切换按钮失效的问题咨询

大家好，我在Angular项目里碰到个头疼的问题，想请各位帮忙分析下原因：

我在src/app/user-list/user-list.html中定义了一个暗黑/亮色模式的切换按钮组，代码如下：

<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button" data-bs-theme-value="dark" aria-pressed="false"> Dark </button>
  <button class="btn btn-light btn-sm" type="button" data-bs-theme-value="light" aria-pressed="false"> Light </button>
</div>

最开始我直接在src/index.html里静态引入脚本，放在<app-root>标签之后，这个时候按钮切换功能完全正常：

<!doctype html>
<html lang="en">
<head>...</head>
<body>
  <app-root></app-root>
  <script src="assets/js/darkmodetoggle.js"></script>
</body>
</html>

不过为了更灵活地控制脚本加载时机，我改成在UserList组件里动态加载这个脚本，组件代码是这样的：

export class UserList implements OnInit {
  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {
    this.loadScript();
  }

  loadScript() {
    if (document.getElementById('darkmode-toggle-script')) {
      console.log('Script already loaded');
      return;
    }
    const script = this.renderer.createElement('script');
    script.id = 'darkmode-toggle-script';
    script.src = 'assets/js/darkmodetoggle.js';
    script.type = 'text/javascript';
    script.onload = () => console.log('Dark Mode Script loaded dynamically');
    script.onerror = () => console.error('Error loading Dark Mode Script');
    this.renderer.appendChild(document.body, script);
  }
}

现在脚本确实被成功加载了，在页面HTML里能看到生成的脚本标签：

<script _ngcontent-ng-c1923262244="" id="darkmode-toggle-script" src="assets/js/darkmodetoggle.js" type="text/javascript"></script>

但奇怪的是，按钮完全没法切换暗黑/亮色模式了！有没有大佬知道这到底是哪里出问题了呀？

内容来源于stack exchange