如何使用暗模式配置 @nuxt/tailwind + 排版

Question

我正在使用nuxt.js/content 构建博客，我想使用插件color mode 应用暗模式。

如何将深色模式应用于文章？

我试过dark: prose-dark，没用。

<script>
export default {
  async asyncData({ $content, params }) {
    const post = await $content('posts', params.slug).fetch()
    return { post }
  }
}
</script>


<template>
  <div class="wrapper p-5 mt-20">
    <div class="max-w-screen-lg mx-auto px-3 py-5">
      <h1 class="text-6xl text-gray-800 font-medium"> {{ post.title }}</h1>
      <div class="img max-w-full mx-auto m-5">
        <img :src="require(`~/assets/${post.cover}`)" :alt="post.title" class="rounded-xl shadow-lg">
      </div>
    </div>
    <nuxt-content class="prose prose-lg max-w-screen-lg mx-auto px-3 my-5" :document="post" />
  </div>
</template>

Answer 1

这是样板：https://github.com/kissu/nuxt-tailwind-typography-darkmode-boilerplate

它附带：

• Nuxt v2 因为 v3 尚未公开
• @nuxt/content 即使它与实际问题完全无关
• @nuxtjs/tailwindcss，v2.1 + JIT 已启用
• @nuxtjs/color-mode 支持暗模式
• @tailwindcss/typography 配置为支持dark: prose-light
• 基本工作 ESlint + Prettier 配置

这基本上是@nuxt/content-theme-docs 的the tailwind configuration 的更新版本，而不是只写文档文件。 （可能有一种开箱即用的方法，但我没有找到）

此配置深受 Adam 这篇精彩帖子的启发：https://github.com/tailwindlabs/tailwindcss-typography/issues/69#issuecomment-752946920

我不确定tailwindcss-dark-mode 的真正用途是什么，因为它并不是真正处于活动状态，而且我尝试过的少数变体已经在 Tailwind 2 中开箱即用。但我发现了这个有趣的问题如果有一天它可能会有所帮助：https://github.com/ChanceArthur/tailwindcss-dark-mode/issues/37#issue-681948280

由于darkMode: 'class'，当前配置 (tailwind.config.js) 基本上依赖于页面顶部的切换按钮。如果您将其设置为 media，您可以在系统中切换它，或者转到 Chrome 的开发工具和 ctrl + shift + p，然后选择您的任何 prefers-color-scheme 进行测试。