開源專案 · MIT 授權 · Safari 家族
bleedblend
**零設定的 Safari chrome 著色，橫跨 iPhone、iPad、Mac。**
一次 import，就讓 Safari 的狀態列與網址列在每個視窗邊緣都與頁面內容同色：漸層、不透明區塊、橡皮筋回彈全自動處理，不必再手動調 theme-color，也不用設定任何著色參數。bleedblend 馴服的是 Safari 原生的染色，不是另外畫一層；而 Safari 26 的 Liquid Glass 讓這套染色橫跨 iPhone、iPad、Mac，所以同一份頁面結構在整個 Safari 家族都可預測：iOS 主動擺平怪癖，Mac 因模型已統一而直接生效。
運作原理
1.
面臨問題
Safari 26 會用「視窗邊緣剛好有什麼」來決定 chrome（狀態列與網址列）的顏色，這套模型橫跨 iPhone、iPad 與 Mac。但規則既隱晦又沒文件，還會隨版本改變，而在 iPhone 與 iPad 上最為棘手：漸層會留下明顯接縫、精簡分頁列會讓著色偏移約 30px、橡皮筋回彈會露出錯誤的背景色，而 `theme-color` 在 iOS 26 上根本被忽略。
2.
解決方法
只要加上一次 `import 'bleedblend/auto'`。bleedblend 會監看 scroll、resize 與 visualViewport 事件，針對每個視窗邊緣判斷該退場讓 Safari 自然取樣，還是補上一小塊正確顏色的著色，並直接從頁面讀取漸層色標，不需手動維護色標陣列。
3.
最終效果
狀態列與網址列與頁面完美同步：漸層會延伸進 chrome、頁尾顏色在頁面底端接手，連 iOS 橡皮筋回彈露出的區域也染成同色，不再漏出你的備援背景。
主要功能
零設定自動偵測
`import 'bleedblend/auto'` 就是全部 API。它會從 `body::before`、`body` 或 `<html>` 讀出漸層色標，自動算出每個邊緣該用的 chrome 顏色，不必維護任何色標陣列。
依邊緣判斷的狀態機
針對每個視窗邊緣在三種狀態間擇一：交給你自己的 sticky 頁首／頁尾、在 Safari 原生取樣已正確時退場、或只在邊緣會著錯色時才補上著色。
回彈與漸層處理
把漸層延伸進 chrome，並同時覆寫 `<html>`、`<body>` 與 `body::before`，讓 iOS 橡皮筋回彈染成同色，頁面底端不再漏色。
框架無關 ＋ Tailwind
一次 import 即可在任何框架使用，並提供 `onPageLoad` hook 因應 SPA 頁面轉場。另附 Tailwind 外掛與 `.bleedblend-top` / `.bleedblend-bottom`，這正是讓你自己的 sticky 頁首或頁尾「主動」把 chrome 染色的配方，橫跨整個 Safari 家族。
開始使用
從 npm 安裝 `bleedblend`（或直接把原始碼複製進專案），把網頁 viewport meta 設為 `viewport-fit=cover`，再於進入點加上 `import 'bleedblend/auto'`，這一行就是全部設定。需要自訂 section 選擇器或頁面轉場 hook，再改用 `bleedblend/utils` 的 `createBleedblendAuto()`。