Question

在Ionic 3中，我只需在variables.scss上添加一行即可轻松地将深色主题应用于我的应用程序：

@import "ionic.theme.dark";

在Ionic 4中还能做到这么简单吗？如果是的话，怎么办？

Answer 1

我认为您应该在变量css中声明主题

https://beta.ionicframework.com/docs/theming/color-generator

Answer 2

您必须在variables.scss中创建一个规则，如下所示：

:root {
  ...
}

.ion-color-special {
  --ion-color-base: #faa;
  --ion-color-base-rgb: 38, 36, 58;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: #ffffff;
  --ion-color-shade: #100f19;
  --ion-color-tint: #493535;
}

类的special部分是主题的名称。无法以这种方式创建:root {}规则中已经包含的名称（例如dark）。

您必须像这样将主题名称传递给每个离子成分的color属性：

<ion-button color="special">Press me</ion-button>

如果要在<p>这样的非离子标签中使用主题，则需要使用CSS来指定主题颜色如何影响您的元素：

p {
  background: var(--ion-color-base);
  color: var(--ion-color-contrast);
}

然后将类添加到需要具有主题的元素中：

<p class="ion-color-special">Lorem ipsum</p>

Answer 3

您必须创建自己的CSS变量。例如

:root {
  .red-theme {
    // your colors --ion-color-primary etc
  }
}

并使用RendererFactory2获取更多信息，您可以在此link

上看到

离子4的黑暗主题

3 个答案: