Bootstrap 5.3 主要更新：深色模式 Dark mode，自訂 color mode，翻新調色盤色票，新的連結樣式

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

https://blog.getbootstrap.com/2023/05/30/bootstrap-5-3-0/
前幾個星期 (2023/5/30) Bootstrap 5.3 發布了。每次看到 Bootstrap 新版本的發布，都會有感於時間過的真的很快。以下是我關於 Bootstrap 的文章，大致的時間線：

2022年7月：Bootstrap 5.2 主要更新
2021年8月：Bootstrap 5.1 主要更新
2020年12月：Bootstrap 5 主要更新
2018年4月：Bootstrap 4 Flex (那時 Bootstrap 4.1 發布)
2017年8月：Bootstrap 4 主要更新

撰文的現在是2023年6月。可以看到每一個 minor version 的更新，就是半年～1年；major version 的更新，是好幾年一版。所以每次寫 Bootstrap，就代表好多歲月又過去了，時間真的過得太快。

以下是 Bootstrap 5.3 的主要更新：

深色模式 Dark mode，自訂新的 color mode

Bootstrap 核心已經重新設計，以支援 Dark mode。並新增了關於 Color Mode 的文件 (5.2 沒有)
https://getbootstrap.com/docs/5.3/customize/color-modes/

Bootstrap 5.3 不但支援 Dark mode，也允許開發者設計自己的 color mode。語法上，在一開始的 html tag 下 data-bs-theme，例如

<html lang="en" data-bs-theme="dark">
  <!-- ... -->
</html>

你也可以在特定的元件下 color mode，例如 dropdown menu

<div class="dropdown" data-bs-theme="dark">
  <!-- ... -->
</div>

這樣無論上方 html tag 的 color mode，你的 dropdown menu 就會切換成 Dark mode。

當然，如果你想要本來「亮底」的樣式，設定 data-bs-theme="light"，或是將來你自己客製的樣式。

Light / Dark mode 都定義在 scss/_root.scss，包含如果你將來要新增自己的 color mode，也是定義在這支檔案。

目前 scss/_root.scss 定義的是 CSS 變數，你也可以在其中指定特定元件的樣式。例如

@include color-mode(dark) {
  ...
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
  ...
}

另外，如果你重設這個 SCSS 變數

$color-mode-type: media-query; // default 是 "data"

上面那段 SCSS 會編譯成

@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
  }
}

這樣就不是 data-bs-theme 設定 scope 的概念，而是 media query prefers-color-scheme，隨使用者作業系統調整亮/暗模式。

有一些 Dark mode 的 CSS 變數是定義在 scss/_variables-dark.scss。當然，你可以修改再重新編譯。如果你要新增 color mode，官方文件也建議新增新的 scss 檔案，例如 scss/_variables-blue.scss。

scss/_variables-dark.scss 中大量的使用 Bootstrap 內建的 SCSS function shade-color()、tint-color()，也就是拿原始的調色盤色票去做深淺變化。如果你要整個換色系的話，修改原始色票再重新編譯，scss/_variables-dark.scss 這支檔案就會自動幫你做深淺變化了。

翻新調色盤色票 Color Palette

文件也做大幅更新，第一節 Colors 是 5.3 新增的。
https://getbootstrap.com/docs/5.3/customize/color/

新增 secondary、tertiary 兩個色票。舉例來說，Bootstrap 5.3 Light mode 中這幾個變數 (數值是 Bootstrap 5.3 定義的，之後版本不一定會改)

--bs-body-color-rgb: 33,37,41;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-tertiary-color: rgba(33, 37, 41, 0.5);

因為是 Light mode，背景是白的，隨著 alpha 值越透明，tertiary 文字顏色最淡。

Bootstrap 5.3 Dark mode 中這幾個變數的數值

--bs-body-color-rgb: 173,181,189;
--bs-secondary-color: rgba(173, 181, 189, 0.75);
--bs-tertiary-color: rgba(173, 181, 189, 0.5);

因為是 Dark mode，背景是黑的，隨著 alpha 值越透明，也就是 tertiary 文字顏色最深。

進一步說明，以目前 (2023年6月) Bootstrap 官網文件來說，如果是 Dark mode，一般文字顏色就是 --bs-body-color，secondary / tertiary 多了兩個不同灰階 (顏色更深) 的選擇。

.bg-body-secondary、.bg-body-tertiary 就不是深淺灰階的概念，是由 Bootstrap 直接定義值，用來搭配 --bs-secondary-color、--bs-tertiary-color 的顏色。

另外還新增 {color}-bg-subtle、{color}-border-subtle、{color}-text-emphasis 這幾個顏色。

subtle 這邊指的是暗的、淡的。比如說 .bg-success 是軟體操作成功的綠色，.bg-success-subtle 在 Light mode 就是淡綠色，在 Dark mode 就是墨綠色。

https://getbootstrap.com/docs/5.3/customize/color/
文件也列出 Bootstrap 所有可用的色票，包含紅橙黃綠藍靛紫，以及各自的灰階，如果要很快的找一個色票使用，可以參考這裡。

新的 Link 連結樣式

新的 Link 文件 (Bootstrap 5.2 沒有)，包含透明度 opacity，底線 underline 等樣式。
https://getbootstrap.com/docs/5.3/utilities/link/

新的 Icon Link 文件 (Bootstrap 5.2 沒有)
https://getbootstrap.com/docs/5.3/helpers/icon-link/

可以輕易的在連結的前或後，加上小圖。如果再加上 css .icon-link-hover，滑鼠 hover 時小圖會有小動畫。

<a class="icon-link icon-link-hover" href="#">
  Icon link
  <svg>...</svg>
</a>

新的 css .focus-ring，讓元件在 :focus 狀態下，不要顯示預設的 outline，而是變成 box-shadow，這樣可以更好的讓開發者客製化。

.focus-ring 也是 Bootstrap 5.3 的新文件
https://getbootstrap.com/docs/5.3/helpers/focus-ring/

結論

這次 Bootstrap 5.3 更新主要是在深色模式 Dark mode，還有各種色系、色票的更新，並沒有大的架構或排版上的更新。

Dark mode 的確是近幾年的 CSS 主題：Windows / Mac / Android / iPhone / iPad 作業系統都支援 Dark mode，當然細緻一點的 web app，應該也要支援 Dark mode。

調色盤色票的更新，則是讓我們再 review 一次，未來可不可用 Bootstrap 內建的色票架構。

商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

深色模式 Dark mode，自訂新的 color mode

翻新調色盤色票 Color Palette

新的 Link 連結樣式

結論

延伸閱讀