tw colors
1.0.0
Tailwindアプリの究極のゲームチェンジャーを紹介してください！乱雑な暗いバリエーションと乱雑なCSS変数に別れを告げます。このTailwindプラグインを使用すると、色のテーマを切り替えることは、1つのクラス名を変更するのと同じくらい簡単です。
スケーラブルで、必要なだけ多くのテーマと色を追加します。使用できるテーマと色の数に制限はありません
柔軟性があり、CSSプロパティをテーマにできる内蔵バリアントを使用して、色に自分自身を制限しないでください
採用しやすく、マークアップを変更する必要はありません。
ネストされたテーマは、複雑なユースケースでサポートされています
完全なTailwind CSS Intellisenseサポート
ここでは、完全な変更ログをご覧ください
npm i -d tw -colors
既存のTailwind Configを使用して、 createThemesプラグインの色を移動し、名前を付けます（ライト）。
Tailwind.config.js
+ const {createThemes} = require（ 'tw-colors'）;
module.exports = {
コンテンツ：['./src/**/*。{stastro、html、jsx,md,mdx、svelte、、tsx、}']、
テーマ： {
拡張：{ - 色：{ - 'プライマリ'： 'Steelblue'、 - 'Secondary'： 'Darkblue'、 - 'brand'： '＃f3f3f3'、 - // ...他のColors-}}、
}、
プラグイン：[+ CreateThemes（{+ light：{+ 'Primary'： 'Steelblue'、+ 'Secondary'： 'darkblue'、+ 'brand'： '＃f3f3f3'、+ // ...他の色+}+} ）]、
};ヒント：例からのものだけでなく、通常のように、任意のカラー名を使用できます。テーマ名にも同じことが言えます。
class='light'またはdata-theme='light'アプリ内のどこでも（HTMLまたはボディタグはそれに適した場所です）
クラス名をカスタマイズするオプションを参照してください
- <html>+ <html class = 'light'> ...
<div class = 'bg-brand'>
<h1 class = 'text-primary'> ... </h1>
<p class = 'text-secondary'> ... </p>
</div>
...
</html>それだけです、あなたのサイトには軽いテーマがあります！
Tailwind.config.js
const {createThemes} = require（ 'tw-colors'）;
module.exports = {
コンテンツ：['./src/**/*。{stastro、html、jsx,md,mdx、svelte、、tsx、}']、
プラグイン：[
createThes（{
ライト： {
「プライマリ」：「SteelBlue」、
「セカンダリ」：「ダークブルー」、
「ブランド」： '＃f3f3f3'、
}、+ dark：{+ 'primary'： 'turquoise'、+ 'secondary'： 'Tomato'、+ 'brand'： '＃4a4a4a'、+}、+ forest：{+ 'primary'： '＃2a9d8f' 、+ 'secondary'： '＃e9c46a'、+ 'brand'： '＃264653'、+}、+冬：{+ 'プライマリ'： 'hsl（45 39％69％）'、+ 'secondary'： ' 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 font here </div> <！ - このボタンは、テーマが「dark」のときに丸められます - > <button class = 'dark：丸い'>私をクリック</button> </div>
バリアント名をカスタマイズするオプションを参照してください
<html class = 'themad-dark'> ... <div class = 'group'> <div class = 'themar-dark：group-hover：bg-red-500'>グループバリアントは機能しません</div > <div class = 'group-hover：themadark：bg-red-500'>
</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 class = 'forest'>
...
</div>
</html>警告：
このセットアップにより、「親」テーマの主要な色で定義された0.8の不透明度は、「子」テーマの主要な色で継承されます。
createThes（{
親： {
「プライマリ」：「HSL（50％50％ / 0.8）」、//これを行わないでください、デフォルトの不透明度は子のテーマ「セカンダリー」に伝播します：「DarkBlue」、
}、
子供： {
「プライマリ」：「ターコイズ」、「セカンダリ」：「トマト」、
}、}） <html data-theme = 'parent'>
<div data-theme = 'child'> <！ - プライマリカラーは予想外の0.8 Opacity-> <button class = 'bg-primary'> me </button>をクリックします>
... </div> </html>継承されたプロパティ（「フォントファミリー」など）は、ネストされたテーマを含むすべての子孫によって継承されます。伝播を停止するために、ベーススタイルはネストされたテーマに再宣言されるべきです
予期しない動作
<html class = 'テーマダークフォントサンズテーマダーク：font-serif'> ... <div>✅serifはアクティブです</div> <div class = "theme-light"> serifはまだアクティブです。親のテーマから継承されました</div>
</html>corks予想通りに機能します
<html class = 'テーマダークフォントサンズテーマダーク：font-serif'> ... <div>✅セリフはアクティブです</div> <div class = "テーマライトフォントサンズテーマダーク：フォント-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'、
}）、
「森」：暗い（{
「プライマリ」：「ターコイズ」、「ベース」：「トマト」、「表面」： '＃4A4A4A'、
}）、}））TW-COLORSは、フォーマット--twc-[color name]を使用してCSS変数を作成します。デフォルトでは、HSL値を含みます。
たとえば、次の構成では、変数--twc-primary 、 --twc-surface --twc-base ）が作成されます。
Tailwind.config.js
module.exports = {// ... tailwind configプラグイン：[createThemes（{winte '：{{
'Primary'： 'Steelblue'、 'base'： 'darkblue'、 'surface'： '＃f3f3f3'、}、 'Forest'：{{
「プライマリ」：「ターコイズ」、「ベース」：「トマト」、「表面」： '＃4A4A4A'、}、}）、
};使用例：
.my-class {color：hsl（var（ - twc-primary））; 背景：HSL（var（--TWC-primary） / 0.5）;
}CSS変数をカスタマイズするオプションを参照してください
オプションは、プラグインの2番目の引数として渡すことができます
createThes（{
//ここであなたの色が構成されています...}、{
producecssvariable：（colorname）=> `-twc-$ {colorname}`、
produceEthemeclass ：（ themename）=> `theme-$ {themename}`
ProduceEmevariant ：（ themename）=> `theme-$ {themename}`
defaulttheme：「ライト」
厳格：false}）使用するデフォルトのテーマは、テーマが宣言されていない場合にフォールバックテーマと考えてください。
例：単純なデフォルトテーマ
createThes（{
'冬'： {
「プライマリ」：「SteelBlue」、
}、
「ハロウィーン」：{
「プライマリ」：「クリムゾン」、
}、}、{
DefaultTheme：「冬」//「冬」| 「ハロウィーン」}）デフォルトのテーマは、ユーザーのライトまたは暗い好みに応じて選択することもできます（MDNを参照してください。
例：ユーザーの好みに適応します
createThes（{
'冬'： {
「プライマリ」：「SteelBlue」、
}、
「ハロウィーン」：{
「プライマリ」：「クリムゾン」、
}、}、{
defaulttheme：{ / ** * `@media（color-scheme：light）`が一致する場合 *デフォルトのテーマは「冬」テーマ * / light： 'winter'、
/ ** * `@media（color-scheme：dark）`が一致する場合 *デフォルトのテーマは「ハロウィーン」テーマ */ dark： 'halloween'、
}}）デフォルト： false
false無効な色が無視されている場合。
true無効な色がエラーを生成する場合。
例
createThes（{
'クリスマス'： {
//無効な色「プライマリ」：「Redish」、
}、
「ダークラ」：{
「プライマリ」：「クリムゾン」、
}、}、{
//エラーがスローされます
厳格：true}）デフォルト：（ (colorName) => `--twc-${colorName}`
プラグインによって生成されたCSS変数をカスタマイズします。
以下の構成を使用すると、次の変数が作成されます。
--a-primary-z （ twc-primaryの代わりに）
--a-secondary-z （ TWC長官の代わりに）
--a-base-z （ twc-baseの代わりに）
createThes（{
'ライト'： {
'Primary'： 'Steelblue'、 'Secondary'： 'darkblue'、 'base'： '＃f3f3f3'、
}、
'暗い'： {
「プライマリ」：「ターコイズ」、「セカンダリ」：「トマト」、「ベース」： '＃4A4A4A'、
}、}、{
producecssvariable：（colorname）=> `-a-$ {colorname} -z`}）デフォルト：（ (themeName) => themeName
テーマとバリエーションのクラス名をカスタマイズします
以下の構成を使用すると、次のテーマのクラス名とバリアントが作成されます。
theme-light （光の代わりに）
theme-dark （暗くする代わりに）
createThes（{
'ライト'： {
'Primary'： 'Steelblue'、 'Secondary'： 'darkblue'、 'base'： '＃f3f3f3'、
}、
'暗い'： {
「プライマリ」：「ターコイズ」、「セカンダリ」：「トマト」、「ベース」： '＃4A4A4A'、
}、}、{
produceEthemeclass ：（ themename）=> `テーマ-$ {themename}`}）<html class = 'themad-dark'> ... <ボタンclass = 'テーマダーク：丸い'>私をクリック</button> ... </html>
デフォルト： produceThemeClassと同じ
バリアントをカスタマイズします
以下の構成を使用すると、次のバリアントが作成されます。
theme-light （光の代わりに）
theme-dark （暗くする代わりに）
createThes（{
'ライト'： {
'Primary'： 'Steelblue'、 'Secondary'： 'darkblue'、 'base'： '＃f3f3f3'、
}、
'暗い'： {
「プライマリ」：「ターコイズ」、「セカンダリ」：「トマト」、「ベース」： '＃4A4A4A'、
}、}、{
ProduceMevariant ：（ themename）=> `テーマ-$ {themename}`}）<html data-theme = 'dark'> ... <ボタンclass = 'テーマダーク：丸い'>私をクリック</button> ... </html>
アップフェッチ：賢明なデフォルトでフェッチAPI用の小さな1kb構成ツール
共有してください
