在我的themes/variables.scss中，我有两个颜色主题（深色和浅色）：
/* LIGHT COLOR THEMES
========================================= */
/*$colors: (
primary: #ffffff,
secondary: #fafafa,
danger: #f53d3d,
light: #1b1e28,
sliderColor: #fff,
colorIcon: #CCCBDA,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #ffffff,
backgroundColor: #fafafa,
toobarBackground: #ffffff,
toobarButton: #AAB2B7,
toobarText: #FFFFFF
);*/
/* DARK COLOR THEMES
========================================= */
$colors: (
primary: #282C39,
secondary: #1b1e28,
danger: #f53d3d,
sliderColor: #fff,
light: #fff,
colorIcon: #7F7E96,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #1B1E28,
backgroundColor: #282C39,
toobarBackground: #1B1E28,
toobarButton: #D8D8D8,
toobarText: #FFFFFF
);
目前，我只能在我的应用中添加一个主题。如果要更改主题，则必须注释掉一个变量，而另一个变量则必须删除注释。
如何使用这两个主题，在打字稿中的应用程序中动态更改主题？
在每个教程中，我都看到这些--ion-color-primary，但我没有这些--ion-color在前面
您可以通过两种方法来完成此操作。主要思想是定义您的颜色类别。你可以有-
// light theme
:root {
// define your light colors here
}
// dark theme
:root body.dark {
// define you dark colors here
}
因此，默认情况下，将应用浅色主题，因为应用程序的<body>不包含任何类。现在要应用深色主题，您只需将类dark添加到应用程序的<body>中。例如，您可以为该服务提供一个服务，该服务只需选择主体并将类添加到其中。并将其删除以返回主题。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ThemeService {
constructor() { }
applyDark() {
document.querySelector('body').classList.add('dark');
}
removeDark() {
document.querySelector('body').classList.remove('dark');
}
}
顺便说一句，我看到您正在使用自己的颜色变量。我刚刚给出了使用默认离子变量的示例（来自src/theme/variables.scss）