css 如何使用Tailwind自定义暗模式颜色

6yjfywim 于 2023-03-14 发布在其他

关注(0)|答案(3)|浏览(404)

我试图为我的项目设置顺风（这是我第一次使用它），但不能弄清楚我应该如何定义颜色的黑暗和光明的主题;有没有一种方法可以做这样事情：

@tailwind base;
@tailwind components;
@tailwind utilities;
@dark
{
   --red: #FFC8C8;
}
@light
{
   --red: #F00000;
}

module.exports = {
   darkMode: 'class',
   theme: {
      extend: {
         'red': 'var(--red)',
      }
   }
};

这是我所要做的事情的一个假设的表示。不幸的是，我找到的关于Tailwind的教程中没有一个解释如何做类似的事情。有没有一种方法可以用Tailwind定制一个暗模式调色板？谢谢。

css

来源：https://stackoverflow.com/questions/66106101/how-to-have-custom-darkmode-colors-with-tailwind

3条答案

按热度按时间

js4nwp541#

最简单的方法是在css文件中给予出自定义类名，并给它light和dark属性。

顺风配置js

const colors = require("tailwindcss/colors");

module.exports = {
  mode: "jit",
  darkMode: "media",
  content: ["./src/**/*.{js,jsx}", "./public/index.html"],
  theme: {
    extend: {
      colors: {
        red: {
          dark: "#FFC8C8",
          light: "#F00000",
        },
    },
  },
  plugins: [],
};

索引.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .redcolor {
      @apply text-red-light dark:text-red-dark;
}

以此方式申请。

<div className=" p-4 redcolor">Hello</div>

照明模式：

暗模式：

赞(0）回复(0）举报 2023-03-14

ttvkxqim2#

下面是一个方法：

// tailwind.config.js

// only if you want to use (!)RGB values
function withOpacityValue(variable) {
  return ({ opacityValue }) => {
    if (opacityValue === undefined) {
      return `rgb(var(${variable}))`
    }
    return `rgb(var(${variable}) / ${opacityValue})`
  }
}

module.exports = {
  ...
  colors: {
    gray: {
      50: withOpacityValue('--gray-50'),
      ...
    }
  }
}

在你的tailwind.css中

@tailwind base;
@tailwind components;
@tailwind utilities; 

:root {
  --gray-50: 192 178 131;
}

.dark {
  --gray-50: 220 208 192;
}

请注意.dark类是你的主题的名字。:root将是你的默认主题。所以，除了.dark你可以定义其他主题。
我注意到的一个缺点（在我看来）是主题不会自动切换;用户将需要刷新页面。
参考：Tailwind -> Colors

赞(0）回复(0）举报 2023-03-14

euoag5mw3#

您唯一需要做的就是在tailwind.config文件中设置颜色

module.exports = {
   darkMode: 'class',
   theme: {
      extend: {
         'red': '#FFC8C8',
      }
   }
};

现在你可以这样使用它=〉dark：bg-red，dark：text-red...

赞(0）回复(0）举报 2023-03-14

我来回答

css 如何使用Tailwind自定义暗模式颜色

3条答案

相关问题

热门标签

最新问答