SAP UI5 应用的暗黑模式 - Fiori 3 Quartz Dark 主题的使用

本教程前面两篇步骤,我们已经学习了使用 CSS 对我们开发的 SAP UI5 应用的界面进行美化的一些步骤。

进入文件夹 13,运行命令行 ui5 serve, 然后访问 url:http://localhost:8080/webapp/index.html

能看到如下界面:

我们回忆一下,Fiori 1.0 时代,SAP 发布的前端应用主题为 Blue Crystall,界面效果如下图所示。这是我 2015 年在 SAP 成都研究院 CRM Fiori 应用开发团队开发的 My Opportunity Fiori 应用,用的就是 Blue Crystall Theme.

Fiori 2.0 时代的 Belize 主题如下图2 所示。2018年的时候,我已经转到了 SAP S/4HANA Customer Management 开发团队了。下面是 Opportunity 应用套上了 Belize Theme 的界面外观。

Fiori 3.0 时代的 Quartz Light 主题:

以及 Quartz Dark 这种暗黑主题:

本教程已经开发了很多 SAP UI5 应用了。如何在我们开发的这些 SAP UI5 应用也用上这些 Fiori 主题?

比如我们怎样才能把下面这个 SAP UI5 应用:

更改成使用 Quartz Dark 暗黑主题,成为下面这种效果?

本文余下部分我们就来详细探讨这个需求的实现。

猜你喜欢

转载自blog.csdn.net/i042416/article/details/128762534