حالت تاریک بدون فورک دوم: توکن‌های دو-موده در سیستم طراحی ماه

بیشتر تیم‌هایی که حالت تاریک را «بعداً» اضافه می‌کنند، سرانجام دو سیستم طراحی دارند: یکی برای روز، یکی برای شب که هفتگی از هم فاصله می‌گیرند. راه‌حل ما از روز اول همین بود: یک مجموعه توکن، دو mode، و هیچ شرطی داخل کامپوننت.

توکن به‌جای مقدار

هر رنگِ سطح‌دار در سیستم طراحی، یک توکن دو-موده است:

{
  "color": {
    "bg": {
      "base":   { "light": "#F4F7FB", "dark": "#0B1524" },
      "raised": { "light": "#FFFFFF", "dark": "#112A46" }
    },
    "text": {
      "primary":   { "light": "#112A46", "dark": "#E7EDF6" },
      "muted":     { "light": "#5B6B84", "dark": "#93A4BF" }
    }
  }
}

در Tailwind، این توکن‌ها به متغیرهای CSS وصل می‌شوند و کامپوننت فقط نام سطح را می‌شناسد:

// کامپوننت هرگز نمی‌پرسد روز است یا شب
export function Panel({ children }: { children: React.ReactNode }) {
  return <div className="bg-bg-raised text-text-primary">{children}</div>;
}

کلیدِ تعویض: data-theme روی html

حالت با یک ویژگی روی ریشه عوض می‌شود و CSS variableها در همان لایه swap می‌شوند؛ هیچ رندر دوباره‌ای در React لازم نیست:

:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

[data-theme="dark"] {
  --bg-base: #0b1524;
  --text-primary: #e7edf6;
}

قواعدی که تیم را از لغزش بازمی‌دارد

• هرگز رنگ هگز مستقیم در کامپوننت: lint rule با ESLint کلاس‌های bg-[#...] را رد می‌کند.
• نور (glow) و سایه با توکن نوری: سایه‌های حالت تاریک، توکن جدا دارند، نه opacity سیاه.
• کنتراست WCAG AA در هر دو mode: job CI با axe-core دو اسکرین‌شات را می‌سنجد.

سطح	نور/تاریک	کنتراست AA
text-primary روی bg-base	۱۵.۲ : ۱	بله / بله
text-muted روی bg-raised	۴.۸ : ۱	بله / بله

نتیجه‌گیری

حالت تاریکِ پایدار نتیجه انضباط توکن است، نه تعداد خط کد. وقتی کامپوننت فقط «سطح» را می‌شناسد، اضافه کردن حالت سوم (مثلاً کم‌نور) هم فقط یک ستون دیگر در جدول توکن است.