共用方式為


主題概觀

注意

在 Power Apps 入口網站中,啟用基本主題功能會設為關閉。 當您打開此功能時,您可以使用名為預置的預設主題。 您也可以建立預設主題的複本以進行其他自訂。

在本文中,您將瀏覽基本的主題功能。 如需進階主題自訂,請參閱編輯 CSS

為現有的入口網站啟用基本佈景主題

  1. 登入 Power Apps

  2. 在左導覽窗格中,選取應用程式,然後選取入口網站。

    選取應用程式和入口網站。

  3. 選取更多命令 (...),然後選取編輯

    編輯入口網站。

  4. 從左導覽窗格選取主題,然後打開啟用基本主題切換鍵。

    啟用基本主題。

為您的入口網站更換主題

您可以將入口網站中任何的現有主題設為預設主題。

  1. 登入 Power Apps

  2. 在左導覽窗格中,選取應用程式,然後選取入口網站。

  3. 選取更多命令 (...),然後選取編輯

  4. 從元件窗格中選取主題

    選取主題圖示。

  5. 從可用預設中選取任何預設的主題(在本範例中,我們選取綠色)。

    選取預設主題。

選好的主題隨即套用到您的入口網站中。

套用主題。

注意

在 Studio 中變更佈景主題或佈景主題屬性(例如顏色)後,請選取瀏覽網站以在單獨的瀏覽器索引標籤中查看變更。如果您使用此方法進行了多項變更並切換到瀏覽器內的其他頁面,則過時的瀏覽器快取可能會導致瀏覽器顯示的佈景主題變更不是最新的。 如果發生這種情況,請使用 Ctrl+F5 重新載入頁面。

建立新的佈景主題

  1. 登入 Power Apps

  2. 在左導覽窗格中,選取應用程式,然後選取入口網站。

  3. 選取更多命令 (...),然後選取編輯

  4. 從元件窗格中選取主題

  5. 選取新的主題

    建立新的佈景主題。

編輯主題詳細資料

您可以在 Power Apps Studio 中更新主題名稱、描述、色彩和其他排版設定。

  1. 登入 Power Apps

  2. 在左導覽窗格中,選取應用程式,然後選取入口網站。

  3. 選取更多命令 (...),然後選取編輯

  4. 從元件窗格中選取主題

  5. 選取目前套用的主題,或從預設中選取新的主題。 選取主題時,會在工作區的右側打開詳細資料窗格。

    主題詳細資料。

  6. 編輯不同區域主題詳細資料,如名稱、描述及色彩。

    顏色選項 受影響的區域
    主要 按鈕和連結色彩。
    頁首​​ 頁首背景色彩。
    標題功能表文字 頁首功能表的文字顏色。
    標題功能表暫留 功能表項目懸停時的背景色。
    背景色彩 主體部分的背景色彩。
    頁尾背景 頁尾背景色彩。
    頁尾文字 頁尾文字色彩。
  7. 儲存並發佈變更。

複製預設主題

  1. 登入 Power Apps

  2. 在左導覽窗格中,選取應用程式,然後選取入口網站。

  3. 選取更多命令 (...),然後選取編輯

  4. 從元件窗格中選取主題

  5. 從預設中選取您要複製的主題,選取 ...,然後選取自訂

    複製預設主題。

  6. 依照上節所述更新主題詳細資料,然後儲存主題。

Sass 變數

Sass 是一種含完整 CSS 相容語法的樣式表語言 。 當您啟用基本主題功能時,您可以使用 Sass 變數 而不是值來設定主題顏色。

例如,如果您希望頁首顏色比主要色彩淺 25 %,您可以使用下列值,而非使用特定顏色:

lighten($primaryColor, 25%);

Sass 範例。

您可以在基本主題使用下列 Sass 變數:

顏色選項 Sass 變數名稱
主要 $primaryColor
頁首​​ $headerColor
標題功能表文字 $headerMenuTextColor
標題功能表暫留 $headerMenuHoverColor
背景色彩 $bodyBackground
頁尾背景 $footerColor
頁尾文字 $footerTextColor

Sass 變數順序

Sass 變數會從上到下工作。 您可以將頁首色彩設定為 lighten($primaryColor, 25%);。 但是,您無法將主要色彩設定為 lighten($headerColor, 25%); ,因為頁首在色彩選項清單中位於主要底下。

基本主題考量

  • 您不能讓兩個主題有相同的主題名稱或相同的主題檔案名。
  • 任何手動輸入的顏色值都必須是有效的顏色。
  • 不支援變更預設主題 CSS。
  • 建議的主題前景和背景色對比度為 4.5:1(適用於輔助功能)。

後續步驟

編輯主題CSS

請參閱

Power Apps 入口網站工作室
建立和管理網頁
WYSIWYG 編輯器

注意

是否能請您告知您偏好的慣用文件語言? 請填寫問卷。 (請注意,本問卷為英文版)

完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。