如何将自定义主题添加到 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 主题使用 prefers-color-scheme 媒体查询。

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

variables.scss

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

您可以使用 Color generator and the Stepped color generator. Finally you might want to tweak some specific color variables such as --ion-toolbar-background etc., for ios and md modes, you can look at the Default dark colors 生成其余颜色，从那里复制和编辑其余颜色。

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

main.ts

const theme = localStorage.getItem('theme')

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

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

How to add custom theme to Ionic 5 application?

ionic-framework

angular

ionic5