暗黑模式

使用 Tailwind CSS 为您的网站设置暗黑模式。

现在，暗黑模式已经成为许多操作系统的首要功能，因此设计一个与默认设计相配合的网站暗黑版本变得越来越普遍。

为了让这个过程尽可能简单，Tailwind 包括了一个暗黑变体，让您在启用暗黑模式时可以以不同的方式样式化您的网站：

暗黑模式 - 夜间模式 - 图1

  1. <div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  2.   <div>
  3.     <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
  4.       <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
  5.     </span>
  6.   </div>
  7.   <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  8.   <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
  9.     The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  10.   </p>
  11. </div>

默认情况下，这使用 prefers-color-scheme CSS 媒体特性，但您也可以使用 “class”策略 构建支持手动切换暗黑模式的网站。

手动切换暗黑模式