如何在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

您只能对<{1}}和dark主题使用 prefers-color-scheme 媒体查询。

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

variables.scss

light

您可以使用Color generator和Stepped color generator生成其余颜色。最后，您可能需要调整一些特定的颜色变量，例如body.red { --ion-color-primary: red; /*...*/ } 等，对于--ion-toolbar-background和ios模式，您可以查看Default dark colors，复制并编辑其余的变量那里的颜色。

此后，您可以创建一个按钮，该按钮可以在body元素上切换md类，还可以将首选主题存储在.red内，或使用localStorage并在您应用加载：

main.ts

cookie