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配置工具
請分享
