畫布應用程式最吸引人的功能，是能夠根據使用者或組織的商標和喜好，自訂使用者介面。 主題原則讓我們能建立符合組織品牌的應用程式。 主題包含樣式集合，可為控制項和元件 (如色彩、字型和邊框) 定義多個設計屬性。
在本文中，我們將學習如何使用全域變數來定義主題，以及如何在整個應用程式中，透過更新全域變數輕鬆地變更色彩和屬性。
觀看此影片以了解如何在樣本應用程式範本中提供主題：
先決條件
若要完成本課程，我們需要能在 Microsoft Teams 中建立應用程式，這會成為所選 Microsoft 365 訂閱的一部分 。 您也會需要已安裝在您團隊中的 Microsoft Teams Milestones 樣本應用程式範本。 您可以在 https://aka.ms/TeamsMilestones 把它安裝到您的團隊。
定義主題原則
在此範例中，我們將查看全域變數如何被用來在 Milestones 應用程式中，定義主題的色彩與風格。 下列全域變數已在載入畫面的 OnVisible屬性中被定義。
- gblAppColors 來定義色彩，讓它們可以輕易被參考
- gblAppSizes 來定義行動裝置應用程式和 Web 應用程式的不同字體大小
- 每一個使用 gblAppColors 之控制項的 gblAppStyles 屬性
- 當 Teams 主題為暗色時，將 gblThemeDark 設定為 true，，讓所有控制項調整為深色主題
- 當 Teams 主題為高對比時，將 gblThemeHiCo 設定為 true，讓所有控制項調整為高對比
測試主題原則
關於測試主題原則，已定義兩個隱藏的畫面：
隱藏的系統管理畫面 – 此畫面有兩個定義為 tglAdmin_DarkMode 和 tglAdmin_ContrastMode 的切換開關。 此畫面有助於快速測試深色和對比度模式，而無需變更團隊進行測試的主題
隱藏的控制項畫面 – 此畫面包含每一個屬性設定為使用 gblAppStyles 的控制項。
有助於測試主題變更。
有助於複製特定控制項並將它貼到必要畫面，這樣就不需要重複輸入控制項的公式。
使用樣本應用程式範本的主題變數
若要了解 Milestones 應用程式中的主題使用，請在樹狀檢視表中選取專案畫面 以打開畫面，然後選取 + 新專案。
選取 + 新專案的色彩 屬性 。
請注意，該公式參考載入畫面 OnVisible 屬性中的 gblAppStyles > ButtonTransparent > Color 公式。
因此，如果應用程式的主題是高對比，就會使用在 gblAppColors > HighContrastHyperlinks 公式中定義的顏色。
另一個例子是查看主要和次要按鈕。
在編輯器中選取專案畫面。
按住 Alt 鍵，然後選取專案畫面上的篩選條件圖示。
篩選條件工作項目彈出式視窗會隨即打開。 請注意兩個按鈕：清除和套用。
套用是主要按鈕的範例，而清除 則是次要按鈕的範例。
選取套用按鈕，然後選取任何邊框/厚度/色彩相關屬性，並注意定義的公式。
套用按鈕會定義為主要按鈕，並使用在載入畫面 > OnVisible> ButtonPrimary 公式中所定義的所有屬性。
依據 ButtonPrimary 公式中選取的主題與色彩變數，按鈕的樣式屬性會得到更新。
同樣地，清除會定義為次要按鈕，並使用在 gblAppStyles > ButtonSecondary 底下定義的所有屬性。
注意
另一個可能的應用程式擴充功能是將字體新增為屬性，可能是一個可用於所有控制項的變數，或每個控制項各有一個 (就像為主要按鈕或次要按鈕，單獨定義其他樣式屬性的方式一樣)。 整個 Milestones 應用程式中的字體是 Segoe UI，且不需要為字體的主題提供識別碼。
更新樣本應用程式範本中的主題
在本節中，我們將了解如何變更特定控制項的屬性，以及控制項在不同畫面上的更新方式。 在我們的範例中，我們將更新主要按鈕的 Fill 屬性，並在深色模式和預設模式中，查看按鈕顏色變更的方式。
請移至載入畫面 ，並在下拉式選單中選取 OnVisible 屬性。
展開公式列，並向下滾動至 ButtonPrimary > Fill 函式。
將最後兩個參數更新為 Red 和 DarkRed。
請移至另一個畫面，然後回到載入畫面，以執行 OnVisible 函數。
請移至專案畫面，選取篩選條件按鈕以打開篩選條件彈出式視窗，並注意套用按鈕的顏色現在是 DarkRed。
請移至隱藏的系統管理畫面，按住鍵盤上的 Alt 鍵，並選取開啟深色模式切換開關。
再次移至要載入函數的載入畫面，然後回到專案畫面。 請注意畫面現在處於深色模式 (背景色較深)，而套用按鈕顏色現在已變更為 Red。
同樣地，變更 SecondaryButton 的屬性，會變更次要按鈕，例如清除按鈕的色彩。
注意
直接更新 fill 函數是測試主題的快速方式，就像先前所示。 如果除了主要按鈕控制項以外的其他所有控制項也需要變更色彩，則必須使用所需色彩及組織中最有意義的名稱來更新變數 gblAppColors 底下的調色盤。 例如，
companynameDefaultHeader: ColorValue("#30D5C8")將會是土耳其藍的公式。