我在我的 scss 文件中定义了不同的变量，我在一些 scss 文件中使用了这些变量。

_变量.scss

$light-theme: rgba(94,161,215,0.3);
$dark-theme: #5EA1D7;
$darker-theme: #57647A;
$very-dark-theme: #455061;

如何定义 3 组主题？就像是：

default-theme {
    $light-theme: rgba(94,161,215,0.3);
    $dark-theme: #5EA1D7;
    $darker-theme: #57647A;
    $very-dark-theme: #455061;
}

dark-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

light-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

我想根据所选主题更改值。 例如，我有 3 个按钮，选择它们将更改可变颜色。

应用程序组件.html

 <button mat-raised-button (click)="onSetTheme('default-theme')">Default</button>
  <button mat-raised-button (click)="onSetTheme('dark-theme')">Dark</button>
  <button mat-raised-button (click)="onSetTheme('light-theme')">Light</button>

应用程序组件.ts

  onSetTheme(theme) {
    //TODO here I want to change the theme
  }

如何更改 onSetTheme() 函数内的主题。

Thanks!

为什么我们不能在浏览器中动态更改 sass 变量？

Sass 是 CSS 的预处理器，可以让您在开发过程中更轻松地编写样式规则。浏览器不会加载您的 .scss/.sass 文件；它将加载 CSS —— 因此您的 .scss/.sass 必须转换为浏览器的 CSS。

您的 Sass 变量只是 Sass 文件中的变量。一旦转换为 CSS，变量将被替换为它们在编译时表示的值。

.scss 正在开发中：

body {
    background: $dark-theme;
}

浏览器加载的编译CSS：

body {
    background: black;
}

Your onSetThemefunction 是一个 javascript 函数，它将在浏览器中运行，并且无权更改 sass 变量，因为它们此时不存在。浏览器只加载编译后的CSS（不会加载原始的Sass文件和变量）。

如何在浏览器中动态更改网站主题？

切换 CSS 类

CSS 变量（mdn https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)