我接過一個需求，客戶想在「一般版」和「節慶版」配色之間切換，聖誕節換成紅綠、平常回到藍白。傳統佈景主題時代，我的做法是準備兩套 CSS，再寫一段 PHP 判斷日期去 wp_enqueue_style 不同檔案，還得處理快取。

後來嘗試改用 Block Theme 重做同樣的需求，只花了幾分鐘就搞定，因為全域樣式和樣式變化把換配色這件事，從寫死的 CSS 變成了可切換的設定。

這是 Block Theme 一個很被低估的能力，它的關鍵藏在上一篇講過的 theme.json 裡。

全域樣式：theme.json 的後台化身

之前提到 theme.json 用 styles 定義全站的預設樣式，背景色、內文字型、連結顏色。全域樣式就是這份 styles 在後台的視覺化面板。

打開網站編輯器的樣式選單，你會看到一個可以調排版、色彩、背景等設定的介面，你在這裡的每一個調整，本質上都是在改 theme.json 裡 styles 那一段的值，只是換成滑鼠點選、而且改完即時預覽：

開發者用 JSON 決定好基礎樣式，網站擁有者用面編輯器修改，兩邊改的是同一份設定，這正是之前提過的「檔案 vs 資料庫」機制在樣式層的具體實作：編輯器改的東西存進資料庫，覆蓋在檔案 theme.json 的預設之上。

拿傳統主題類比，這相當於把 style.css 裡那些「全站通用的變數」抽出來，做成一個客戶自己就能安全調整的後台面板，而且不會像以前那樣，客戶亂改 CSS 就整站爆版。因為他能調的範圍，早就被 settings 框好了。

樣式變化：一個主題，多套完整風格

全域樣式是「調整目前套用的樣式」，樣式變化更進一步的讓同一個主題，內建好幾套可以整組切換的完整風格。

做法出乎意料地簡單。在主題的 styles/ 資料夾裡，每放一個 JSON 檔，就是一套變體：

your-theme/
├── theme.json          ← 預設風格
└── styles/
    ├── christmas.json   ← 節慶版：紅綠配色
    └── dark.json        ← 深色版

每個變體檔的結構跟 theme.json 一樣，只寫你要覆蓋的部分：

{
	"version": 3,
	"title": "節慶版",
	"settings": {
		"color": {
			"palette": [
				{ "slug": "primary", "color": "#c8102e", "name": "節慶紅" }
			]
		}
	}
}

放好之後，網站編輯器的樣式設定就會多出兩個選項，使用者點一下，整站配色字體瞬間換過去：

回到開頭那個客戶需求：兩套 CSS 加 PHP 判斷日期的整套工程，現在變成兩個 JSON 檔加一次點選。

為什麼傳統主題做不到這麼乾淨

傳統主題不是不能換外觀，同樣的需求也可以用子主題處理，但核心問題在於傳統主題的樣式是命令式、全域、靠覆蓋順序運作的。你要切換風格，得載入另一套 CSS 去覆蓋原本的，然後開始跟 specificity 和 !important 打架，還要祈禱沒有漏改的角落。切換邏輯本身也得自己寫，用 cookie 記住選擇、用 PHP 換 enqueue、處理快取。

Block Theme 的樣式是宣告式、結構化的，每套變體就是一份完整的設定描述，切換等於「換一份設定來源」，WordPress 自己重新生成對應的 CSS 變數。沒有權限覆蓋層級、沒有自己寫切換邏輯、沒有快取地雷，這就是「宣告式 vs 命令式」差異，在使用者體驗層面最直接的體現。

因為變體就是一份結構化 JSON，這也是 AI 極擅長生成的東西，第三部我們甚至可以讓 AI 一次幫你生出好幾套配色變體，你在後台一個一個點著看哪套順眼。這在傳統主題「一套風格一份 CSS」的年代是難以想像的效率。

配色與字體的全站切換講完了，第二部只剩最後一塊拼圖，下一篇我們處理區塊版面——那個讓你把一整組排好版的區塊「存起來重複利用」的機制，以及介紹同步和非同步區塊版面的差異。

文章目錄：https://oberonlai.blog/category/2026-ithome/