CSS 六種主題色彩實作技法：從 custom properties 到 if()
chrismorgan.info · 2026-05-16
Chris Morgan 整理了在純 CSS 中實現自動（系統偏好）、明亮、暗色三種主題切換的六種手法，從最相容的手動選擇器到最新的 if() 條件語法，逐一分析每種方案的瀏覽器支援度與表達力取捨。文章澄清了一個常見誤解：CSS variables 的主要實作直到 2014–2017 年才落地，比多數工程師認知的更晚。
六種方案
- 手動選擇器：對每個主題寫獨立的 selector block，相容性最佳但冗長。
- CSS custom properties：以
--color-purpose分離定義與使用，自 2017 年全面支援，是目前業界標準。 color-mix()搭配百分比變數：每個主題設定一個0%或100%的比例變數，透過混色切換主題色，2023 年開始支援；color-mix()的 interpolation color space 預設在 2025 年底才改為oklab，舊語法需明確指定。light-dark()：專為二元明暗主題設計的內建函式，搭配color-scheme屬性，2024 年進入各主要引擎。if()條件函式：對任意 CSS property type 可做離散值切換，目前僅 Chromium 支援（2025）。- 暫停關鍵影格動畫：以負延遲的動畫切換主題值，作者自評「可能是個壞主意」，但理論上支援插值過渡。
規格細節
color-mix() 依照規格可接受兩個以上的顏色做多主題混合，但目前所有主要實作仍僅支援恰好兩個顏色參數。若需支援三種以上主題，需要嵌套多次 color-mix() 呼叫，或改用 if()。
light-dark() 僅適用於顏色值；若要在非顏色 property（如 border-width、font-size）上切換主題，需改用 if() 或 custom properties。兩者組合使用是目前覆蓋面最廣且語義最清晰的方案。
影響範圍
隨著 if() 逐步進入 Firefox 與 Safari，純 CSS 主題切換將不再需要任何 JavaScript，也不需要在 html 或 body 上切換 class。設計 token 管理將可完全在 CSS layer 中完成，Build-time 預處理器對主題切換的必要性進一步降低。
原始來源：chrismorgan.info
Mozilla 以 Claude Mythos Preview 在 Firefox 150 找出 271 個安全漏洞
Mozilla Hacks · 2026-05-07
Mozilla 在 Firefox 150 發布週期中，藉助 Claude Mythos Preview 建立的 agentic harness 識別並修復了 271 個安全漏洞：180 個 sec-high、80 個 sec-moderate、11 個 sec-low。這是 Mozilla 安全工程史上單一週期修復量最高的一次，四月全月共落地 423 個安全修補。
技術架構
早期以 GPT-4 和 Sonnet 3.5 進行靜態分析時，誤報率過高，難以大規模部署。改用 Claude Mythos Preview 後，Mozilla 建置了一個 agentic harness，讓模型能自主建立並執行可重現的測試案例，動態驗證漏洞假說。系統部署於多個 ephemeral VM，每個 VM 針對特定原始碼檔案平行執行，並與現有 fuzzing 基礎設施整合。
發現的漏洞類型
- sandbox escape：受損 content process 升權至 parent process 的多個路徑
- use-after-free：包括
<legend>元素中埋伏 15 年的 UAF，以及 IPC 上的 race condition - JIT 編譯缺陷：WebAssembly GC struct 最佳化中的等值比較錯誤，導致未初始化使用
- XSLT hash table 腐化：20 年前引入、在可重入函式呼叫中觸發的 bug
- prototype pollution 與 refcount 操控
規模效應
整個修補流程包含去重、追蹤、分類與補丁協調，超過 100 名 Mozilla 工程師參與落地。每月修復量從 20–30 個攀升至 2026 年初的 60–70 個，四月峰值達 423 個。Mozilla 計畫將此掃描流程整合為持續整合 (CI) 的常規步驟，對每次新提交的補丁進行安全掃描。
原始來源：Mozilla Hacks