5

我正在尝试使用顺风基于系统默认启用暗模式。

为此，我使用了插件：Tailwind dark mode。

我的顺风配置失败如下：

defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
    experimental: {
        darkModeVariant: true
    },
    purge: [],
  theme: {
      extend: {
          fontFamily: {
              sans: ['Nunito', ...defaultTheme.fontFamily.sans],
          },
          screens: {
              'dark': {'raw': '(prefers-color-scheme: dark)'},
              // => @media (prefers-color-scheme: dark) { ... }
          },
      },
  },
  variants: {
      backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
      borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
      textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'],
      opacity: ['responsive', 'hover', 'focus', 'disabled']
  },
  plugins: [require('tailwindcss-dark-mode')()],
}


defaultTheme = require('tailwindcss/defaultTheme');

在我的 html 文件中，我添加了以下内容：

<span class="dark:text-yellow-400">
    1
</span>

该插件会检查我的暗模式，但文本不会变黄，而是保持黑色。

有谁知道为什么它不起作用？

4

2 回答 2

6

First things first, now TailWIndCSS supports dark-mode out-of-the-box by adding the dark: prefix before any class after it is enabled. Not sure if it is related to the question, but thought you need to know.

The plugin you are using states the following use for enabling dark mode:

< tailwind.config.js >

...
plugins: [
  require('tailwindcss-dark-mode')()
]
// To enable dark mode for all classes:
variants: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', ...]

// To enable dark mode for only single utility class:
variants: {
  backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd']
}
...

It also states that

Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.

So, to enable dark mode through the plugin, use:

< mypage.html >

...
<body class="mode-dark">
  <div class="bg-white dark:bg-black">
    <p class="text-black dark:text-white">
      My eyes are grateful.

      <a class="text-blue-300 hover:text-blue-400">
        Learn more
      </a>
    </p>
  </div>
...
</body>

Add that extra mode-dark class to the wrapper element (body in this case).

To change the theme based on user preferences through the plugin:

< mypage.html >

<head>
  <script src="to/prefers-dark.js"></script>
</head>

...
<body class="mode-dark">
  <div class="bg-white dark:bg-black">
    <p class="text-black dark:text-white">
      My eyes are grateful.

      <a class="text-blue-300 hover:text-blue-400">
        Learn more
      </a>
    </p>
  </div>
...
</body>

With the above, the theme will change as the user changes his/her preferences in the system settings.

P.S. If you wanna use dark mode, use the one in-built in TailWindCSS v2. Enable it like this:

< tailwind.config.js >

module.exports = {
  darkMode: 'media',
  ...
}

media can be changed to class.

Media: Now whenever dark mode is enabled on the user's operating system, dark:{class} classes will take precedence over unprefixed classes. The media strategy uses the prefers-color-scheme media feature under the hood.

Class: If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy.

Hope this helped you :)

于 2021-01-03T04:26:03.920 回答
0

由于忘记更新，我遇到了这个问题tailwind.config.js：

我变了：

darkMode: false,

至

darkMode: 'class',

我在 Vue 中有一个简单的观察者，可以通过以下方式切换它：

document.querySelector('html').classList.add('dark')

document.querySelector('html').classList.remove('dark')

您可以在此处阅读更多信息： https ://tailwindcss.com/docs/dark-mode

于 2021-01-18T21:10:34.480 回答