离子2应用的主题

Question

我已经在离子2中创建了应用程序并且已经完成，现在我想创建另一个具有相同代码库但具有不同主题颜色/图像的应用程序。

我想知道如何在theme / variable.scss src / app.scss中有条件地定义颜色和样式变量。

我希望我的问题有意义并且对所有人都清楚。请建议处理此问题的最佳方式/做法。

Answer 1

您可以在.scss文件中定义颜色变量。我不会说保留旧开销并将其放入新应用程序是一种好习惯。

您的theme/variables.scss可能如下所示：

$colors: (
    primary:    #488aff,
    secondary:  #32db64,
    danger:     #f53d3d,
    light:      #f4f4f4,
    dark:       #222
);

在您的其他页面上，您可以使用以下颜色：

color($colors, primary);

因此，更改颜色非常容易，因为颜色代码（#488aff）仅在一个地方定义，而页面中的定义仅指代它。

注意：如果您想使用动态主题，例如按时间（白天亮，晚上黑暗），您可以查看此存储库：https://github.com/yannbf/ionic3-components/tree/master/src/pages/theming