如何根据媒体查询创建自定义 Tailwind 颜色？

Question

如何根据用户偏好更改整个 Tailwind 配色方案。这甚至可能还是我必须在每个 class 之前添加“dark:”？

这是我现在的 tailwind.config.js:

module.exports = {
    purge: ["./src/**/*.jsx"],
    theme: {
        themeVariants: [],
        variants: {},
        extend: {
            colors: {
                main: {
                    100: "#ECEFF4",
                    200: "#E5E9F0",
                    300: "#D8DEE9",
                    400: "#4C566A",
                    500: "#434C5E",
                    600: "#3B4252",
                    700: "#2E3440",
                    800: "#292E39",
                    900: "#000510",
                },
            },
        },

    },
};

这大概是我想要的：

extend: {
    colors: {
        if(lightmode)
        {
            main: {
                100: "#ffffff",
                200: "#ffffff",
                300: "#ffffff",
                400: "#ffffff",
                500: "#ffffff",
                600: "#ffffff",
                700: "#ffffff",
                800: "#ffffff",
                900: "#ffffff",
            },
        }
        if(darkmode)
        {
            main: {
                100: "#ECEFF4",
                200: "#E5E9F0",
                300: "#D8DEE9",
                400: "#4C566A",
                500: "#434C5E",
                600: "#3B4252",
                700: "#2E3440",
                800: "#292E39",
                900: "#000510",
            },
        }
    },
},

Answer 1

你为什么这么难？ Tailwind 有一个暗模式 class 实用程序。

当您将深色模式 class 添加到 HTML 属性时，您可以指定不同的颜色。

    <!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

https://tailwindcss.com/docs/dark-mode

当你做这些类型的事情时，试着坚持框架的流程。当它们更新并且您必须重构代码时，这将有助于极大地消除头痛。

如果你这样胡作非为，以后只会害了你。

如何根据媒体查询创建自定义 Tailwind 颜色？

How to create custom Tailwind colors based on media-query?

css

reactjs

tailwind-css