zqy233的前端学习笔记 | zqy233的前端学习笔记

Dark Mode

使用Tailwind CSS在您的网站上使用暗黑模式进行样式设置。

基本用法现在，随着许多操作系统将暗黑模式作为一流功能，设计一个与默认设计相配套的暗黑版本的网站越来越常见。

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

html

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <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>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <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>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

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

prefers-color-scheme

prefers-color-scheme是一种CSS媒体特性，用于检测用户操作系统或浏览器是否设置为暗黑模式。它允许开发者根据用户的系统设置自动应用相应的主题样式，从而实现暗黑模式和亮色模式之间的切换。通过使用该媒体特性，开发者可以在CSS中编写针对不同主题模式的样式规则，从而提供更好的用户体验。

手动切换暗黑模式

如果您想支持手动切换暗黑模式，而不是依赖于操作系统的偏好设置，请使用class策略而不是media策略：

tailwind.config.js

module.exports = {
  darkMode: 'class',
  // ...
}

module.exports = {
  darkMode: 'class',
  // ...
}

现在，dark:{class}类不再基于prefers-color-scheme应用，而是在HTML树中先出现dark类时就会应用这些类。

html

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

Dark Mode #

prefers-color-scheme #

手动切换暗黑模式 #

Dark Mode

prefers-color-scheme

手动切换暗黑模式