主題

主題是一組樣式或屬性，例如顏色、類型和形狀 都可能影響使用者行動裝置或大螢幕裝置的外觀和風格 應用程式內體驗

重點整理

  • 為了讓使用者享有更貼近個人需求的個人化體驗，請確保應用程式 採用系統偏好設定，包括淺色或深色、動態及 對比。
  • 建立動態主題時，如果無法使用動態主題，可以建立做為備用主題的自訂主題。
  • 使用各種主題時，不妨考慮類型設定。
  • 隨時檢查文字與表面對比度，確保內容清晰易讀。

主題類型

主題是以系統或應用程式為基礎。系統主題可能會影響整個使用者 裝置使用者介面，並在裝置設定中提供相應的控制項，同時應用程式顯示 主題只會影響其實作的應用程式。

應用程式必須實作任一主題類型即可顯示該主題，但套用應用程式主題 僅在應用程式內部執行，不會在裝置上的其他位置提供。您也可以覆寫 設定相關的系統主題設定。

系統主題

系統主題會套用至整個 Android 裝置，包括個別應用程式 則取決於使用者的設定系統主題包括淺色和深色主題 使用者撰寫的主題和製造商主題

淺色和深色主題

淺色主題 (即日間模式) 採用高亮度顯示模式， 呈現出高色調的亮度和表面質量相反地，深色主題 或夜間模式。則會改變 UI 來減少亮度。表面以黑暗打造而成 灰色或低色調值。

深色主題有許多優點：讓螢幕在晴朗或低光源環境中更容易閱讀 光線、降低因亮度而造成眼睛疲勞，並 電池。此外，使用者最常要求的應用程式功能也經常是使用者最想使用的應用程式功能。

圖 1：相同的主畫面和圖示，並採用淺色和深色主題 。

實作淺色和深色主題時，請考量以下重點：

  • 您可以自訂色彩配置，產生更大的運算式。如果使用 Material Design 主題建構工具用來建立配置，會自動產生深色 配置。進一步瞭解如何自訂 Material Design 和色彩系統， 品牌主題
  • 使用者可以在系統層級的顯示設定中，設定淺色主題或深色主題 設為一律開啟、一律關閉，或根據時段自動設定。建議做法 顯示使用者偏好的系統設定 建立應用程式內控制項，為使用者提供更精細的修改項目。
  • WebView 中的網頁內容也可使用淺色、深色或預設樣式。閱讀 WebView 中的深色主題支援
  • 如果使用者啟用這個選項，Android 即可強制執行深色主題。你也可以建立 自訂深色主題，全面掌控
  • 如果使用者未啟用其他主題或設定，你可以選擇 「鎖定」改成淺色主題不過，我們不建議這麼做 滿足使用者的無障礙和個人化需求
，瞭解如何調查及移除這項存取權。
圖 2：顯示相同內容，但使用淺色和深色主題的應用程式
使用者生成的主題

動態色彩可支援使用者產生的主題， 自 Android 12 起，我們為 Material You 提供的所有功能。啟用後 顏色會從使用者的桌布產生自訂色彩，並套用至其應用程式 以及系統 UI這個調色盤是用來做為生成的起點 淺色和深色色彩配置。

此外，使用者也能在裝置設定中更新字型設定 偏好設定和無障礙需求這些設定可以 因此，請務必使用可縮放的像素值做為字型。

圖 3：從桌布衍生的 UI 色彩配置


圖 4：應用程式 UI 色彩配置桌布
製造商主題

裝置製造商可能會提供其他專屬主題設定功能 可能會影響系統 UI 和顯示設定。

應用程式主題

基準

Material 程式庫中的 Material 元件提供基準主題， 使用紫色配置和 Roboto 字型。未定義主題的任何應用程式 屬性都會還原成這些基準屬性。

自訂 (品牌)

自訂主題可讓您以更多元的方式呈現應用程式的外觀 或者在沒有特定系統主題時派上用場 無論您使用的是完整的自訂設計系統 品牌指南或是幾款您最愛的顏色

您的應用程式也可以擁有多項自訂配置，無論使用者能否運用完整的配置機制 包括創作、主題或子品牌元素

圖 5：套用了基準主題的同一個應用程式及其內容 (左) 套用了自訂主題 (右圖)


