- 登入
- 註冊
【功能更新】全站深色模式｜保留品牌色，一次切換網站外觀
內容目錄
顯示
網站想換成深色風格，常見的難題不是把背景改黑，而是改完之後，文字、卡片、選單、按鈕與商店頁面是否還清楚。若每個頁面都要逐一調整，除了耗時，也很容易出現首頁完成了，內頁卻仍是亮色，或品牌按鈕變得看不清楚的情況。
秒站的全站深色模式把這件事收進「外觀與設定」。開啟並儲存後，網站會以深色背景與淺色文字呈現，頁首、頁尾、文章、原生區塊、商品與購物流程也會一起套用；原本的品牌主色、輔色與背景設定仍會保留，之後關閉深色模式，就能回到原來的亮色外觀。
深色模式特色快速看
| 功能 | 適用時機 | 帶來的改變 |
|---|---|---|
| 全站切換 | 想統一網站的深色視覺 | 頁首、內容區、頁尾與支援的功能頁一起轉為深色 |
| 保留品牌色 | 已有固定主色與輔色 | 不用重建品牌色盤，深色介面仍保有原本識別 |
| 按鈕文字選擇 | 品牌按鈕顏色較深或較亮 | 可選自動、黑色或白色，讓按鈕文字更容易閱讀 |
| 保留原背景 | 想在深色與亮色之間切換 | 開啟深色時不會覆蓋原背景設定，關閉後可恢復 |
| 跨裝置呈現 | 網站同時有電腦、平板與手機訪客 | 同一套深色外觀延伸到不同螢幕寬度 |
這不是讓訪客自行切換的閱讀按鈕，而是由網站經營者決定整站外觀。你只要在同一個設定位置選擇模式並儲存，不必分別替每個頁面製作一套深色版本。
一次設定，讓網站主要區域一起換成深色
不是只改背景，而是整理整套閱讀層次
深色網站需要的不只是黑色底。標題、正文、說明文字、卡片、輸入欄位與分隔線，都要有清楚的層次，訪客才不會看到一片灰。秒站會為支援的介面配置深色表面、淺色文字與必要的邊框，讓內容區塊之間仍能辨識，同時保留原有版面、間距與圖片。
品牌主色與輔色會繼續留在網站上
切換深色模式不代表整個網站只能剩下黑、白、灰。你在「外觀與設定」選好的主色與輔色仍會保留，連結、重點元素與按鈕可以繼續帶出品牌識別。系統會針對文字顯示做可讀性調整，不會直接改掉你原本保存的品牌色資料。
按鈕文字可用自動判斷，也能固定黑色或白色
不同品牌的按鈕底色差異很大，單一文字顏色不一定適合每個網站。深色模式提供「自動」、「黑色」與「白色」三種按鈕文字選擇。多數情況可以先使用自動，讓系統依按鈕底色選擇較清楚的文字；若品牌規範要求固定搭配，也可以直接指定黑色或白色。這項設定只處理按鈕文字與圖示，不會改掉按鈕底色。
想回到亮色時，原本背景不用重設
開啟深色模式後，原本選擇的背景色或自訂背景仍會保留，只是暫時不拿來覆蓋深色外觀。之後若關閉深色模式，網站會回到原本的亮色背景設定。你可以先在預覽與測試流程中確認品牌內容，再決定是否長期使用，不必為了嘗試深色風格而重新記錄每個色碼。
從品牌頁面到商店流程，都有一致的深色體驗
一般頁面、文章與秒站原生區塊
首頁、關於我們、服務項目、聯絡頁、文章列表與文章內容，都能沿用同一套深色視覺。秒站頁面編輯器內的原生區塊也會跟著調整文字與表面色，不需要逐段複製頁面。圖片維持原貌，不會被直接反相，因此作品照、商品照與人物照片仍能保有原來的色彩。
商品、購物車、結帳與會員頁面
有使用輕電商功能的網站，深色模式也會延伸到商品列表、商品內容、購物車、結帳與會員相關頁面。表單欄位、訂單表格與操作按鈕會採用對應的深色樣式，可降低秒站支援頁面之間出現明顯亮暗落差的情況；第三方與自訂內容仍需另外檢查。
電腦、平板與手機維持同一套設定
深色模式是全站外觀設定，不需要針對手機再開一次。訪客使用不同裝置時，網站會沿用相同的深色配色，再依既有響應式版面調整排列。原本的選單、欄位與區塊結構不會因為換色而改變，經營者仍可用熟悉的內容與版面繼續維護網站。
哪些網站適合使用深色模式？
重視照片、作品與氛圍的品牌網站
攝影、音樂、設計、藝文與個人作品網站，常希望畫面更聚焦在圖片與作品本身。深色背景能降低周圍色塊的干擾，讓照片、封面與影片縮圖更突出。由於圖片不會被反相，你可以保留作品原本的色調，再用品牌主色帶出連結與行動按鈕。
想建立沉穩質感的商品與服務網站
如果品牌使用深藍、金色、酒紅或低彩度色系，深色模式可以讓整體視覺更集中。商品頁、方案卡片與服務介紹仍能保留品牌色，按鈕文字則可依底色自動選擇，或由你指定黑白搭配。正式套用前，建議逐一檢查主要商品圖、促銷圖與品牌 Logo 在深色背景上的邊界。
有大量文章與長篇閱讀內容的網站
知識型網站、部落格與線上內容服務，可以用深色模式建立一致的閱讀環境。標題、正文、次要說明與分隔線會使用不同層次，讓文章結構維持清楚。深色不等於一定適合每位讀者，因此仍要用真實文章、連結、引用區塊與表格檢查閱讀感，而不是只看首頁首屏。
使用前要知道的範圍與提醒
- 這是網站經營者設定的全站模式。目前不是讓每位訪客自行選擇亮色或深色的切換鈕。
- 自訂 Vibe 畫布與自訂 HTML 不會自動改色。這些內容可能有自己的背景與文字設定，需要另外檢查。
- 第三方內嵌內容維持原設計。外部表單、影片、iframe 與外部金流頁面不會被強制轉成深色。
- 圖片與 Logo 不會反相。透明 Logo 或邊緣接近背景色時，請用實際頁面確認辨識度。
- 自訂樣式仍需逐頁檢查。若網站曾加入額外色碼或特殊區塊，建議在電腦與手機各看一次主要頁面。
從哪一步開始？
- 先整理網站目前的品牌主色、輔色與 Logo，確認哪些元素需要保留。
- 到秒站主控台的「外觀與設定」開啟深色模式，先保留按鈕文字為「自動」。
- 儲存後檢查首頁、內容頁、文章、商品、購物車與結帳頁。
- 若按鈕文字不符合品牌規範，再改成固定黑色或白色並重新檢查。
- 確認電腦與手機的主要頁面，再把深色版本交給訪客使用。
完整操作入口、設定方式與檢查清單，請參考教學文件〈深色模式設定〉。把外觀切換與內容檢查分開處理，會比在同一次修改中重做所有頁面更容易確認結果。
想用自己的品牌內容試試深色網站？
深色模式處理的是整站視覺，你仍可以依頁面需求混用現成架構、秒站頁面編輯器與 AI 協作的 Vibe 畫布。先用自己的 Logo、品牌色、圖片與文章測試，最容易判斷深色風格是否適合你的網站。
重點整理
深色模式會修改原本的品牌主色與輔色嗎？
不會。深色模式會保留網站已設定的品牌主色與輔色，並針對文字顯示做可讀性調整。之後關閉深色模式，原本保存的品牌色資料仍在，不需要重新輸入色碼。
開啟深色模式後，原本的網站背景會消失嗎？
原本的預設背景或自訂背景會保留。深色模式啟用時，網站暫時使用深色外觀；關閉後會恢復原本的亮色背景設定，不必重新選擇。
訪客可以自己切換亮色與深色嗎？
目前深色模式是由網站經營者設定的全站外觀，不是提供給每位訪客自行切換的按鈕。儲存後，訪客看到的網站會統一使用你選擇的模式。
深色模式會套用到商品、購物車與結帳頁嗎？
會套用到秒站支援的商品列表、商品內容、購物車、結帳與會員相關介面。若頁面中另外嵌入第三方內容或自訂程式，該區域仍需單獨檢查。
自訂 Vibe 畫布也會自動變成深色嗎？
不會。自訂 Vibe 畫布與自訂 HTML 可能包含自己的背景、文字與互動設計，因此不會被全站深色模式強制改色。共用頁首與頁尾仍會跟隨全站模式。
圖片與 Logo 會被反相或改色嗎？
不會。深色模式不會直接反相圖片或改寫 Logo。若 Logo 使用透明背景，而且圖案顏色接近深色背景，建議在實際頁首與手機畫面確認辨識度。
按鈕文字的自動、黑色與白色有什麼差別？
自動會依按鈕底色選擇較清楚的黑色或白色文字。若品牌規範已有固定搭配，可以指定黑色或白色。這項設定只影響按鈕文字與圖示，不會修改按鈕底色。
切換深色模式後需要檢查哪些頁面？
建議至少檢查首頁、主要服務頁、文章、聯絡表單、商品、購物車、結帳與會員頁，並用電腦及手機各看一次。網站若有自訂樣式、第三方內嵌內容或透明 Logo，也要另外確認。
