شرح صفوف ومحتوى الفقرة
يُعد مبدل الوضع الفاتح والداكن (Light & Dark Theme Context) المثال العملي الأوضح لاستخدام السياق، لأن معظم عناصر الواجهة من أشرطة علوية وبطاقات دروس وأزرار تحتاج إلى معرفة نمط الألوان النشط في اللحظة نفسها.
بمجرد استدعاء دالة التبديل من شريط التحكم، يحدّث المزود قيمة الحالة theme مرة واحدة، فتستجيب جميع البطاقات المشتركة في السياق عبر useContext فوراً وتعدل ألوان خلفياتها ونصوصها بتناسق تام.
HTML
function ThemeCard() {
const { theme, toggle } = useContext(ThemeContext);
const bg = theme === 'dark' ? '#1e293b' : '#f8fafc';
return (
<div style={{ background: bg, padding: '12px' }}>
<p>Active mode: {theme}</p>
<button onClick={toggle}>Switch Theme</button>
</div>
);
}