如何在黑暗模式下配置@nuxt/顺风+排版

Question

我正在使用Nuxt.js/内容构建一个博客，我想使用插件色彩模式应用黑暗模式。

如何将黑暗模式应用于文章？

我试着做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

它附带如下：

• 努克斯特 v2，因为v3还没有公开
• @nuxt/内容甚至与实际问题完全无关
• 启用@nuxtjs/尾风，v2.1 + JIT
• 支持暗模式的@nuxtjs/色模式
• 配置为支持@终结者/排版的dark: prose-light
• 基本工作ESlint +更漂亮的配置

这基本上是顺风配置的更新版本，用于@nuxt/内容-主题-文档，而不需要只编写文档文件。(也许有办法做到这一点，但我没有找到)

这个配置受到Adam：https://github.com/tailwindlabs/tailwindcss-typography/issues/69#issuecomment-752946920这篇令人敬畏的文章的启发。

我不知道尾翼-暗模式究竟是用来做什么的，因为它并不是很活跃，而且我尝试过的几个变体已经在使用Tailwind 2，但我发现了这个有趣的问题，如果有一天它可能会有帮助的话：https://github.com/ChanceArthur/tailwindcss-dark-mode/issues/37#issue-681948280。

当前配置(tailwind.config.js)本质上依赖于页面顶部的切换按钮，因为darkMode: 'class'的存在。如果您将其设置为media，您可以在系统中切换它，也可以转到Chrome和ctrl + shift + p，并选择您的任意prefers-color-scheme进行测试。

​

​