用来改变ui主题的toggle方法不起作用吗

Question

我已经定义了我的scss变量，我的要求是当我点击切换按钮时，整个页面的主题应该改变。

为此，我将toggletheme((定义为：

document.body.classList.toggle("dark-theme");

但由于某种原因，这不起作用。

已将黑暗主题定义为scs:

//Dark Theme
$dark-chart-header: rgba(51,51,51,1);
$gray-2: rgba(32,32,32,1);
$light-gray-2: rgba(65,65,65,1);
$dark-gray-2: rgba(15,15,15,1);
$black: rgba(0,0,0,1);
$purple: rgba(80,7,120,1);
$graytext: rgba(201,201,201,1);
$lightgraytext: rgba(220,220,220,1);
$green: rgba(99,204,96,1);
$red: rgba(241,108,99,1);
$grayborder: rgba(209,209,209,0.2);
$darktext: rgba(51,51,51,1);

$no-padding: 0;
$no-margin: 0;
$no-border: none;

$tiny-font: 0.5em;
$xs-font: 0.6em;
$small-font: 0.7em;
$normal-font: 0.8em;
$normal-font-2: 0.9em;
$large-font: 1em;

$fluid: 100%;

$hide: none;
$show: inline-block;

这一切都在Header组件中，而Header组件又嵌入了应用程序组件中。

有什么帮助吗？

Answer 1

我会尝试注入全局文档：

constructor(@Inject(DOCUMENT) private document: Document) {}

然后使用这个注入的属性：

this.document.body.classList.toggle("dark-theme");

我总是尝试使用Renderer2来访问dom，但由于您想更改body本身的类，我会尝试这种方式。

确保所有这些黑暗主题的scs都在里面：

.dark-theme {
...
}

在全球风格scss