Javascript 用于更改ui主题的切换方法不起作用？

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

为此，我将toggletheme（）定义为：

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

在scss中定义了黑暗主题：

//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;

这是一个全在头的组件，而这个组件又被嵌入到app组件中

---

有什么帮助吗？

我会尝试注入全局文档：

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

然后使用此注入属性：

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

我总是尝试使用RenderR2来访问dom，但是因为您想更改主体本身的类，所以我会尝试这种方式

确保黑暗主题的所有SCS都在里面：

.dark-theme {
   ...
}

---

在全局样式scss中，切换类和以上css之间的关系是什么？请explain@Priyanka当toggle方法被执行时，它被假定为将暗主题css类添加到所有其他变量中。正确，这是期望值。但您共享的代码并没有这样做。我找不到任何逻辑。你必须先添加一些逻辑。即使不起作用，这里的人也能帮你解决这个问题。这里有两个独立的代码，不同的css和不同的js。这两者之间没有关系。我可能会误解，在这种情况下，您可以附加codepen链接。我可能错了，但我知道所有这些scss代码都嵌套在一个

。黑色主题中style@RIni您使用的是angularjs还是angularjs？
.dark-theme {
   ...
}