متغيرات CSS — بدّل ثيم موقعك بضغطة

لما يتكرر نفس اللون بعشر أماكن وتبي تغيّره، تبدأ رحلة العذاب. الحل: متغيرات CSS:

:root {
  --bg: #0a0a0c;
  --text: #f2f2f4;
  --brand: #8b5cf6;
}

body { background: var(--bg); color: var(--text); }
button { background: var(--brand); }

المتغيرات تعرف داخل :root وتُستدعى بـ var(--اسم). والسحر: الثيم الفاتح يصير جملة وحدة:

body.light {
  --bg: #ffffff;
  --text: #1a1a1a;
}

كل عنصر يستعمل var يتلون تلقائياً — بدون لمس أي عنصر واحد.