看看顺风CSS，你似乎需要在你的类中指定特定的颜色，像这样:
<div class="bg-yellow-200 dark:bg-gray-800"></div>
但是如果我想在我的web应用中提供10个不同的主题供用户选择呢?比如我可能会有halloween,summer,winter,party等主题
我知道对于普通的CSS，这是很容易做到的，像这样:
[data-theme="halloween"] {
--color-bg: #000;
--color-body: #757981;
}
<body data-theme="halloween"></div>
然后使用Javascript我可以改变data-theme属性和主题将改变。
但是我怎么用顺风CSS做到这一点呢?我在文档中找不到关于这个的任何内容。
我确实找到了一个使用CSS变量的解决方案。
在你的CSS文件中，你可以为每个主题定义你的样式，像这样
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html[data-theme='default'] {
--color-esther: 34, 39, 46;
--color-maximus: 45, 51, 59;
--color-linx: 55, 62, 71;
}
html[data-theme='neon'] {
--color-esther: 20, 61, 42;
--color-maximus: 13, 82, 66;
--color-linx: 20, 82, 11;
}
}
在tailwind.config.js文件中可以这样定义
顺风版^3.1
module.exports = {
theme: {
colors: {
esther: 'rgb(var(--color-esther) / <alpha-value>)',
maximus: 'rgb(var(--color-maximus) / <alpha-value>)',
linx: 'rgb(var(--color-linx) / <alpha-value>)',
},
},
}
顺风小于3.1
function withOpacity(cssVariable) {
return ({ opacityValue }) => {
return opacityValue ? `rgba(var(${cssVariable}), ${opacityValue})` : `rgb(var(${cssVariable}))`
}
}
module.exports = {
theme: {
colors: {
esther: withOpacity('--color-esther'),
maximus: withOpacity('--color-maximus'),
linx: withOpacity('--color-linx'),
},
},
}
在你的HTML中，你可以这样使用这些类:
<html lang="en" data-theme="default">
<body class="bg-esther text-optimus cursor-default"></body>
</html>
有几个插件支持定义多个顺风主题，并在它们之间切换。我特别喜欢泰国css-theme插件，因为它允许你:
- 通过简单地在任何组件(通常是顶层组件)上添加带有主题名称的css类来切换主题
- 使用CSS类，就像你通常做的(例如
text-primary)。这保持了代码的干净和独立于插件(与其他插件相反，有时每个CSS类都需要一个特定的前缀) - 使用变量进一步微调样式，例如
my-theme:font-bold
two -colors就是这样。
tailwind.config.js
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
halloween: {
'primary': 'orange',
'secondary': 'yellow',
},
summer: {
'primary': 'pink',
'secondary': 'red',
},
winter: {
'primary': 'blue',
'secondary': 'green',
},
party: {
'primary': 'steelblue',
'secondary': 'darkblue',
},
})
],
};
使用class:
<html class='theme-halloween'>
...
</html>
或数据属性:
<html data-theme='halloween'>
...
</html>
然后像平常一样使用顺风类。类为bg-primary的按钮将根据最接近的主题改变颜色。
主题可以动态切换与一些切换按钮或任何你喜欢的
刚刚遇到这个问题，因为我正在做同样的事情，我已经做了几年，但不记得了。万一有人再来这里，也许这个答案会有帮助。
在我们的情况下，我们正在建立一个主题，适用于3个不同的网站，但明显改变颜色和字体，这似乎是相同的情况下的问题作者。
对此，可以使用顺风预设。我有一个tailwind.preset.js，基本上是默认的顺风配置，所有的基本颜色，间距等。对于每个主题，设置一个单独的tailwind.<theme-name>.js，其中包含更改并基于预设。
示例tailwind.theme-one.js:
module.exports = {
presets: [
require('./tailwind.preset.js')
],
theme: {
colors: {
# color changes go here
}
}
}
我们设置了一个gulp工作流，基本上只是为每个主题配置渲染一次主scss文件。在集成中，所需的主题文件正在加载。