الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

Two

تقديم مغير اللعبة النهائي لتطبيق Tailwind الخاص بك! قل وداعا للمتغيرات المظلمة والمتغيرات الفوضوية CSS. مع هذا البرنامج المساعد Tailwind ، فإن التبديل بين سمات الألوان أمر سهل مثل تغيير اسم الفصل.

أبرز

  • قابلة للتطوير ، أضف أكبر عدد ممكن من السمات والألوان كما تريد. لا يوجد حد لعدد السمات واللون الذي يمكنك استخدامه

  • مرنة ، لا تقصر نفسك بالألوان ، مع المتغيرات المدمجة ، يمكنك موضوع أي خاصية CSS

  • من السهل التبني ، لا حاجة لتغيير ترميزك ، فهو يعمل فقط!

  • يتم دعم الموضوعات المتداخلة لحالات الاستخدام المعقدة

  • دعم CSS CSS الكامل CSS

Changelog

شاهد Changelog الكامل هنا

الاستخدام

 NPM I -D TWOlORS

خذ تكوين Tailwind الموجود وحرك الألوان في المكون الإضافي createThemes ، مما يمنحه اسمًا (على سبيل المثال).

tailwind.config.js

 + const {createTheMes} = require ('tw-colors') ؛

   module.exports = {
      المحتوى: ['./src/**/*.
      سمة: {
         تمديد: {- الألوان: {- 'primary': 'SteelBlue' ،- 'Secondary': 'DarkBlue' ،- 'Brand': '#f3f3f3' ،- // ... أخرى الألوان-}} ،
      } ،
      الإضافات: [+ 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-secanticary'> ... </p>
      </div>
      ...
   </html>

هذا كل شيء ، موقعك لديه موضوع خفيف !

إضافة المزيد من الموضوعات

tailwind.config.js

   const {createTheMes} = require ('tw-colors') ؛

   module.exports = {
      المحتوى: ['./src/**/*.
      الإضافات: [
         المبدعين ({
            ضوء: {
                "الأساسي": 'SteelBlue' ،
               "الثانوية": "DarkBlue" ،
               'العلامة التجارية': '#f3f3f3' ،
            } ،+ dark: {+ 'primary': 'turquoise' ،+ 'Secondary': 'Tomato' ،+ 'Brand': '#4a4a4a' ،+} ،+ forest: {+ 'primary': '#2a9d8f' ،+ 'Secondary': '#e9c46a' ،+ 'brand': '#264653' ،+} ،+ Winter: {+ 'primary': 'HSL (45 39 ٪ 69 ٪)' ،+ 'Secondary': ' RGB (120 210 50) "،+" العلامة التجارية ":" 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 هنا </div> <!-يتم تقريب هذا الزر عندما يكون السمة "الظلام" -> <button class = 'Dark: Rounded'> انقر فوق لي </button>
   </div>

انظر الخيارات لتخصيص الاسم البديل

التحذير: Group- {modifier} استخدم دائمًا متغير المجموعة قبل متغير السمة.
   <html class = 'theme-dark'> ... <div class = 'group'> <div class = 'direct-dark: group-hover: bg-red-500'> لا يعمل متغير المجموعة </div > <div class = 'group-over: theme-dark: bg-red-500'> ✅ يعمل متغير المجموعة بشكل صحيح </div> </div>
       </html>

موضوعات متداخلة

مع موضوع البيانات

مجرد عش الموضوعات ...

   <html data-theme = 'dark'>
      ...
      <div data-theme = 'Winter'>
         ...
      </div>

      <div data-theme = 'forest'>
         ...
      </div>
   </html>

مع الفصل

لكي تعمل المتغيرات بشكل صحيح في الموضوعات المتداخلة ، يجب إضافة سمة data-theme الفارغة إلى جانب class الموضوع المتداخلة

   <html class = 'dark'>
      ...
      <div data-them-them class = 'Winter'>
         ...
      </div>

      <div data-them-theme class = 'forest'>
         ...
      </div>
   </html>

تحذيرات:

لا تقم بتعيين العتامة في تعريف اللون عند استخدام السمات المتداخلة ، من الأفضل عدم توفير عتامة قاعدة في تعريفات الألوان الخاصة بك.

من خلال هذا الإعداد ، سيتم توريث 0.8 العتامة المحددة على اللون الأساسي لموضوع "الوالد" بواسطة اللون الأساسي للموضوع "الطفل".

 المبدعين ({
   الوالد: {
       "الأساسي": "HSL (50 50 ٪ 50 ٪ / 0.8)" ، // لا تفعل ذلك ، سوف تنتشر العتامة الافتراضية إلى موضوع الطفل "الثانوي": "DarkBlue" ،
   } ،
   طفل: {
       "الأساسي": "الفيروز" ، "الثانوي": "الطماطم" ،
   } ،})
 <html data-theme = 'parent'>

   <div data-theme = 'child'> <!-يتمتع اللون الأساسي بضعف 0.8 غير متوقع-> <button class = 'bg-primary'> انقر فوق </button>
      ... </div> </html>
الخصائص الموروثة

الخصائص الموروثة (مثل "Font-Family") ورثتها جميع أحفاد ، بما في ذلك الموضوعات المتداخلة. من أجل إيقاف الانتشار ، يجب إعادة تشكيل أنماط الأساس على موضوعات متداخلة

سلوك غير متوقع

   <html class = 'shempl-dark font-sans dark: font-serif'> ... <div> ✅ serif نشط </div> <div class = "theme-light"> لا يزال Serif نشطًا ، إنه حصلت على ورث من السمة الوالد </div>
        </html>

✅ يعمل كما هو متوقع

   <html class = 'theme-dark font-sans-dark dark: font-serif'> ... <viv> ✅ serif نشط </div> <div class = "theme-light font-sans dark: font -serif "> ✅ sans نشط </div>
      </html>

css color-schheme

يقبل createThemes أيضًا وظيفة تكشف الوظائف light dark .
لتطبيق خاصية CSS color-scheme ، ما عليك سوى لف سمة مع light أو dark . "

راجع مستندات MDN لمزيد من التفاصيل حول هذه الميزة.

tailwind.config.js

 CreateTheMes (({Light ، Dark}) => ({
   "الشتاء": الضوء ({
       'primary': 'SteelBlue' ، 'Base': 'DarkBlue' ، 'Surface': '#f3f3f3' ،
   }) ،
   'Forest': Dark ({
       "الأساسي": "الفيروز" ، "قاعدة": "الطماطم" ، "السطح": "#4A4A4A" ،
   }) ،}))

متغيرات CSS

تقوم TWOLORS بإنشاء متغيرات CSS باستخدام التنسيق- --twc-[color name] افتراضيًا ، فهي تحتوي على قيم HSL.

على سبيل المثال ، مع التكوين التالي ، سيتم إنشاء المتغيرات- --twc-primary ، --twc-base ، --twc-surface .

tailwind.config.js

   module.exports = {// ... your tailwind config plugins: [createTheMes ({'Winter': {
                'primary': 'SteelBlue' ، 'Base': 'DarkBlue' ، 'Surface': '#f3f3f3' ،} ، 'Forest': {
                "الأساسي": "الفيروز" ، "القاعدة": "الطماطم" ، "السطح": "#4A4A4A" ،} ،}) ،
   } ؛

مثال الاستخدام:

 .my-class {color: hsl (var (-twc-primary)) ؛   الخلفية: HSL (VAR (-TWC-PRIMARY) / 0.5) ؛
}

انظر الخيارات لتخصيص متغيرات CSS

خيارات

يمكن تمرير الخيارات كوسيطة ثانية إلى المكون الإضافي

 المبدعين ({
   // تكوين ألوانك هنا ...} ، {
   ProducecsSvariable: (Colorname) => `-twc-$ {colorname}` ،
   ProductheMeclass: (اسم الأسلوب) => `` السمة-$ {murname} ``
   ProductheMevariant: (اسم الأسلوب) => `` السمة-$ {homeName} `
   الافتراضي: "الضوء"
   صارم: خطأ})

الافتراضي

السمة الافتراضية التي يجب استخدامها ، فكر في الأمر كموضوع احتياطي عند عدم إعلان أي موضوع.

مثال: السمة الافتراضية البسيطة

 المبدعين ({
   'شتاء': {
       "الأساسي": 'SteelBlue' ،
   } ،
   'هالوين': {
       "الابتدائي": "قرمزي" ،
   } ،} ، {
   DefaultTheme: 'Winter' // 'Winter' | "هالوين"})

يمكن أيضًا اختيار السمة الافتراضية وفقًا لضوء المستخدم أو التفضيل المظلم (انظر MDN تفضل color-color-scheme)

مثال: التكيف مع تفضيل المستخدم

 المبدعين ({
   'شتاء': {
       "الأساسي": 'SteelBlue' ،
   } ،
   'هالوين': {
       "الابتدائي": "قرمزي" ،
   } ،} ، {
   DefaultTheMe: { / ** * عندما `media (تفضل color-scheme: light)` هو مطابق ، * السمة الافتراضية هي موضوع "الشتاء" * / light: 'Winter' ،
       / ** * عندما يكون `media (تفضل color-scheme: dark)` هو مطابق ، * الموضوع الافتراضي هو موضوع "الهالوين" */ الظلام: "هالوين" ،
    }})

حازم

الافتراضي : false

إذا تم تجاهل ألوان غير صالحة false .
إذا كانت ألوان غير صالحة true تنتج خطأ.

مثال

 المبدعين ({
   'عيد الميلاد': {
       // لون غير صالح "أساسي": "Redish" ،
   } ،
   'Darkula': {
       "الابتدائي": "قرمزي" ،
   } ،} ، {
   // سيتم طرح خطأ
   صارم: صحيح})

Producecssvariable

الافتراضي : (colorName) => `--twc-${colorName}`

تخصيص متغيرات CSS التي تم إنشاؤها بواسطة البرنامج المساعد.

مع التكوين أدناه ، سيتم إنشاء المتغيرات التالية:

  • --a-primary-z (بدلاً من TWC-PRIMARY )

  • --a-secondary-z (بدلاً من TWC-Seconsive )

  • --a-base-z (بدلاً من قاعدة TWC )

 المبدعين ({
   'ضوء': {
       'primary': 'SteelBlue' ، 'Secondary': 'DarkBlue' ، 'Base': '#f3f3f3' ،
   } ،
   'مظلم': {
       "الابتدائي": "الفيروز" ، "ثانوي": "الطماطم" ، "قاعدة": "#4A4A4A" ،
   } ،} ، {
   ProducecsSvariable: (Colorname) => `-A-$ {colorname} -z`})

ProductheMeclass

الافتراضي : (themeName) => themeName

تخصيص أسماء الفئات من الموضوعات والمتغيرات

مع التكوين أدناه ، سيتم إنشاء أسماء الفئات والمتغيرات التالية:

  • theme-light (بدلا من الضوء )

  • theme-dark (بدلا من الظلام )

 المبدعين ({
   'ضوء': {
       'primary': 'SteelBlue' ، 'Secondary': 'DarkBlue' ، 'Base': '#f3f3f3' ،
   } ،
   'مظلم': {
       "الابتدائي": "الفيروز" ، "ثانوي": "الطماطم" ، "قاعدة": "#4A4A4A" ،
   } ،} ، {
   ProductheMeclass: (اسم الأسلوب) => `السمة-$ {homeName}`})
 <html class = 'theme-dark'>
   ... <button class = 'theme-dark: rounded'> انقر فوق لي </button>
   ... </html>

ProductheMevariant

الافتراضي : مثل produceThemeClass

تخصيص المتغيرات

مع التكوين أدناه ، سيتم إنشاء المتغيرات التالية:

  • theme-light (بدلا من الضوء )

  • theme-dark (بدلا من الظلام )

 المبدعين ({
   'ضوء': {
       'primary': 'SteelBlue' ، 'Secondary': 'DarkBlue' ، 'Base': '#f3f3f3' ،
   } ،
   'مظلم': {
       "الابتدائي": "الفيروز" ، "ثانوي": "الطماطم" ، "قاعدة": "#4A4A4A" ،
   } ،} ، {
   ProducetheMevariant: (اسم الأسلوب) => `السمة-$ {$}` `})
 <html data-theme = 'dark'>
   ... <button class = 'theme-dark: rounded'> انقر فوق لي </button>
   ... </html>

من نفس المؤلف

up-fetch: أداة تكوين Tiny 1kb ل API Fetch مع افتراضي معقول

يرجى المشاركة

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل