本頁面由 Cloud Translation API 翻譯而成。

主題

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

受迫失誤數

如要為使用者提供更個人化且易於存取的體驗，請確保應用程式採用系統偏好設定，包括淺色或深色、動態和對比度等主題。
無法使用動態功能時，請建立自訂主題做為備用主題。
使用不同主題時，請考慮輸入設定。
請務必檢查文字和表面對比，確保內容清晰易讀。

主題類型

主題是以系統或應用程式為主。系統主題可能會影響使用者整個裝置 UI，並在裝置設定中提供對應控制項，而應用程式主題則只會影響實作的應用程式。

應用程式必須實作任一類型的主題才能顯示，但應用程式主題僅適用於應用程式內，無法在裝置的其他位置套用。您也可以使用應用程式內設定，覆寫部分系統主題設定。

系統主題

系統主題會套用至整個 Android 裝置，包括根據使用者設定顯示的個別應用程式。系統主題包含淺色和深色主題、使用者產生的主題及製造商主題。

淺色和深色主題

淺色主題 (日間模式) 包含亮度較高的明亮顯示模式，以及透過高色調值建構的表面。相反地，深色主題 (或夜間模式) 會改變 UI 來減少亮度。表面是使用深灰色或低色調值建構而成。

深色主題有許多優點，例如讓螢幕在晴朗或低光源環境中更加清晰、因亮度較低而減少眼睛疲勞，以及節省電池電力。此外，也是使用者最常使用的應用程式功能。

實作淺色和深色主題時，請注意以下幾點：

你可以自訂色彩配置，讓運算式更大。如果您使用 Material Design 主題設定建構工具建立配置，系統會自動建立深色配置。進一步瞭解如何自訂質感設計和色彩系統，以便建立品牌主題。
使用者可以在系統層級的「顯示」設定中，將淺色主題或深色主題設為一律開啟、一律關閉或根據時段自動。建議您沿用使用者偏好的系統設定，但我們也建議您建立應用程式內控制項，為使用者提供更精細的修改內容。
WebView 中的網路內容也可以使用淺色、深色或預設樣式。閱讀系統如何支援 WebView 中的深色主題。
如果使用者啟用了這項功能，Android 即可強制使用深色主題。也可以建立自訂深色主題來進一步控制。
如果使用者尚未啟用其他主題或設定，您可以選擇將應用程式「鎖定」為淺色主題。不過，我們不建議這麼做，因為這可能會違反使用者的無障礙和個人化需求。

使用者產生的主題

使用動態色彩支援使用者產生的主題，而 Material You 自 Android 12 起即提供這類色彩。啟用後，動態色彩會從使用者的桌布取得自訂色彩，並套用至其應用程式和系統 UI。這個調色盤會做為產生淺色和深色色彩配置的起點。

您也可在裝置設定中更新字型設定，以符合使用者的偏好設定和無障礙功能需求。這些設定可以也應該適用於應用程式，因此請確保字型使用可擴充的像素值。

製造商主題

裝置製造商可能會提供額外的專屬主題設定，可能會影響系統 UI 和顯示設定。

應用程式主題

基準主題

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

自訂 (品牌)

使用自訂主題可讓您更廣泛地呈現應用程式的外觀和風格，或是可在某些系統主題無法使用時做為備用選項。無論是使用完整自訂設計系統、小型品牌指南或部分喜愛的顏色，這項功能都非常實用。

您的應用程式也可以具有多個自訂配置，無論是供使用者選擇的完整配置、產生靈感的內容或子品牌元素，都包含在內。

內容

為了更能聚焦某些內容，UI 可以利用動態色彩沿用內容的顏色。內容顏色適用於一個主要內容來源，但使用多個內容來源的檢視畫面時，請務必謹慎使用。

主題通常會影響整體應用程式，但也可以選擇性地搭配其他主題套用。如要避免使用過多主題和組合，請保留階層，這是適用於多數 UI 的主要主題來源 (無論是動態或自訂主題來源)。

**圖 8：**應用程式可將動態顏色或品牌顏色套用至特定元素，以便運用主題設定組合

材質

Material Design 提供基準主題和主題設定系統 (顏色、類型、形狀)。也可以擴充 Material Design 主題設定，完成主題的其他屬性。

公司行號

如果質感設計主題系統不符合應用程式內的外觀和風格，您可以實作完全自訂的主題。請務必測試自訂屬性，確保對比度和易讀性。

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

主題屬性

主題屬性會與 UI 設計中常用的視覺樣式對齊，以展現各種美感。在應用程式中，這些屬性通常會與 Material Design 主題設定系統建立關聯，以便讓應用程式開發人員自訂內容。

顏色

使用顏色表達風格和傳達意涵。設定應用程式顏色對於個人化、定義語意用途及定義品牌識別來說都至關重要。

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

類型

Android 的系統字型為 Roboto (所有應用程式均可免費使用)，但您可以自訂類型。請考量所選字型的易讀性，以便與角色保持一致。瞭解套用類型。

形狀

自訂超過基準預設值的容器邊角形狀有助於定義應用程式的字元。例如，您可以使用全圓角設計使氣氛更柔和有趣，或使用角切割方式使畫面更嚴重。請查看 Material 元件的形狀權杖和樣式。

圖示

Material Design 圖示可在應用程式中使用，有五種樣式：填滿、外框、銳利、圓形、雙色調。在整個應用程式中採用相同的圖示樣式，維持一致且精緻的外觀。

圖 12：Material Design 圖示樣式

其他主題屬性

雖然顏色、類型和形狀是由主要 Material Design 主題系統組成，但設計系統並不受限於 Material Design 採用的概念。您可以修改現有的系統，導入新的類別和類型，導入全新的系統，讓其他概念與主題相容。您可能還需要擴充或取代現有系統，以便使用所提供內容以外的自訂屬性。舉例來說，您可能需要新增漸層或間距維度系統。

在應用程式中套用主題

結合主題與風格，再加上課程

主題和樣式都可以有多個設計屬性。樣式可以獨立於主題，也可以指個別元素 (或檢視區塊) 的外觀，而您也可以為多個元素 (甚至整個應用程式) 設定主題。樣式是一種可重複使用的樣式選擇，類似設計軟體中的樣式或符記。舉例來說，內文是樣式，淺色和深色主題。

在 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 中實作主題

主題是按照語意命名的資源集合，可用於整個應用程式。主題共用相同的樣式語法。

開始使用 View。

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

網頁畫面

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

自訂質感設計主題

您可以使用 Material Design 主題設定建構工具 Figma 外掛程式來自訂 Material 主題。只要透過這項功能建立主題，您就能使用已產生的淺色和深色色彩配置來實作主題設定檔案，從而將匯出的主題檔案更新為確切的值，進一步進行自訂。