我們可以使用下圖高亮的這行程式碼來設定應用的 theme：

![](https://img-blog.csdnimg.cn/img_convert/db18788ab762100a79cc143933352a33.png)

```javascript
sap.ui.getCore().applyTheme("sap_fiori_3");
```

這個方法使用給定名稱應用主題，其具體實現方式是透過載入相應的樣式表，這不會中斷應用程式的正常執行。

預設情況下，主題檔案應位於相對於相應控制元件庫的路徑：

`[libraryLocation]/themes/[themeName]`

可以使用 setThemePath() 方法或 applyTheme() 的第二個引數 `sThemeBaseUrl` 來配置不同的位置。第二個引數的用法是 setThemePath 的簡寫，並在內部呼叫 setThemePath，因此主題位置是已知的。

sThemeBaseUrl 是一個 URL，用於指定所有主題檔案的預設位置。此 URL 是控制庫資料夾所在的基本資料夾。例如。如果 CSS 檔案不是相對於 UI5 的根位置，而是位於類似 `http://my.server/myapp/resources/sap/ui/core/themes/my_theme/library.css` 的位置，那麼 URL需要給出的是：

`http://my.server/myapp/resources`

然後從該資料夾下面載入所有主題資源 - 除非已註冊某個庫的不同位置。

如果主題資源不是全部位於此基本位置或它們各自的庫中，則必須使用 setThemePath 來配置各個位置。

# 設定不同 theme 的重要性

如果對比度不足，有視力障礙的人和在不太理想的情況下使用應用程式的人（顯示器故障、陽光照射螢幕、窗戶反射）可能無法輕鬆閱讀文字。

實施新控制元件時，請考慮新增對不同主題的支援並檢查元素之間的顏色對比。 UI 上顯示的不同顏色需要相互之間具有良好的對比度，以便於區分。

SAPUI5 在建立和使用不同的視覺設計（稱為主題）時為開發人員提供支援，這些設計可以交替使用和動態切換。 這樣，同一個應用程式的外觀可能會大不相同，具體取決於使用者的設計偏好或可訪問性要求。 現有主題可以作為新主題的基礎，並且在出現新設計趨勢的情況下，可以為所有現有應用程式建立匹配的主題，而無需修改應用程式。 主題處理與應用程式開發分離，並在單獨的層中完成。 SAPUI5 庫載入所需的 CSS 檔案並提供切換主題的方法。

關於使用 SAP UI5 程式碼設定應用 theme 的技巧

相關文章