Ionic framework 如何根据按钮点击事件动态更新我的爱奥尼亚应用程序的主题？

我正在尝试在我的ionic应用程序中基于按钮点击动态更改按钮颜色

这是我的打字稿：

  renderer: Renderer2;

  constructor(private rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document: Document) {
    this.renderer = this.rendererFactory.createRenderer(null, null);
  }

  enableDark(): void {
    this.renderer.addClass(this.document.body, 'dark-theme');
  }

  enableLight(): void {
    this.renderer.removeClass(this.document.body, 'dark-theme');
  }

这是我的

app.component.scss

：

:root {
    .dark-theme {
      --ion-color-primary: #eb4b58;
  --ion-color-primary-rgb: 235, 75, 88;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #cd424d;
  --ion-color-primary-tint: #ed5d69;
    }
}

当我单击按钮时，该类将按预期从body元素中添加/删除，但按钮的颜色没有改变

有人能告诉我我的代码有什么问题吗？我如何解决它