深色模式設定

深色模式會把網站主要介面切換為深色背景與淺色文字，同時保留品牌主色、輔色及原本的背景設定。完成設定後，請依本文件的檢查清單確認電腦版與手機版。

設定前先確認#

• 準備好目前使用的 Logo、品牌主色與輔色。
• 記下需要檢查的主要頁面，例如首頁、服務頁、文章、商品與結帳頁。
• 若網站有 Vibe 畫布、自訂 HTML 或第三方內嵌內容，將這些頁面另外列入檢查。

開啟深色模式#

步驟一：進入外觀與設定#

登入秒站主控台後，開啟「外觀與設定」。在主色與輔色設定之前，找到「深色模式」卡片。

步驟二：打開深色模式開關#

按下「深色模式」右側開關。開啟後，畫面會顯示按鈕文字顏色選項。此時設定尚未套用到公開網站，必須完成儲存。

步驟三：儲存變更#

按下主控台右上角的「儲存」。按鈕顯示「已更新」後，再重新整理公開網站。若儲存失敗，設定會保留在尚未儲存的狀態。請依畫面錯誤訊息檢查連線後重試；若仍失敗，請勿重複切換設定，並聯絡秒站客服協助確認。

選擇按鈕文字顏色#

深色模式提供三種按鈕文字設定：

• 自動：依按鈕底色選擇較清楚的黑色或白色文字，建議先使用這個選項。
• 黑色：所有支援的按鈕文字與圖示固定使用黑色。
• 白色：所有支援的按鈕文字與圖示固定使用白色。

這項設定不會修改按鈕底色。若你選擇固定黑色或白色，請檢查網站上不同品牌色按鈕的文字是否都清楚。

儲存後檢查網站#

檢查一般頁面與內容#

• 頁首 Logo、選單、搜尋與登入入口是否清楚。
• 首頁、關於我們、服務項目與聯絡頁的標題、正文、卡片及分隔線是否容易辨識。
• 文章列表、文章內容、連結、引用與表格是否維持清楚層次。
• 頁尾文字、聯絡資訊與政策連結是否可讀。

檢查商店與會員頁面#

• 商品列表、商品內容、價格與規格選項是否清楚。
• 購物車的商品、數量、折扣與合計是否容易閱讀。
• 結帳欄位、付款方式、運送方式與下單按鈕是否完整顯示。
• 登入、註冊、忘記密碼、會員選單與訂單表格是否清楚。

用手機再檢查一次#

手機會沿用同一套深色模式，不需要另外開啟。請實際打開手機選單、搜尋、表單、購物車與會員選單，確認文字沒有被裁切，欄位與按鈕也能正常操作。

哪些內容需要另外處理？#

• Vibe 畫布與自訂 HTML：這些內容不會自動改色，請在畫布內調整背景與文字。
• 第三方內嵌內容：外部表單、影片、iframe 與外部付款頁維持原服務的設計。
• 圖片與透明 Logo：圖片不會反相。若 Logo 顏色接近深色背景，請換用適合深底的版本，或確認頁首提供的底色能清楚承托。
• 額外加入的自訂樣式：若曾指定固定白底、黑字或特殊色碼，請逐頁檢查是否需要調整。

切回亮色模式#

回到「外觀與設定」，關閉「深色模式」並按下「儲存」。網站會重新使用原本保留的預設背景或自訂背景。先前選擇的按鈕文字顏色會保留，下次再開啟深色模式時可以繼續使用。

完成設定#

確認公開網站已顯示正確模式，並完成主要頁面、商店流程與手機版檢查後，深色模式設定就完成了。若只有特定自訂頁面仍維持亮色，請先判斷該內容是否為 Vibe 畫布、自訂 HTML 或第三方內嵌內容，再到對應的編輯位置調整。若切換後沒有按下「儲存」就離開面板，系統會提醒尚有未儲存變更，離開後不會把這次切換寫入網站。

常見問題

打開開關後，為什麼公開網站還沒有變成深色？

開關操作只會先變更目前畫面中的設定，必須按下右上角的「儲存」才會套用到公開網站。儲存完成後重新整理公開頁面，再確認顯示結果。

關閉深色模式後，需要重新設定背景嗎？

不需要。開啟深色模式時，原本的預設背景或自訂背景會保留。關閉並儲存後，網站會恢復原本的亮色背景設定。

按鈕文字應該選自動、黑色還是白色？

建議先選「自動」，讓系統依按鈕底色選擇較清楚的文字。若品牌規範要求固定搭配，再選黑色或白色，並檢查網站上的不同按鈕。

為什麼有些自訂區塊沒有跟著變成深色？

Vibe 畫布、自訂 HTML、第三方 iframe 與外部服務頁面不會被全站深色模式強制改色。請到原本的編輯位置調整該區塊背景與文字。

設定完成後最少要檢查哪些地方？

至少檢查頁首、首頁、主要內容頁、文章、聯絡表單與頁尾。電商網站再檢查商品、購物車、結帳、登入與會員訂單頁，並用手機重做一次主要操作。