السمة والوضع الداكن

يبدأ الوضع الداكن دائمًا بداية جيدة. تضيف dark:bg-slate-900 بجانب bg-white، وdark:text-slate-100 بجانب text-slate-900، فتصبح شاشة الاستقبال مقنعة في عشر دقائق. ثم يأتي الباقي: أربعون مكوّنًا، لكل منها خلفياته وحدوده وحالات التمرير فوقه. كل فئة لونية تستدعي فئة ثانية. يتضاعف طول سمات class لديك، وبعد شهر تكتشف أن ثلاث درجات مختلفة من الحدود الداكنة تتعايش معًا، لأن أحدًا لا يتذكر أيّها كانت المعتمدة.

العَرَض حقيقي، لكن سببه ليس الوضع الداكن: السبب أنك كتبت ألوانًا حرفية داخل المكوّنات. فـbg-white يصف صبغة لونية لا دورًا. وما دامت مكوّناتك تسمّي الصبغات، فكل سمة إضافية تضاعف الفئات. أما إذا سمّت الأدوار — سطح البطاقة، ولون النص العادي، ولون الحد الهادئ — فإن تغيير السمة يصبح مجرد إعادة تعريف اثنتي عشرة قيمة في مكان واحد، ولا يبقى في المكوّنات أي متغيّر dark:.

تعريف السمة

يعيش كل التخصيص في ملف الأنماط، تحت @theme. وكل تصريح ينتج متغيّر CSS والفئات المساعدة المقابلة له في آن واحد:

@import "tailwindcss";

@theme {
  /* لوحة ألوان للعلامة، مُدرَّجة على غرار لوحات Tailwind */
  --color-marque-50:  oklch(0.97 0.02 259);
  --color-marque-500: oklch(0.62 0.19 259);
  --color-marque-600: oklch(0.55 0.20 259);
  --color-marque-700: oklch(0.48 0.19 259);

  /* الخطوط */
  --font-titre: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* حجم نص مخصص مع ارتفاع السطر الخاص به */
  --text-accroche: 1.375rem;
  --text-accroche--line-height: 1.5;

  /* نصف قطر تقوّس خاص بالمشروع */
  --radius-carte: 0.75rem;
}