tw colors
1.0.0
为您的后风应用程序介绍最终的游戏规则改变！告别杂乱的黑暗变体和混乱的CSS变量。使用此尾风插件，在颜色主题之间切换与更改一个类名称一样轻松。
可扩展，添加尽可能多的主题和颜色。您可以使用的主题和颜色的数量没有限制
灵活的，不要将自己限制在颜色上，而内置的变体可以主题任何CSS属性
易于采用，无需更改您的标记，它只是有效的！
嵌套主题受到复杂用例的支持
全尾风CSS Intellisense支持
在此处查看完整的更改程序
npm i -d twolors
采用现有的尾风配置，然后在createThemes插件中移动颜色，并为其提供一个名称（例如Light）。
tailwind.config.js
+ const {createThemes} = require（'twolors'）;
Module.exports = {
内容：['./src/xper/gh. {astro，html，
主题： {
扩展：{ - 颜色：{ - 'primary'：'steelblue'， - 'sendary'：'darkblue'， - 'brand'：'＃f3f3f3'， - // ...其他颜色 - }}，
}，，
插件：[+ createThemes（{+ light：{+'primary'：'steelblue'，+'secondary'：'darkblue'，+'brand'：'＃f3f3f3'，+ //其他颜色+}+} ），，，
};提示：您可以像往常一样使用任何颜色名称，而不仅仅是示例中的颜色名称。主题名称也是如此。
应用class='light'或data-theme='light'应用程序中的任何地方（html或车身标签是它的好地方）
查看自定义className的选项
- <html>+ <html class ='light'> ...
<div class ='bg-brand'>
<H1 class ='text-primary'> ... </h1>
<p class ='text-secdary'> ... </p>
</div>
...
</html>就是这样，您的网站有一个轻型主题！
tailwind.config.js
const {createThemes} = require（'twolors'）;
Module.exports = {
内容：['./src/xper/gh. {astro，html，
插件：[
创建Ethemes（{
光： {
“主要”：'steelblue'，
“次要”：'Darkblue'，
“品牌”：'＃f3f3f3'，
}，+ dark：{+'primary'：'绿松石'，+'secondary'：'tomato'，+'brand'：'＃4a4a4a'，+}，+ forest：{+'priendar'：'＃2a9d8f' ，+'secondary'：'＃e9c46a'，+'brand'：'＃264653'，+}，+冬季：{+'primary'：'hsl（45 39％69％）'，+ sendary'：'：' RGB（120 210 50）'，+'Brand'：'HSL（54 93％96％）'，+}，}，}），}）
]，，
};您现在有一个灯光，黑暗和一个森林主题！
只需切换类或数据主题属性
- <html class ='light'>+ <html class ='dark'> ... </html>
基于当前主题，可以使用变体应用特定样式。
注意： data-theme='light'下面的示例中
<！ - 仅对黑暗主题使用“ serif”字体 - > <div data-theme ='dark'class ='font-sans dark：font-serif'> ... <div> serif字体在这里</div> <！ - 当主题为`dark' - > <button class ='黑暗：圆形'>单击我</button> </div>
查看自定义变体名称的选项
<html class ='theme-dark'> ... <div class ='group'> <div class ='主题 - dark：group-hover：bg-red-500'>组变体不起作用</div > <div class ='组悬停：主题销：BG-RED-500'>✅组变体工作正常</div> </div>
</html>只是嵌套主题...
<html data-theme ='dark'>
...
<div data-theme ='Winter'>
...
</div>
<div data-theme ='Forest'>
...
</div>
</html>为了使变体在嵌套主题中正常工作，必须与嵌套主题class一起添加一个空的data-theme属性
<html class ='dark'>
...
<div data-theme class ='Winter'>
...
</div>
<DIV DATA-THEME类='Forest'>
...
</div>
</html>警告：
通过此设置，“父”主题的主要颜色上定义的0.8不透明度将由“ Child”主题的主要颜色继承。
创建Ethemes（{
父母：{
'primary'：'hsl（50 50％50％ / 0.8）'，//不要这样做，默认不透明度会传播到子女主题“次要”：“ darkblue”，
}，，
孩子： {
“主要”：“绿松石”，“次要”：“番茄”，
}，}）） <html data-theme ='parent'>
<div data-theme ='child'> <！ - 主颜色具有意外的0.8不透明度 - > <button class ='bg-primary'>单击me </button>
... </div> </html>所有后代（包括嵌套主题）均继承了继承的属性（例如“ Font-家庭”）。为了停止繁殖，应重新确定基本样式在嵌套主题上
意外行为
<html class ='theme-dark font-sans主题销：font-serif'> ... <div> serif serif active </div> <div class =“ theme-light”> serif仍然有效，从父主题继承</div>
</html>✅按预期工作
<html class ='主题 - 羽毛字体 - sans theme-dark：font-serif'> ... <div> serif serif active </div> <div class ='theme-light font font-sans them-them-them-them-them-them-them-dark：font -serif“>✅SANS活跃</div>
</html>createThemes还接受一个揭示light和dark功能的函数。
要应用color-scheme CSS属性，只需用light或dark包裹主题。”
有关此功能的更多详细信息，请参见MDN文档。
tailwind.config.js
createThemes（（（{light，dark}）=>（{{
“冬天”：光（{
'primary'：'steelblue'，'base'：“ darkblue'，'surface'：'＃f3f3f3'，
}），
'森林'：黑暗（{
'primary'：“绿松石”，“基础”：'番茄'，'surface'：'＃4a4a4a'，
}），}）））Twolors使用格式--twc-[color name]创建CSS变量，它们默认情况下，它们包含HSL值。
例如，使用以下配置，将创建变量--twc-primary ， --twc-base ， --twc-surface 。
tailwind.config.js
Module.exports = {// ...您的尾灯配置插件：[createThemes（{'Winter'：{
'primary'：'steelblue'，'base'：'darkblue'，'surface'：'＃f3f3f3'，}，'forest'：{
'primary'：“绿松石”，“基础”：'番茄'，'surface'：'＃4a4a4a'，}，}），]，]
};示例用法：
.my-class {color：hsl（var（-twc-primary））; 背景：HSL（var（-twc-primary） / 0.5）;
}查看自定义CSS变量的选项
选项可以作为第二个参数传递给插件
创建Ethemes（{
//您的颜色在这里config ...}，{
producecssvariable ：（ colorname）=>`-twc-$ {colorRAme}`，
productheMeclass ：（ themename）=>`主题-U {themEname}`
productEtheMevariant ：（ themEname）=>`主题 - $ {themEname}`
DefaultTheme：“ Light”
严格：false}）默认主题要使用的主题，将其视为一个后备主题。
示例：简单默认主题
创建Ethemes（{
'冬天'： {
“主要”：'steelblue'，
}，，
'万圣节'： {
“主要”：“深红色”，
}，}，{
defaultTheme：“冬季” //“冬季” | '万圣节'}）默认主题也可以根据用户的灯光或深色偏好选择（请参阅MDN更喜欢彩色颜色）
示例：适应用户偏好
创建Ethemes（{
'冬天'： {
“主要”：'steelblue'，
}，，
'万圣节'： {
“主要”：“深红色”，
}，}，{
defaultTheme：{ / ** * n@media（prefers-color-scheme：light）`是匹配的， *默认主题是“冬季”主题 * / light：'冬季'，'
/ ** *当@media（prefers-color-scheme：dark）`是匹配的， *默认主题是“万圣节”主题 */ dark：'alloween'，'alloween'
}}））默认值： false
如果忽略了false无效的颜色。
如果true无效颜色会产生错误。
例子
创建Ethemes（{
'圣诞节'： {
//无效的颜色'primary'：“ redish'，
}，，
'darkula'：{
“主要”：“深红色”，
}，}，{
//错误将被抛出
严格：true}）默认值：（ (colorName) => `--twc-${colorName}`
自定义插件生成的CSS变量。
使用以下配置，将创建以下变量：
--a-primary-z （而不是TWC-primary ）
--a-secondary-z （而不是twc secardary ）
--a-base-z （而不是TWC基本）
创建Ethemes（{
'光'： {
'primary'：'steelblue'，'secondary'：'darkblue'，'base'：'＃f3f3f3'，
}，，
'黑暗的'： {
“主要”：“绿松石”，“次要”：“番茄”，“基础”：'＃4A4A4A'，
}，}，{
produceecssvariable ：（ colorname）=>`-a- $ {colorRame} -z`}）默认值：（ (themeName) => themeName
自定义主题和变体的类名称
使用以下配置，将创建以下主题类名称和变体：
theme-light （而不是光）
theme-dark （而不是黑暗）
创建Ethemes（{
'光'： {
'primary'：'steelblue'，'secondary'：'darkblue'，'base'：'＃f3f3f3'，
}，，
'黑暗的'： {
“主要”：“绿松石”，“次要”：“番茄”，“基础”：'＃4A4A4A'，
}，}，{
producthemeclass ：（ themename）=>`主题-U {themEname}`}）<html class ='theme-dark'> ... <button class ='主题 - 黑暗：圆形'>单击我</button> ... </html>
默认：与produceThemeClass相同
自定义变体
使用以下配置，将创建以下变体：
theme-light （而不是光）
theme-dark （而不是黑暗）
创建Ethemes（{
'光'： {
'primary'：'steelblue'，'secondary'：'darkblue'，'base'：'＃f3f3f3'，
}，，
'黑暗的'： {
“主要”：“绿松石”，“次要”：“番茄”，“基础”：'＃4A4A4A'，
}，}，{
productEtheMevariant ：（ themEname）=>`主题 - $ {themEname}`}）<html data-theme ='dark'> ... <button class ='主题 - 黑暗：圆形'>单击我</button> ... </html>
UpFetch：带有明智的默认值的Fetch API的Tiny 1KB配置工具
请分享
