boostrap 將自訂 color mode 連動到瀏覽器預設樣式的機制

先說結論：boostrap本身無此神力，要靠JS。但官網有提供此JS，要自行下載引用。

昨天看在bootstrap source code (v5.3 )，分析色彩指定機制。最後在追它到底怎麼把設定好的 light mode style 和 dark mode style 連動到瀏覽器預設 color mode 上。（if site in default mode）又翻了一堆 MDN 文件，讀了很多奇妙的CSS property，以為到底是有什麼原生語法祕術我不知道的。

結果最後發現……boostrap 官網 是用 JS 抓 prefers-color-scheme=dark，再於 html 寫入 data-bs-theme="dark" 來控制CSS和瀏覽器預設值之間的對應關係 =_=

[data-bs-theme="dark"] 就是 bootstrap 選用切換 color mode 的選擇器。

官方推薦的 Color modes starter
https://getbootstrap.com/docs/5.3/examples/#starter-3
該starter的JS，Bootstrap 官網就是使用這份 code
https://github.com/twbs/examples/blob/main/color-modes/js/color-modes.js
BTW

• MDN 應該也是類似如此，用 JS 實作。
  
• google的搜尋頁則是要更新才會載入新的瀏覽器預設值。

CSS 與瀏覽器溝通 color mode 的原生依賴機制應該就是 Media Queries prefers-color-scheme。然而 boostrap5.3 的版本並沒有使用這個機制。但我在 scss code 裡面看到了殘骸，以前應該是有採用這個方式，可能也有兩者並存的過渡期。

• mixin color-mode：bootstrap採用
• mixin color-scheme：沒 include，但有 import，感覺像 color-mode 的前代 mixin
• variable $color-mode-type in _variable.scss 感覺也是過度時期的產物？

prefers-color-scheme 畢竟是 media querier 的型式，在實用上有諸多不便。例如：若要指定瀏覽器預設值等於 dark 的時候和網站內自訂的 dark theme 使用相同樣式，就要為了不同的指定方式，宣告兩份相同的 css 樣式。 而無法像selector，可以利用 list 型式串在一起。例如 bootstrap 就將 color mode 預設值和 light 設為相同 css 樣式：

// bootstrap/scss/_root.scss :root, [data-bs-theme="light"] { // styles... }

若選擇使用 JS 串接瀏覽器預設值與自訂樣式兩者之間的轉折，還能順便達成讓使用者在網站服務中可自由切換 color mode 的 feature。這麼一想，選擇使用 JS 作為橋樑應該就是目前的網頁技術的最佳方案了。