如何为Ionic 5应用程序添加自定义主题？

Question

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

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

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

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

但这不管用。我还尝试从https://ionicframework.com/docs/theming/advanced中添加javascript代码。

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

Answer 1

您只能对dark和light主题使用dark媒体查询。

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

variables.scss

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')