如何将自定义主题添加到Ionic 5应用程序

Question

我需要向Ionic 5应用程序添加自定义主题。我试图将红色主题添加到variables.css

@media (prefers-color-scheme: red) {
:root {
--ion-color-primary: red;

然后我试图通过index.html 初始化它

<meta name="color-scheme" content="red" />

但它不起作用。我还尝试添加来自https://ionicframework.com/docs/theming/advanced

是否可以通过添加新的原色、第二色和第三色，然后在运行时更改它们来主题化Ionic应用程序？

Answer 1

对于dark和light主题，只能使用prefers-color-scheme媒体查询。

要向Ionic添加新的自定义主题，只需为其创建一个新的CSS类，并覆盖以下CSS规则下的每个颜色变量：

变量.scs

body.red {
--ion-color-primary: red;
/*...*/
}

可以使用"颜色"生成器和"阶跃颜色"生成器生成其余颜色。最后，您可能需要调整一些特定的颜色变量，如--ion-toolbar-background等。对于ios和md模式，您可以查看默认深色，从中复制和编辑其余颜色。

之后，您可以创建一个按钮，在body元素上切换.red类，并将首选主题存储在localStorage中，或者使用cookie在应用程序加载时切换该类：

main.ts

const theme = localStorage.getItem('theme')
document.body.classList.toggle('red', theme === 'red')