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

Question

我正在使用 nuxt.js/content, I want to apply dark mode using the plugin 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 还不是 public
@nuxt/content甚至与实际问题完全无关
@nuxtjs/tailwindcss、v2.1 + 启用 JIT
@nuxtjs/color-mode 支持深色模式
@tailwindcss/typography配置支持dark: prose-light
基本工作 ESlint + Prettier 配置

这基本上是 the tailwind configuration for the @nuxt/content-theme-docs 的更新版本，不再局限于只编写文档文件。（也许有一种开箱即用的方法，但我没有找到）

此配置的灵感来自 Adam 的这个很棒的 post：https://github.com/tailwindlabs/tailwindcss-typography/issues/69#issuecomment-752946920

我不确定 tailwindcss-dark-mode is really used for since it is not really active and that the few variants that I've tried are already working out of the box with Tailwind 2. But I found this interesting issue in case it may be helpful one day: https://github.com/ChanceArthur/tailwindcss-dark-mode/issues/37#issue-681948280

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

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

How to configure @nuxt/tailwind + typography with dark mode

nuxt.js

nuxt-content