https://benzhub.github.io/tags/%E6%9A%97%E8%89%B2%E6%A8%A1%E5%BC%8F/Recent content in 暗色模式 on BenzHubHugozh-TWWed, 26 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/026-dark-mode/Wed, 26 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/026-dark-mode/<blockquote> <p>前面幾篇我們把介面練得會隨螢幕伸縮、會回應使用者的每個動作,但畫面始終停在明亮的淺色底上。現代網站幾乎都得提供<strong>暗色模式(Dark Mode)</strong>,讓使用者在夜間或偏好深色時獲得舒適的閱讀體驗。這一篇 <strong>TailwindCSS</strong> 的暗色模式,要用 <code>dark:</code> 變體搭配三種策略(跟隨系統的 <code>media</code>、手動切換的 <code>class</code>、屬性驅動的 <code>data-*</code>),再帶你用 <strong>v4</strong> 的 <code>@custom-variant</code> 打造一鍵切換、能記住偏好、又不會閃爍的明暗系統,讓你的介面在白天與黑夜都同樣好看。</p> </blockquote>