圖 6：具有基準產生的主題 (左側) 和主題的按鈕 由自訂值組成 (右側)
內容

為了進一步聚焦某些內容，UI 可使用動態色彩來沿用顏色 從該內容開始著手內容顏色適合只有一個主要內容來源 請務必謹慎處理含有多個內容來源的檢視畫面。

圖 7：從重要圖片提取內容的應用程式。媒體通知也能從媒體圖片中擷取顏色

主題通常會對整體應用程式造成影響，但也可以選擇性套用 和其他主題一起顯示請保留 階層：主要主題來源 (無論是動態或自訂) 將套用至大多數 UI

圖 8：應用程式可套用動態主題，藉此運用各種主題設定 套用特定元素的不同顏色或品牌顏色
材質

Material Design 提供基準主題和主題設定系統 (顏色、類型、 形狀)。Material Design 主題設定也可以擴充完成 對應至主題。

品牌

如果 Material Design 主題系統的樣式與風格不符 即可實作完全自訂的主題。務必測試自訂 以便解讀對比和易讀性

瞭解如何在 Compose 中實作自訂系統。

主題屬性

主題屬性與 UI 設計中常用的視覺樣式一致， 用於表達各種美感在應用程式內，這些屬性通常會與 Material Design 連結 主題設定系統，可讓使用者自訂應用程式製作工具。

顏色

使用顏色表達個人風格並傳達意義。設定應用程式的顏色 可能影響個人化程度、定義語意用途 定義品牌識別

主題中的色彩配置是指指派給特定角色的一組色調 對應至元件進一步瞭解 Android 中的顏色 UI 和 Material 3 色彩系統。

圖 9：著色

類型

Android 的系統字型是 Roboto (所有應用程式皆可免費使用)，但您可以 可以自訂類型考量到所選字型對齊時易讀性 他們的角色。瞭解套用類型。

圖 10：根據標題大小的範例類型

形狀

您可以自訂超過基準預設值的容器邊角形狀， 我們要定義應用程式的字元舉例來說，您可以使用全圓角 營造柔和逗趣的氛圍，也可使用角剪輯，營造更深刻的感受。 請查看 Material 元件的形狀符記和樣式。

圖 11：容器邊角形狀

圖示

Material 圖示提供五種樣式，可在應用程式中使用：填滿、 外框、銳利、圓角、雙色調。在整個 應用程式維持一致而精美的外觀

圖 12：Material Design 圖示樣式

其他佈景主題屬性

雖然顏色、類型和形狀是主要的 Material Design 主題設定系統； 設計系統並非受限於 Material Design 依賴的概念。你可以 修改現有系統並導入全新的類別，包括新的類別和 讓其他概念與佈景主題相容。您可能還需要 擴充或替換現有系統，使用自訂屬性以外的功能 而不是每個 Pod 的名稱舉例來說，您可以新增漸層或間距系統。 維度。

在應用程式中套用主題

主題與樣式加類別

主題和樣式都可以有多種設計屬性。樣式可以是 指的是個別元素 (或 View) 可讓您同時為多個元素 (甚至整個元素) 設定主題 應用程式。樣式是可重複使用的風格選擇，與風格或符記相似 開發軟體例如，內文 L 是風格，而淺色和深色 都是主題

在 Compose 中實作主題

主題通常由多個系統組成，這些系統結合了共同的視覺元素和 行為概念，也就是使用具有主題設定值的類別建模。

如要進一步瞭解如何使用 Jetpack，請參閱「Compose 中的 Material Design 3」 Compose 來建立 Material Design 3 主題的實作內容。

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
在 View 中實作主題

主題是一組可使用語意命名的資源 在整個應用程式中主題會共用相同的樣式語法。

開始使用資料檢視。

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

網頁畫面

WebView 中的網頁內容也可使用淺色、深色或預設樣式。瞭解詳情 WebView 支援深色主題。

自訂 Material 主題

您可以使用 Material Design 主題設定建構工具 Figma 外掛程式， 自訂 Material Design 主題。運用此功能建構主題， 產生採用淺色和深色色彩配置的主題檔案， ，只要更新匯出的主題檔案， 確切值

圖 13：質感設計主題建構工具可讓您產生動態和自訂 主題