商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~
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 內建的色票架構。
延伸閱讀
商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。
從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。
FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~