0

我正在使用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>
4

1 回答 1

1

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

它附带:

这基本上是@nuxt/content-theme-docs的顺风配置的更新版本,而不会只写文档文件。(可能有一种开箱即用的方法,但我没有找到)

此配置深受 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

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

在此处输入图像描述

于 2021-05-16T23:19:46.740 回答